打平的数组一层循环转换成tree树形结构

2022-01-18 18:20
1127
0
1

主要思路也是先把数据转成Map去存储,之后遍历的同时借助对象的引用,直接从Map找对应的数据做存储。不同点在遍历的时候即做Map存储,有找对应关系。性能会更好。

现有数组:

const arr = [
  { id: 1, name: '部门1', pid: 0 },
  { id: 2, name: '部门2', pid: 1 },
  { id: 3, name: '部门3', pid: 1 },
  { id: 4, name: '部门4', pid: 3 },
  { id: 5, name: '部门5', pid: 4 },
]

实现根据pid对应id的关系变成多维数组

实现代码:

let item = {}
let result = []

for (let i = 0; i < arr.length; i++) {
  const id = arr[i].id
  const pid = arr[i].pid
  const el = item[id];
  if (!el) {
    item[id] = {
      children: [],
    }
  }
  item[id] = {
    ...arr[i],
    children: item[id]['children']
  }
  if (pid) {
    if (!item[pid]) {
      item[pid] = {
        children: [],
      }
    }
    item[pid].children.push(item[id])
  } else {
    result.push(item[id])
  }
}
console.log(result)

从上面的代码我们分析,一次循环就搞定了,该实现的时间复杂度为O(n),需要一个Map把数据存储起来,空间复杂度O(n)

支付宝微信
1
关注公众号获取更多内容
vue3+ts开发一个无缝轮播图插件
结合lazyload实现文章页里面的图片预加载
暂无评论,快抢沙发吧
不支持canvas
春季
夏季
秋季
冬季
暗黑
简约
小清新