js 数组格式转树形格式

数组格式转树形格式

初始数据格式如下：

const data = 
[
  {id:"01", name: "张大大", pid:"", job: "项目经理"},
  {id:"02", name: "小亮", pid:"01", job: "产品leader"},
  {id:"03", name: "小美", pid:"01", job: "UIleader"},
  {id:"04", name: "老马", pid:"01", job: "技术leader"},
  {id:"05", name: "老王", pid:"01", job: "测试leader"},
  {id:"06", name: "老李", pid:"01", job: "运维leader"},
  {id:"07", name: "小丽", pid:"02", job: "产品经理"},
  {id:"08", name: "大光", pid:"02", job: "产品经理"},
  {id:"09", name: "小高", pid:"03", job: "UI设计师"},
  {id:"10", name: "小刘", pid:"04", job: "前端工程师"},
  {id:"11", name: "小华", pid:"04", job: "后端工程师"},
  {id:"12", name: "小李", pid:"04", job: "后端工程师"},
  {id:"13", name: "小赵", pid:"05", job: "测试工程师"},
  {id:"14", name: "小强", pid:"05", job: "测试工程师"},
  {id:"15", name: "小涛", pid:"06", job: "运维工程师"}
]

第一种方式

 data.forEach(item=>{
    let parentId=item.pid
    if(parentId!==''){ //每项有pid
      data.forEach(ele=>{ //当内层循环的ID===外层循环的parentId时，(说明有children),需要往该内层id里建个children并push对应的数组
        if(ele.id===parentId){
          if(!ele.children){ //没有children
            ele.children=[]
          }
          ele.children.push(item)
        }
      })
    }
  })

  console.log(data) //此时的数组是在原基础上补充了children
  const treeData=data.filter(item=>item.pid==='') //这一步是过滤，树形结构，将多余的过滤
  console.log(treeData)

第二种方式

 function tranListToTree(arr){
  //最终要产出的树状数据的数组
  const treeList=[]
  //所有项使用对象存储起来
  const map={}
  //建立一个映射关系，通过id快速找到对应的元素
  arr.forEach(item=>{
    if(!item.children){//如果每个对象里面没有children,就加上
      item.children=[]
    }
    //把每项放到新的对象map里面
    map[item.id]=item
  })
  // return map
  arr.forEach(item=>{
    /*
    对于每一个元素来说，先找它的上级
    如果能找到，说明它有上级，则要把它添加到上级的children 中去
    如果找不到，说明它没有上级，直接添加到treeList
     */
    const parent=map[item.pid]
    if(parent){ //如果存在则表示item不是最顶层的数据
      parent.children.push(item)
    }else{ //如果不存在，则是顶层数据
      treeList.push(item)
    }
  })
  return treeList
}
console.log(tranListToTree(data))  

输出格式

这两种方式，都是直接先加children,第一种是加children的同时也放数据，最后过滤一下。第二种是先加children再加数据。

递归方式实现

<script>
    //作用:找到pid为指定的rootId的所有元素,并返回
  function findChildren(list, rootId = '') {
  const children = []
  // 对于list,每个元素.如果他的pid===rootId,他就是当前的children

  list.forEach(item => {
    if (item.pid === rootId) {
      children.push(item)
      item.children=findChildren(list,item.id)
    }
  })
  return children
}
const list = [
  { id: '01', pid: '', 'name': '老王' },
  { id: '02', pid: '01', 'name': '小张' },
//   { id: '03', pid: '02', 'name': '小红' }
]
const children = findChildren(list, '')
console.log(children)
</script>