将js对象转化为树形结构

原创已于 2022-03-26 00:42:23 修改 · 1.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-03-26 00:41:59 首次发布

js 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一种将扁平化的数组转换成树状结构的方法。通过创建映射表存储每个元素，并利用递归的方式找到每个元素的父节点，最终形成具有父子关系的数据结构。

流程：

建立新数组result
判断是否为数组，不是直接返回
建立标记对象，遍历数组，把id作为属性名，当前对象为值保存起来
遍历数组，获得父节点map[item.pid]
如果父节点存在，往父节点的children属性中push当前item
如果没有父节点，直接把当前item加入result

source = [{
    id: 1,
    pid: 0,
    name: 'body'
  }, {
    id: 2,
    pid: 1,
    name: 'title'
  }, {
    id: 3,
    pid: 2,
    name: 'div'
  }]

  function dd(data){
      if(!Array.isArray(data)){
        return data
      }
      let result=[]
      let map={}
      data.forEach(item=>{
          map[item.id]=item
      })
      data.forEach(item=>{
          let p=map[item.pid]
          if(p){
            (p.children||(p.children=[])).push(item)
          }else{
              result.push(item)
          }
      })
      return result
  }
  console.log(dd(source))