把平铺的数组结构转成树形结构

数组:

const arr = [
  { 'id': '29', 'pid': '',     'name': '总裁办' },
  { 'id': '2c', 'pid': '',     'name': '财务部' },
  { 'id': '2d', 'pid': '2c', 'name': '财务核算部'},
  { 'id': '2f', 'pid': '2c', 'name': '薪资管理部'},
  { 'id': 'd2', 'pid': '',     'name': '技术部'},
  { 'id': 'd3', 'pid': 'd2', 'name': 'Java研发部'}
]

1. 定义两个中间变量

 // 1. 定义两个中间变量
 const treeList = [],  // 最终要产出的树状数据的数组
       map = {}        // 存储映射关系

2. 每个元素补充children属性.

 // 映射关系: 目的是让我们能通过id快速找到对应的元素
 // 补充children：让后边的计算更方便
 list.forEach(item=>{
  if(!item.children){
    item.children=[]
  }
  map[item.id]=item
 })

可以得到 map

//  {
//    "29": { 'id': '29', 'pid': '',     'name': '总裁办', children:[] },
//    '2c': { 'id': '2c', 'pid': '',     'name': '财务部', children:[] },
//    '2d': { 'id': '2d', 'pid': '2c', 'name': '财务核算部', children:[]},
//    '2f': { 'id': '2f', 'pid': '2c', 'name': '薪资管理部', children:[]},
//    'd2': { 'id': 'd2', 'pid': '',     'name': '技术部', children:[]},
//    'd3': { 'id': 'd3', 'pid': 'd2', 'name': 'Java研发部', children:[]}
//  }

3.循环

 list.forEach(item => {
   const parent = map[item.pid]
   if(parent){
    parent.children.push(item)
   }else{
    treeList.push(item)
   }
   // 对于每一个元素来说，先找它的上级
   //    如果能找到，说明它有上级，则要把它添加到上级的children中去
   //    如果找不到，说明它没有上级，直接添加到 treeList

 })

4.return 新数组

return treeList

这时map数组得到的数据是

// const arr1 = [
//   { 'id': '29', 'pid': '',     'name': '总裁办',children: [] },
//   { 'id': '2c', 'pid': '',     'name': '财务部', children:[
//     { 'id': '2d', 'pid': '2c', 'name': '财务核算部',children: []},
//     { 'id': '2f', 'pid': '2c', 'name': '薪资管理部',children: []},
//   ] },
//   { 'id': 'd2', 'pid': '',     'name': '技术部', children: [

//     { 'id': 'd3', 'pid': 'd2', 'name': 'Java研发部',children: []}
//   ]},
// ]

完成转换