一般用在管理系统时,路由菜单的封装,后端一般将要渲染的路由菜单通过数组的形式,返回给前端,然后一级二级路由是通过中间的id,pid来联结的,一级路由的id就是二级路由的pid,代码如下:(递归的方式我不赞成用,就只用非递归就行啦~)
function arrToTree(data) {
let result = []
let map = new Map()
data.forEach(item => {
// 存入字典集里
map.set(item.id, item)
})
data.forEach(item => {
// 判断字典集里是否有该键
let parent = map.get(item.pid)
if (parent) {
// ?. 可选链操作符,常用于判断对象里是否有该属性
// ?? 合并操作符 或等于||,但是不会对左边值进行处理
(parent?.children??(parent.children = [])).push(item)
} else {
result.push(item)
}
})
return result
}
// let data =[
// {id:1,name:'部门0',pid:0},
// {id:2,name:'部门1',pid:0},
// {id:3,name:'部门2',pid:1},
// {id:4,name:'部门3',pid:1},
// {id:5,name:'部门4',pid:2},
// {id:6,name:'部门5',pid:2},
// {id:7,name:'部门6',pid:3},
// {id:8,name:'部门7',pid:4}
// ]
// 调用方式
arrToTree(data)
结果截图: