js实现扁平数据结构转Tree结构

679 阅读1分钟

打平的数据内容如下:

  {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: 2},
  {id: 6, name: '部门6', pid: 3},
  {id: 7, name: '部门7', pid: 0},
]

pid 当前项父级

输出结果

  {
    "id": 1,
    "name": "部门1",
    "pid": 0,
    "children": [
      {
        "id": 2,
        "name": "部门2",
        "pid": 1,
        "children": [
          {
            "id": 5,
            "name": "部门5",
            "pid": 2,
            "children": []
          }
        ]
      },
      {
        "id": 3,
        "name": "部门3",
        "pid": 1,
        "children": [
          {
            "id": 4,
            "name": "部门4",
            "pid": 3,
            "children": []
          },
          {
            "id": 6,
            "name": "部门6",
            "pid": 3,
            "children": []
          }
        ]
      }
    ]
  },
  {
    "id": 7,
    "name": "部门7",
    "pid": 0,
    "children": []
  }
]
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: 2},
  {id: 6, name: '部门6', pid: 3},
  {id: 7, name: '部门7', pid: 0},
]

function tree(arr, pid = 0) {
  const o = {};
  arr.forEach(item => {
    const pItem = o[item.pid] || (o[item.pid] = { children: [] });

    o[item.id] = {
      ...item,
      children: o[item.id]?.children || [],
    };
    pItem.children.push(o[item.id]);
  })

  return (pid != null && o[pid]?.children) || null
}

const t = tree(arr);
console.log(JSON.stringify(t, null, 2));

源题目: juejin.cn/post/698390…