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( ...
随机推荐
- java中split以。点和|分割的问题
问题:想要按照点来切分字符串直接这样 String[] filep=filename.split("."); 结果得到一个空数组 解决方法: 法一:需要转义,改为:(注意是2个\\ ...
- codevs2370 小机房的树
题目描述 Description 小机房有棵焕狗种的树,树上有N个节点,节点标号为0到N-1,有两只虫子名叫飘狗和大吉狗,分居在两个不同的节点上.有一天,他们想爬到一个节点上去搞基,但是作为两只虫子, ...
- codevs1009 产生数
题目描述 Description 给出一个整数 n(n<10^30) 和 k 个变换规则(k<=15). 规则: 一位数可变换成另一个一位数: 规则的右部不能为零. 例如:n=234.有规 ...
- docker: useful commands
docker build -t stock_data_repo_instance24 . docker run -v /opt/log:/opt/log -d -it stock_data_repo_ ...
- MYSQL利用Navicat对含有Bold字段表进行导入导出
MYSQL中含有Blob字段是一件挺麻烦的事情,导出导入不方便.我介绍我是怎么做的. 1.在MYSQL的my.ini最后中加入一行配置max_allowed_packet = 100M,重新启动MYS ...
- Cocos2d-html5入门之2048游戏
一.介绍 Cocos2d-JS是Cocos2d-x的Javascript版本,它的前身是Cocos2d-html5.在3.0版本以前叫做Cocos2d-html5,从3.0版本开始叫做Cocos2d- ...
- unity3d-23种设计模式全解析
http://www.jianshu.com/nb/4161593 2016.08.03 09:26 字数 1203 阅读 584评论 0喜欢 14 希望大家能共同学习,交流 谢谢支持zero(QQ: ...
- Hibernate基于注解的双向one-to-many映射关系的实现
在项目中用到了一对多的实体类关系映射,之前接触的都是基于配置文件的映射实现.可是公司的大部分都是基于注解的.因此自己參考之前的代码捣鼓了基于注解的一对多的映射关系实现. 背景: 一的一端:QingAo ...
- Spring自我总结
1.InitializingBean Spring设置完一个bean的合作者后,会检查bean是否实现InitializingBean接口,实现的话会调用afterPropertiesSet(Init ...
- svn 运行clear up 失败的解决的方法
SVN 的clear up命令失败的解决方法 1. 下载 sqlite3.exe 文件,放到d盘根文件夹. (能够到这里下载 http://download.csdn.net/detail ...