前端笔试题目总结——应用JavaScript函数递归打印数组到HTML页面上

时间:2023-03-08 20:51:09

数组如下:

var item=[{
name:'Tom',
age:70,
child:[{
name:'Jerry',
age:50,
child:[{
name:'William',
age:20
}]
},
{
name:'Jessi',
age:30
}]
}];

输出的HTTML如下:

 <ol>
<li>name:Tom</li>
<li>age:70</li>
<li>children:
<ol>
<li>name:Jerry</li>
<li>age:50</li>
<li>children:
<ol>
<li>name:William</li>
<li>age:20</li>
</ol>
</li>
</ol>
<ol>
<li>name:Jessi</li>
<li>age:30</li>
</ol>
</li>
</ol>

思路分析:该数组是嵌套数组,遍历数组,当前元素具有child时,递归调用函数,不具有child时,</ol>结尾后封闭网页元素。

JavaScript函数实现如下:

 var str="";
function test(obj){
for(var key in obj){
str+="<ol>";
if(obj[key].hasOwnProperty("name")){
str=str+"<li>"+"name:"+obj[key].name+"</li>";
}
if (obj[key].hasOwnProperty("age")) {
str=str+"<li>"+"age:"+obj[key].age+"</li>";
}
if(!obj[key].hasOwnProperty("child")){
str+="</ol>";
str+="</li>";
str+="</ol>";
}
if(obj[key].hasOwnProperty("child")){
str=str+"<li>"+"children:";
test(obj[key].child);
}
}
}
test(item);
console.log("%s",str);