HelloWorld

Designed & Developed By XingYu Xiao In China
头像 原创自 x先生 #JavaScript 627

JavaScript转List为Tree

2022-03-10 17:15:16

直接上代码

function toTree(data) {
   const dataMap = {};
   data.forEach(item => {
      dataMap[item.id] = item;
   });
   const result = [];
   data.forEach(item => {
      let parent = dataMap[item.pid];
      parent?(parent.children || (parent.children = [])).push(item):result.push(item);
   });
   return result;
}

测试数据

[
   {id: 1, pid: 0, label: 'aaaaa'},
   {id: 2, pid: 1, label: 'bbbbb'},
   {id: 3, pid: 1, label: 'ccccc'},
   {id: 4, pid: 0, label: 'ddddd'},
   {id: 5, pid: 4, label: 'eeeee'},
   {id: 6, pid: 1, label: 'fffff'},
   {id: 7, pid: 0, label: 'ggggg'},
   {id: 8, pid: 6, label: 'hhhhh'}
]

输出结果

[{
      "id": 1,
      "pid": 0,
      "label": "aaaaa",
      "children": [{
         "id": 2,
         "pid": 1,
         "label": "bbbbb"
      }, {
         "id": 3,
         "pid": 1,
         "label": "ccccc"
      }, {
         "id": 6,
         "pid": 1,
         "label": "fffff",
         "children": [{
            "id": 8,
            "pid": 6,
            "label": "hhhhh"
         }]
      }]
   }, {
      "id": 4,
      "pid": 0,
      "label": "ddddd",
      "children": [{
         "id": 5,
         "pid": 4,
         "label": "eeeee"
      }]
   },
   {
      "id": 7,
      "pid": 0,
      "label": "ggggg"
   }
]

此方法主要使用到了JS对象引用类型,应该是你想要的吧~

赞 1

收藏

分享

本作品系 原创,作者:x先生

原文链接:https://www.shiniest.cn/blog/article/151

文本版权:本文版权归作者所有

转载请署名并注明出处 (禁止商业使用)


0条评论


0/200
    加载更多 正在加载 没有更多了...... 暂无数据

    相关文章

    目录
      来自x先生的话
      本文主要介绍一种将数据库查询出来的对象数组,转化为树形对象数组的方法。比如 菜单 。
      实时天气

      岳麓 更新时间:01:11

      8℃

      • 7℃

        体感温度

      • 东北风1级

        风向

      • 90%

        相对湿度

      • 0.0mm

        降水量

      • 1021hPa

        大气压强

      • 5km

        能见度

      数据来源:QWeather
      热门标签
      本功能暂未开发