我们一般在做后管项目中,会遇到将平铺的数组结构转成树形结构的问题,比如说公司部门(财务部/财务核算部)、地区级别(省/市/区)等,下面用伪代码分析一下这个问题;
思路:首先父级和子级之间是有一定联系的,这里定义一个平铺的list数组,有属性id、pid、name属性;id:当前项的id,pid是当前项父级的id,这里是id和pid的关系是有pid表示有父级,它父级的id就是它的pid,没有pid表示没有父级,这样就找到父子之间的联系,伪代码如下:
list=[
{'id':'a','pid':'','name':'总裁办'} pid为空,表示没有父级
{'id':'b','pid':'','name':'财务部'}
{'id':'c','pid':'b','name':'财务核算部'} 父id为b,表示它是id为b的子级
{'id':'d','pid':'b','name':'薪资管理部'} 父id为b,表示它是id为b的子级
]
第一步:定义map存储映射关系,在数组里面放一个空数组children,用来存放子级
map={
'a':{'id':'a','pid':'','name':'总裁办',children:[]}
'b':{'id':'b','pid':'','name':'财务部',children:[]}
'c':{'id':'c','pid':'b','name':'财务核算部',children:[]}
'd':{'id':'d','pid':'b','name':'薪资管理部',children:[]}
}
第二步:遍历list里的每一项item,找到item的父级obj,如果有父级,就把这一项添加到父级obj里的children数组里;如果没有父级,则直接把该项添加到treeList新数组中,最后要得到的结果如下:
treeList=[
{'id':'a','pid':'','name':'总裁办'}
{'id':'b','pid':'','name':'财务部',
children:[
{'id':'c','pid':'b','name':'财务核算部'},
{'id':'d','pid':'b','name':'薪资管理部'}]
]
实现:所以要将平铺的数组结构转成树形结构,我们需要做的就是将lists数组转化成treeList数组,这里封装一个函数,代码如下:
// 将平铺数组转化为树形结构
export function arrayToTree(list) {
let map = {}
let treeList = []
// 创建一个map结构
list.forEach(item => {
item.children = [] // 给list中的每一项添加children数组
map[item.id] = item
})
// 对list中的每一项找上级obj,
// 有则把该项添加到上级obj的children;
// 没有就是一级,直接添加到treeList中
list.forEach(item => {
const pid = item.pid
const obj = map[pid]
if (obj) {
obj.children.push(item)
} else {
treeList.push(item)
}
})
return treeList
}
处理后效果如下 :
![](https://i-blog.csdnimg.cn/blog_migrate/2a43b2cca0195d96a0394914cb5df8ef.png)
![](https://i-blog.csdnimg.cn/blog_migrate/87ca969f1d58bc7f5711e5de683a4c83.png)