JavaScript递归的概念、常用环境、递归注意事项和递归案例

一句话介绍递归：函数内部自己调用自己,或者在自己函数调用的下级函数中调用自己

常用环境:根据已知条件 推导结果(递归的思想就是将一个未知问题转换为一个已解决的问题来实现)

注意:

(1)递归必须要有判断条件，不加判断会造成死循环

(2)递归函数体内需要递归前面的n-1,而不能是n+1

(3)递归层数不能太深，数据太大，递归次数太多，会导致内存占用过高。

递归案例1:递归执行顺序-从前往后执行

function fn1 () {
  console.log(111)
  fn2()
  console.log('fn1')
}


function fn2 () {
  console.log(222)
  fn3()
  console.log('fn2')
}

function fn3 () {
  console.log(333)
  fn4()
  console.log('fn3')
}

function fn4 () {
  console.log(444)
  console.log('fn4')
}

fn1()
//递归执行结果为
111
222
333
444
fn4
fn3
fn2
fn1

递归案例2：计算 1+2+3+......+n 的结果

function sum(n){
    if(n>1){
        return n + sum(n-1);
    }else{
        return 1; 
    }
}
var jieguo = sum(5); //到连加1-5的和结果
console.log(jieguo);

递归案例3:找规律 ()中也应该是几？  第100个数（从0开始计数）是多少？  0-n的所有数的和

0 1 2 3 4  5  6  7  8  9     10

分析规律: 当前数字=前一个数字+1;特殊情况 n =0

f1(n) = f1(n-1) + n;  

function f1(n){
        if(n == 0){
            return 0;  //有结束判断条件（递归出口）
        }else{
            return n + f1(n-1);
        }
    }
f1(100);

递归案例4:问第20个数是几?

0 1 1 2 3  5  8  13 21

分析规律:当前数字=前一个数字+前二个数字;特殊情况:0 1

function f(z){
        if(z <= 1){
            return z; //有结束判断条件（递归出口）
        }else{
            return f(z-1) + f(z-2);
        }
    }
f(20);

递归进阶案例5:使用递归实现 getElementsByClassName

html结构:

    <div>
        <div>1
            <div class="c">2</div>
            <div>3</div>
        </div>
        <div class="c">4</div>
        <div>5
            <div>6</div>
            <div class="c">7</div>
        </div>
        <div>8</div>
    </div>

分析

    1. 实现一个方法byClass()需要的参数是:

        node: 在某个节点上寻找元素

        className: 需要寻找的className

        arr: 找到的元素存储到这个数组中

    2. 遍历 node 的子节点,

    3. 查看这个子节点是否还有子节点,如果没有直接存储到数组中,如果有就继续递归

复制代码

   var arr = [];
    function byClass(node, className, arr){
        //得到传入节点的所有子节点
        var lists = node.childNodes;
        for(var i = 0;i< lists.length;i++){
            //判断是否有相同className元素
            if(arr[i],className == className){
                arr.push(arr[i]);
            }
            //判断子节点是否还有子节点
            if(arr[i].childNodes.length > 0){
                byClass(arr[i],className,arr);
            }
        }
    }