JS高级——递归
基本概念
1、在函数内调用函数自己，就是递归
2、没有递归结束条件的递归，就是死递归
3、化归思想，将一个问题由难化易，由繁化简，由复杂化简单的过程称为化归，它是转化和归结的简称。
基本使用
1、计算1到100的和，基本规律如下
//1-100之间的和
//1-1 1
//1-2 1 + 2
//1-3 1 + 2 + 3
//1-4 1 + 2 + 3 + 4
//1-n 1到(n-1)的和 + n
类似于：sum(n)=sum(n-1)+sum(n)
<script>
function sum(n) {
if (n == 1) {
return 1;
}
return sum(n - 1) + n;
} var num = sum(100);
console.log(num);//5050
</script>
2、阶乘
//阶乘
//n!
//1*2*3...*n //1 1
//2 1! * 2
//3 2! * 3
//4 3! * 4
//n (n-1)!*n
<script>
function factorial(n) {
if (n == 1) {
return 1;
}
return factorial(n - 1) * n;
} console.log(factorial(5))
</script>
3、斐波那契
//斐波那契数列
//1 1 2 3 5 8 13 21
//1 1
//2 1
//3 第1项 + 第2项
//4 第2项 + 第3项
//5 第3项 + 第4项
<script>
function fibonacci(n) {
if (n <= 2) {
return 1;
}
return fibonacci(n - 1) + fibonacci(n - 2);
} console.log(fibonacci(10));
</script>
4、遍历所有后代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
//给页面中所有的元素添加一个边框 1px solid pink
//DOM中，没有提供直接获取后代元素的API
//但是可以通过childNodes来获取所有的子节点 //先找body的所有子元素
//再找body的子元素的所有子元素
var allChildren = [];
function getChildNode(node){
//先找子元素
var nodeList = node.childNodes;
//在用子元素再找子元素 这里就可以递归了
//for循环中的条件，就充当了结束的条件
for (var i = 0; i < nodeList.length; i++) {
//childNode获取到到的节点包含了各种类型的节点
//但是我们只需要元素节点 通过nodeType去判断当前的这个节点是不是元素节点
var childNode = nodeList[i];
//判断是否是元素节点
if(childNode.nodeType == 1){
childNode.style.border = "1px solid pink";
getChildNode(childNode);
}
}
}
getChildNode(document.body);
}
</script>
</head>
<body>
<div>1div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>2div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>3div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>4div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>5div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>6div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>7div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>8div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>9div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>10div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p>
<p>我是第3个p标签</p>
<p>我是第4个p标签</p>
<p>我是第5个p标签</p>
<p>我是第6个p标签</p>
<p>我是第7个p标签</p>
<p>我是第8个p标签</p>
<p>我是第9个p标签</p>
<p>我是第10个p标签</p>
</body>
</html>
第二种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//给body下所有的后代元素添加border 1px solid pink
//DOM 没有提供直接获取所有后代元素的API
//jQuery提供了find
//DOM 提供了获取自带元素的属性
// childNodes children //获取一个节点的所有后代节点
//可以先获取他所有的子节点
//再一次获取所有子节点的子节点
//以此类推，就获取到了所有的后代节点 function getChildNodes(node){
var nodes = node.childNodes;
var arr = []; for (var i = 0; i < nodes.length; i++) {
var childNode = nodes[i];
if(childNode.nodeType == 1){
//可以在这里使用这个元素节点了
arr.push(childNode);
//第一次进来的时候childNOde就是第一个div
var temp = getChildNodes(childNode);
arr = arr.concat(temp);
}
}
return arr;
} window.onload =function () {
// var arr1 = getChildNodes(document.getElementsByTagName("div")[0]); var arr = getChildNodes(document.body); for (var i = 0; i < arr.length; i++) {
var ele = arr[i];
ele.style.border = "1px solid pink";
}
}
</script> </head>
<body>
<div>1div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>2div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>3div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>4div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>5div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>6div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>7div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>8div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>9div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>10div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p>
<p>我是第3个p标签</p>
<p>我是第4个p标签</p>
<p>我是第5个p标签</p>
<p>我是第6个p标签</p>
<p>我是第7个p标签</p>
<p>我是第8个p标签</p>
<p>我是第9个p标签</p>
<p>我是第10个p标签</p>
</body>
</html>
JS高级——递归的更多相关文章
- js高级-递归调用
函数调用自身 求1-100的和 var sum = 0; for(var i = 1; i<=100; i++){ sum += i } console.log(sum) //自己写的递归 va ...
- JS高级---递归案例
递归案例 递归案例: 求一个数字各个位数上的数字的和: 123 --->6 ---1+2+3 //递归案例:求一个数字各个位数上的数字的和: 123 --->6 ---1+2 ...
- JS高级---递归
递归 递归: 函数中调用函数自己, 此时就是递归, 递归一定要有结束的条件 var i = 0; function f1() { i++; if (i < 5) { f1(); } cons ...
- js高级之函数高级部分
基于尚硅谷的尚硅谷JavaScript高级教程提供笔记撰写,加入一些个人理解 github源码 博客下载 原型与原型链 prototype : 显式原型属性,它默认指向一个Object空对象(即称为: ...
- JS高级前端开发群加群说明及如何晋级
JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明: 一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...
- 前端进阶试题css（来自js高级前端开发---豪情）既然被发现了HOHO，那我就置顶了嘿嘿！觉得自己技术OK的可以把这套题目做完哦，然后加入高级前端的社区咯
http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...
- Node.js高级编程读书笔记Outline
Motivation 世俗一把,看看前端的JavaScript究竟能做什么. 顺便检验一下自己的学习能力. Audience 想看偏后台的Java程序员关于前端JavaScript的认识的职业前端工程 ...
- 读JS高级——第五章-引用类型 _记录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定
js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener( ...
随机推荐
- android调试
要进行调试,首先构建app的时候必须选择是Debug模式,而不能是Release模式. 接下来的内容转载自: http://www.cnblogs.com/gaoteng/p/5711314.html ...
- 又见GCD
Problem Description 有三个正整数a,b,c(0<a,b,c<10^6),其中c不等于b.若a和c的最大公约数为b,现已知a和b,求满足条件的最小的c. Input ...
- Build Tools主流是什么？为什么要使用它？
Build Tools 即构建工具是一个把源代码生成可执行应用程序的过程自动化的程序(例如Android app生成apk).构建包括编译.连接跟把代码打包成可用的或可执行的形式. 1.构建工具的作用 ...
- 非常适合新手的jq/zepto源码分析07---ajax的封装
复习下ajax吧! 1.创建XMLHttpRequest对象 xmlhttp=new XMLHttpRequest(); xmlhttp=new ActiveXObject("Microso ...
- Java读取数据库数据生成柱状图
此案例是用swing显示数据的.须要引入jfreechart相关包.不同版本号可能包不同样.本人用的是 此案例在ssi框架下会报错,不用框架就没问题. Java后台逻辑代码: public class ...
- logistic regression教程1
实现线性拟合 我们用python2.7实现上一篇的推导结果.请先安装python matplotlib包和numpy包. 具体代码如下: #!/usr/bin/env python #! -*- co ...
- hdu 5416 CRB and Tree(2015 Multi-University Training Contest 10)
CRB and Tree Time Limit: 8000/4000 MS (J ...
- Android开源框架ViewPageIndicator和ViewPager实现Tab导航
前言: 关于使用ViewPageIndicator和ViewPager实现Tab导航,在开发社区里已经有一堆的博客对其进行了介绍,假设我还在这里写怎样去实现.那简直就是老生常谈,毫无新奇感,并且.我也 ...
- bzoj2538: [Ctsc2000]公路巡逻
超车这个东西这么恶心肯定是要暴力求的(自圆其说) 那么分成一个个时间段来搞,然后DP一下 化一下那个速度,耗费时间是在300s~600s之间的 那我们就可以设f[i][j]为走到第i个位置用了j的时间 ...
- XAML实例教程系列 - 类型转换器(Type Converter)七
XAML实例教程系列 - 类型转换器(Type Converter) 分类: Windows 8 Silverlight2012-06-25 13:40 961人阅读 评论(0) 收藏 举报 butt ...