扁平数组转树状结构

最新推荐文章于 2024-09-29 11:29:55 发布

笑笑同学啊＿

最新推荐文章于 2024-09-29 11:29:55 发布

阅读量172

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_49314618/article/details/123951448

版权

扁平数组

let list = 
[
  {id:0,name:'xxx',pid:null},
  {id:1,name:'xxx',pid:0},
  {id:2,name:'xxx',pid:0},
  {id:3,name:'xxx',pid:2},
]

树状结构

let tree = 
[
  {
    id:0,
    name:'xxx',
    children:{
      id:1,name:'xxx',children:{},
      id:2,name:'xxx',children:{
        id:3,name:'xxx',children:{}
      }
    }
  }
]

思路：

map
key 为 id
value 为每一项，并为每一项添加 children 属性
这样可以通过 id 精准地定位到某一项
复制引用，而非深拷贝
这样我们在修改 map 时，也修改了结果数组 tree

步骤

第一次 for 循环
1. map 映射当前项的id 和当前项
2. 为每一项添加 children 属性

// map 
{
  0:{id:0,name:'xxx',pid:null,children:[]},
  1:{id:1,name:'xxx',pid:0,children:[]},
  2:{id:2,name:'xxx',pid:0,children:[]},
  3:{id:3,name:'xxx',pid:2,children:[]}
}

第二次 for 循环
1. 根节点放入结果数组tree
2. 一次添加 chilredn 属性的值

function listToTree(list) {
  var map = {}, node, tree= [];
  for (let i = 0; i < list.length; i ++) {
    map[list[i].id] = list[i]; 
    list[i].children = []; 
  }
  for (let i = 0; i < list.length; i += 1) {
    list[i];
    if (list[i].pid !== null) {// 不是根节点
      map[list[i].pid].children.push(list[i]);// 放到父节点的children里
    } else { // 是根节点
      tree.push(list[i]);// 根节点计入结果数组
    }
  }
  return tree;
}