js js Javascript递归构建菜单 展开式菜单的构建利用接口的数据

构建导航菜单

// 使用数据库中的结点列表构建导航菜单// 结点结构如下
// interface Node {
//     /** 导航菜单结点 id */
//     id: number//     /** 导航菜单父结点 id (parent id)，根结点 pid 为 -1 */
//     pid: number//     /** 菜单名称 */
//     name: string//     /** 子菜单列表 */
//     children?: Node[]
// }

// 从数据库取出的结点列表数据
let data = [{ id: 0, pid: -1, name: '面试' },{ id: 1, pid: 0, name: '计算机基础知识及原理' },{ id: 2, pid: 0, name: '前端技能' },{ id: 3, pid: 0, name: '综合素质' },{ id: 4, pid: 1, name: '编码' },{ id: 5, pid: 1, name: '操作系统' },{ id: 6, pid: 1, name: '网络' },{ id: 7, pid: 1, name: '数据结构' },{ id: 8, pid: 2, name: 'js' },{ id: 9, pid: 2, name: '异步' },{ id: 10, pid: 2, name: '项目' },{ id: 11, pid: 3, name: '学习能力' },{ id: 12, pid: 3, name: '解决问题能力' },
]

应该返回以下的对象（省略部分结点）

{id: 0,pid: -1,name: '面试',children: [{id: 1,pid: 0,name: '计算机基础知识及原理',children: [{id: 4,pid: 1,name: '编码'},{id: 5,pid: 1,name: '操作系统'},// ...]},{id: 2,pid: 0,name: '前端技能',children: [// ...]},{id: 3,pid: 0,name: '综合素质',children: [// ...]}]
}

直接上代码 利用递归找到父节点

let data = [{id: 0,pid: -1,name: '面试'},{id: 1,pid: 0,name: '计算机基础知识及原理'},{id: 2,pid: 0,name: '前端技能'},//...省略数据
]
let mp = {//全局变量 递归使用 也可以传参};
function build(nodes) {// 请实现这个函数，要求时间复杂度 O(n)// （可以直接修改结点列表 data 中的各个结点，如增加 children 属性）//console.log(nodes);for (node of nodes) {if (node['pid'] == -1) {mp.id=node.id;mp.pid=node.pid;mp.name=node.name;mp.children = [];nodes.splice(0, 1);console.log(mp);nodes=buildtree(mp, nodes);}}console.log(nodes);
}function buildtree(itemtreenode, itemlist) {if (itemlist.length === 0) {return;}var j = 0 for (j = 0, len = itemlist.length; j < len; j++) {if (itemtreenode.id === itemlist[j].pid) {var node = {id: itemlist[j].id,pid:itemlist[j].pid,name: itemlist[j].name,children: []}console.log(node);itemtreenode.children.push(node)buildtree(node, itemlist)}}//console.log(mp)return mp;
}build(data)

效果如下