前端 扁平化数据结构转tree数据结构 学习

前端 扁平化数据结构转tree数据结构 学习

别的不说直接上方法

let arr: any = [
    { 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 },
  ];

当前有一个这样的一个数组，需求是把数组从扁平化数据结构转变为tree数据结构，id是唯一标识，pid查找上级。

const getArr = (arr: []) => {
  let data: any = {};
  let res: any = [];
  // 首先通过遍历让data获取到所有的arr中的所有数据
  arr.forEach((item: any) => {
    data[item.id] = item;
  });
  arr.forEach((item: any) => {
    // 用pid来判断是否有上级  0表示没有
    if (data[item.pid]) {
      if (!data[item.pid].children) {
        data[item.pid].children = [];
      }
      data[item.pid].children.push(item);
    } else {
      res.push(item);
    }
  });
  return res;
};

使用方法，亲测有效

getArr(arr)

各位朋友在使用中请注意

1. 我这里的案例使用的vue3和ts，请根据自己的项目进行适当修改。
2. getArr方法中请修改自己的扁平化数据中的唯一表示id，和pid。
3. 这个方法理论上应该可以适配所有方法，如果有更好的方法也请教教我。
4. 本人能力有限，如果有哪里错误，请君不要在意，一笑而过。
5. 这个方法也是我从别的地方学习过来的，知识需要传递。