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( ...
随机推荐
- js控制frameset的rows
window.parent.document.getElementById("MainWork").rows="*,0" ;
- codevs3410 别墅房间
题目描述 Description 小浣熊松松到他的朋友家别墅去玩,发现他朋友的家非常大,而且布局很奇怪.具体来说,朋友家的别墅可以被看做一个N*M的矩形,有墙壁的地方被标记为’#’,其他地方被标记为’ ...
- Java面试常被问到的题目+解答
第一,anonymousinnerclass(匿名内部类)是否可以extends(继承)其它类,是否可以implements(实现)interface(接口)? 不行,对于匿名内部类,看到的一句话说的 ...
- P1656 炸铁路 洛谷
https://www.luogu.org/problem/show?pid=1656 题目描述 因为某国被某红色政权残酷的高压暴力统治.美国派出将军uim,对该国进行战略性措施,以解救涂炭的生灵. ...
- [bzoj 1025][SCOI2009]游戏（DP）
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1025 分析:首先这个问题等价于A1+A2+……Ak=n,求lcm(A1,A2,……,Ak)的种 ...
- 【python】字符遍历
Python为我们提供了很多便捷的方式去遍历一个字符串中的字符.比如,将一个字符串转换为一个字符数组(列表): theList = list(theString) 同时,我们可以方便的通过for语句进 ...
- A Complete Guide to Usage of ‘usermod’ command– 15 Practical Examples with Screenshots
https://www.tecmint.com/usermod-command-examples/ -------------------------------------------------- ...
- I/O虚拟化
note:这里主要记录我对IO虚拟化的理解,希望这篇文章对想了解虚拟化IO的同学有点帮助.这是我在看论文[vale,a switched ethernet for virtual machines]的 ...
- wpf 禁用启用webbroswer右键菜单
//禁用脚本错误等类似的窗口信息 this.webBrowser1.ScriptErrorsSuppressed = true; //禁用右键菜单 this.webBrowser1.IsWebBrow ...
- LeetCode 234. Palindrome Linked List （回文链表）
Given a singly linked list, determine if it is a palindrome. Follow up:Could you do it in O(n) time ...