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>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wuqiuxue/p/8340986.html