前两天,有一个朋友拿来一个嵌套的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价值。
在此感谢我的朋友给了我们一个这么好的递归调用的例子。这个例子,十分充分的体现了递归的价值,以及递归的传值策略。
递归调用遍历数组的渲染结果如下:
结果层次明了,完美。