讲数组的列表结构转成树结构

[wuxianqiang]

比如我们常用的菜单列表

const data = [
  { id: 56, parentId: 62 },
  { id: 81, parentId: 80 },
  { id: 74, parentId: null },
  { id: 76, parentId: 80 },
  { id: 63, parentId: 62 },
  { id: 80, parentId: 86 },
  { id: 87, parentId: 86 },
  { id: 62, parentId: 74 },
  { id: 86, parentId: 74 },
];

转换成

{
  id: 74,
  parentId: null,
  children: [
    {
      id: 62,
      parentId: 74,
      children: [{ id: 56, parentId: 62 }, { id: 63, parentId: 62 }],
    },
    {
      id: 86,
      parentId: 74,
      children: [
        {
          id: 80,
          parentId: 86,
          children: [{ id: 81, parentId: 80 }, { id: 76, parentId: 80 }],
        },
        { id: 87, parentId: 86 },
      ],
    },
  ],
};

首先保存对应关系，方便我们通过儿子可以快速找到父亲

const idMapping = data.reduce((acc, el, i) => {
  acc[el.id] = i;
  return acc;
}, {});

通过对象是引用类型的机制我们可以这样创建树结构

let root;
data.forEach(el => {
  // 根节点
  if (el.parentId === null) {
    root = el;
    return;
  }
  // 父节点
  const parentEl = data[idMapping[el.parentId]];
  // 子节点
  parentEl.children = [...(parentEl.children || []), el];
});