美文网首页
将平铺数组转化成 树状数组结构

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

作者: 秘果_li | 来源:发表于2022-06-15 11:49 被阅读0次

    数组中的 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;
    };
    

    相关文章

      网友评论

          本文标题:将平铺数组转化成 树状数组结构

          本文链接:https://www.haomeiwen.com/subject/eyqxvrtx.html