数组转换为树形

目标：将数组转换为element-ui中tree树形组件可以使用的数据

原数据

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: "运维工程师"}
]

转换之后的数据

[{
  label: '张大大',
  children: [
    {
      label: '小亮',
      children: [{label: '小丽'}，{label: '大光'}]
    },
    {
      label: '小美',
      children: [{label: '小高'}]
    },
    {
      label: '老马',
      children: [{label: '小刘'}，{label: '小华'},{label: '小李'}]
    },
    {
      label: '老王',
      children: [{label: '小赵'}，{label: '小强'}]
    },
    {
      label: '老李',
      children: [{label: '小涛'}]
    }
  ]
}]

  代码

<script>
     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: "运维工程师"}
]

// 完成代码
function arrToTree(data) {
    // 1.判断传入的是否为数组  只有为数组才能进行下去
    // 判断是否为数组 如果不是数组直接return一个空数组
    if(!Array.isArray(data)) return []

    //2.遍历数组 并进行浅拷贝  拷贝成key:value的格式
    //进行浅拷贝只拷贝内存地址 所以新数组中的值如果发生了变化 原来的数组也会跟着一起发生变化
    //2.1 定义空数组 来接受新格式的数组
    //2.2此时map新数组中的格式[01:{xxx},02:{xxx}]
    let newArr=[]
    data.forEach(item=>{
        newArr[item.id]=item
    })
    console.log(newArr);
    /*     3.遍历数组  判断是否有pid这一项
    如果是false说明此时当前项已经是根节点了
    如果是true说明此时当前项不是根节点 true就追加一个children数组 再将当前项push到他的父id的数组中
    */
   data.forEach(item=>{
    //判断新数组[旧数组中的每一项的pid]就会找到原数组中他的父节点的那个元素
    // 找到之后判断是不是有children属性 false走后面新增children数组 再将每一项的值push到
       if(newArr[item.pid]){
         (newArr[item.pid].children||(newArr[item.pid].children=[])).push(item)
       }
   })
   return data
}

const treeData = arrToTree(data)
console.log(treeData);
    </script>

总结：

1.判断元素是否为数组 

2.浅拷贝数组  存为key:value的格式

3.根据原数组的id判断新数组是否有根节点

其中难点就在于  你需要判断元素是否有根节点  如果有就找到根节点的那个元素 然后将子节点的元素进行push 如果false说明当前元素已经是根节点了  不需要做任何操作