基本概念
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高级——递归
原文地址：https://www.cnblogs.com/wuqiuxue/p/8340986.html