将平铺数组转化成 树状数组结构

2022-06-15  本文已影响0人  秘果_li

数组中的 id 作为数据结点唯一标识,pid 表示对应的父节点 id,顶层结点 pid 为0

const data = [
  {
    id: 2,
    pid: 0,
    name: '父级菜单1',
  },
  {
    id: 3,
    pid: 0,
    name: '父级菜单2',
  },
  {
    id: 1,
    pid: 0,
    name: '父级菜单3',
  },
  {
    id: 4,
    pid: 3,
    name: '2的子菜单1',
  },
  {
    id: 11,
    pid: 3,
    name: '2的子菜单2',
  },
  {
    id: 20,
    pid: 3,
    name: '2的子菜单3',
  },
  {
    id: 26,
    pid: 2,
    name: '1的子菜单1',
  },
  {
    id: 50,
    pid: 20,
    name: '子菜单3的子菜单1',
  },
];

使用 map 数据结构对应,遍历一次 data 数组 O(n) 时间复杂度完成树状结构转换

const toTree = data => {
  let result = [];
  if (!Array.isArray(data)) {
    return result;
  }
  // 清除已存在的children 重新赋值
  data.forEach(item => {
    delete item.children;
  });

  let map = {};
  data.forEach(item => {
    map[item.id] = item;
  });

  data.forEach(item => {
    let parent = map[item.pid];
    if (parent) {
      (parent.children || (parent.children = [])).push(item);
    } else {
      result.push(item);
    }
  });
  return result;
};
上一篇下一篇

猜你喜欢

热点阅读