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( ...
随机推荐
- 纯JSP实现简单微信开发后台
%@ page import="java.net.*" % %@ page import="java.math.*" % %@ page import=&quo ...
- [USACO06JAN]牛的舞会The Cow Prom Tarjan
题目描述 The N (2 <= N <= 10,000) cows are so excited: it's prom night! They are dressed in their ...
- PHP输出缓冲控制 - Output Control 函 应用详解
简介 说到输出缓冲,首先要说的是一个叫做缓冲器(buffer)的东西.举个简单的例子说明他的作用:我们在编辑一篇文档时,在我们没有保存之前,系统是不会向磁盘写入的,而是写到buffer中,当buffe ...
- Cisco IOU Web Interface ： Web IOU
https://github.com/dainok http://sns.clnchina.com.cn/space.php?uid=404779&do=blog&id=4298 ht ...
- JAVA 网络长短连接
作为java的刚開始学习的人,看了网上的资料后,关于java的长短连接,感觉理解的不是非常深刻.结合自己的学习和网上的资料整理例如以下.不对之处请大家批评指正. ...
- IOS怎么实现一个UITableView的下拉刷新
採用的EGORefreshTableHeaderView来实现: 在Controller上实现EGORefreshTableHeaderDelegate的delegate @property(nona ...
- F广搜
<span style="color:#330099;">/* F - 广搜 基础 Time Limit:1000MS Memory Limit:10000KB 64b ...
- 一次次迭代 百度语音生成 api 字幕 语音的同步性 关键
发音字符 数一样 D:\myv\semHAND9myuid1523961381.avi 0.7053863117786668 --------------- 深圳市雅超服饰有限公司是一家专业设计制作高 ...
- WIZnet的网络产品怎样选型
文章来源:成都浩然 我们在选用WIZnet的网络产品的时候.面对诸多的器件不知怎样选择,这里介绍一些方法以帮助project师高速准确地选择产品. WIZnet的产品有一个共同的特性.那就硬件TCPI ...
- System.load 与 System.loadLibrary 的区别
相同点 它们都可以用来装载库文件,不论是JNI库文件还是非JNI库文件. 在任何本地方法被调用之前必须先用这个两个方法之一把相应的JNI库文件装载. System.load System.load 参 ...