递归思想js实现

熟悉递归的同学就不用再解释什么递归了。

直接来练习递归

题目一求1-10的和

function sum(n) {
    if(n===1){
        return 1;
    }
    return sum(n-1)+n;
}

题目二求阶乘问题比如1*2*3…*5

function multiple(n) {
    if(n===1){
        return 1;
    }
    return multiple(n-1)*n;
};
console.log(multiple(5));

最著名的斐波那契列数列

function fibonacci(n){
    if(n <= 2){
        return 1;
    }
    return fibonacci(n-1) + fibonacci(n-2);
}

console.log(fibonacci(10));

利用递归遍历所有的后代元素

方法1

window.onload = function () {
    //给页面中所有的元素添加一个边框  1px solid pink
    //DOM中，没有提供直接获取后代元素的API
    //但是可以通过childNodes来获取所有的子节点

    //先找body的所有子元素
    //再找body的子元素的所有子元素
    function getChildNode(node) {
        var allNode=node.childNodes;

        for (var i = 0; i < allNode.length; i++) {
            var current=allNode[i];
            if(current.nodeType===1){
                current.style.border="1px red solid";
                getChildNode(current);
            }
        }
    }
    getChildNode(document.body);
}

//方法1改进（1）

var allNodeArr=[];//改进的地方

function getChildNode(node) {
    var allNode=node.childNodes;
    for (var i = 0; i < allNode.length; i++) {
        var current=allNode[i];
        if(current.nodeType===1){

            allNodeArr.push(current);//改进的地方
            getChildNode(current);
        }
    }
}
getChildNode(document.body);

for (var i = 0; i < allChildren.length; i++) {
    var child = allChildren[i];
    child.style.border= "1px solid pink";
}

//方法1改进（2）

function getChildNode(node){
    //先找子元素
    var nodeList = node.childNodes;
    var result = [];
    //在用子元素再找子元素  这里就可以递归了
    //for循环中的条件，就充当了结束的条件
    for (var i = 0; i < nodeList.length; i++) {
        //childNode获取到到的节点包含了各种类型的节点
        //但是我们只需要元素节点  通过nodeType去判断当前的这个节点是不是元素节点
        var childNode = nodeList[i];
        //判断是否是元素节点
        if(childNode.nodeType == 1){
            result.push(childNode);
            var temp = getChildNode(childNode);
            result = result.concat(temp);
        }

    }
    return result;
}

//html代码

<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>