Document 后台前端
let treeData = [
{
name:"后台",
children: [
{
name: "数据库",
}, {
name: "服务器",
}, {
name: "java",
}
]
},{
name:"前端",
children: [
{
name: "vue",
}, {
name: "react",
}, {
name: "angular",
}
]
}
]
// 纯字符串拼接
// let str = "";
// str += "
"
// for(var i = 0; i < treeData.length; i ++) {
// str += "
" + treeData[i].name +
// if(treeData[i].children.length > 0) {
// for(var j = 0; j < treeData[i].children[j].length; j ++ ) {
// "
" +
// "
" + treeData[i].children[j].name + "" +
// "
"
// }
// }
// + "
"
// }
// str +="
"
// document.body.innerHTML = str;
// 递归
// let str = "";
// function recur(tree) {
// for(var i = 0; i < tree.length; i ++) {
// str += `
//
//
${tree[i].name}
// ${tree[i].children.length > 0 && recur(tree[i].children)}
//
// `
// }
// }
// recur(treeData);
// document.body.innerHTML = str;
//
var loop = (treeData) => {
return treeData.map(e => {
return e.children?
`
${e.name} ${loop(e.children)}
`
:
`
${e.name}
`
})
}
var html = loop(treeData).join("");
console.log(html);
document.body.innerHTML = html
