前言

前两天，有一个朋友拿来一个嵌套的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价值。

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

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

结果层次明了，完美。