js扁平数据结构转Tree

js扁平数据结构转Tree

无意间看到的一道题，实际业务有这种场景，就打开看了看，不过我们这种数据都是中台在处理，然后返回给前台的。

let 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 },
    ];

处理成这种树型结构：

在vue里面测的，懒得变js了，凑合凑合：

// 方式一：递归 
   arrayToTree(data, pid) {
      const result = [];
      this.getChildren(data, result, pid);
      return result;
    },
   getChildren(data, result, pid) {
      data.forEach((item, index) => {
        if (item.pid === pid) {
          const newItem = { ...item, children: [] };
          result.push(newItem);
          // ++index 不考虑id，单纯的分层
          this.getChildren(data, newItem.children, ++index);
          // item.id 需要pid和id是有关联关系的
          //this.getChildren(data, newItem.children, item.id);
        }
      });
    },
    // 方法二：filter 前提是pid和id是有关联关系的。
    arrayToTree3(arr) {
      return arr.map((item) => {
        item.children = arr.filter((val) => val.pid === item.id);
        return item;
      })[0];
    },