从数组遍历谈一下js中的递归调用
2017-03-25 01:18

前言

前两天,有一个朋友拿来一个嵌套的json数组,问我怎么使用递归调用的方式来遍历数组。觉得js中的递归调用是一种很常用的计算逻辑,就记录下来了。

这个数组是这样的:

var array=[{
    title:"目录",
    children:[{
        title:"我的音乐",
        children:[{
            title:"刘若英",
            children:[{
                title:"后来"
            },{
                title:"我们没有在一起"
            },{
                title:"成全"
            }]
        },{
            title:"周杰伦"
        },{
            title:"蔡依林"
        }]
    },{
        title:"我的书籍",
        children:[{
            title:"javascript"
        },{
            title:"html css"
        }]
    }
    ]
}];

这个数组是多层次嵌套的数组,要把数组中的数据以树形分层的形式展示出来。

我写的递归调用的代码如下:

function render(arr,level){
    var level=level||0;
    level++;
    var i= 0,len=arr.length;
    var str="<ul>"
    for(;i<len;i++){
        str+="<li>"+level+"、"+arr[i].title;
        if(arr[i].children&&arr[i].children.length>0){
            str+=render(arr[i].children,level);
        }
        str+="</li>";
    }
    str+="</ul>";
    return str;
}
document.body.innerHTML=render(array);

代码不算多,其中的灵魂就是使用递归调用。render函数第一次调用时遍历第一层数组内容,递归第二次调用是遍历第二层数组内容,依次类推。由于数组的嵌套层数不确定,所以递归是最好的解决办法。只要children对象为一个数组,那么就继续递归调用render方法进行遍历。其中的level,用来记录遍历的层数。可以看到,level在每次调用render时都是从上一个render传递过来的参数,这样能保证level跟数组的嵌套层数一致。

 render(array,0){
    level=0;
    level++;
    for(;;){
        render(array[2].children,1){
            level=1;
            level++;
            render(array[2].children[0].children,2){
                ....
            }
        }
        render(array[3].children,1){
            ....
        }
        
    }
    
}

递归的调用过程,以及level的传值情况,如上面的代码。每深入一层,level才增加一,同级的调用render,level是不增加的。这个递归遍历,以及递归中嵌套深度的level值的传递获取,我觉得很有意义,对于js中的递归使用具有典型的demo价值。

在此感谢我的朋友给了我们一个这么好的递归调用的例子。这个例子,十分充分的体现了递归的价值,以及递归的传值策略。

递归调用遍历数组的渲染结果如下:

blob.png

结果层次明了,完美。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(6923)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1