在Vue2.0中封装一个数组结构转成树状结构的函数

有时后端传来的数据不一定是我们需要的数据，所以我们就需要自己把普通数组结构的数据转成树状结构的数据。

// 数组结构时的样子
let arr = [
 { id:"01",pid:"",name:"老王" },
   { id:"02",pid:"01",name:"小张" },
    { id:"03",pid:"02",name:"小小张" },
 { id:"04",pid:"",name:"老陈" },
]

// 希望实现为树状结构的样子
// let arr = [
// { id:"01",pid:"",name:"老王",children:[
  // { id:"02",pid:"01",name:"小张",children:[
   // { id:"03",pid:"02",name:"小小张" }]},
// ]},
// { id:"04",pid:"",name:"老陈" },
// ]

// 导出这个封装的函数
export function tranListToTreeData(arr) {
// 创建一个新数组
const newArr = []
// 1.构建一个字典，它的作用是：快速根据id找到当前对象。
// 我希望map的结构是这样的  { '01':{ id:"01",pid:"",name:"老王" },'02':{ id:"02",pid:"01",name:"小张"} }
const map = {} 
arr.forEach( item=>{
// 为了计算方便，给每一项都统一添加children
item.children = []
const key = item.id
map[key]=item
// 经过上面的操作后，map的结构应该是这样：
// { '01':{ id:"01",pid:"",name:"老王",children:[] },'02':{ id:"02",pid:"01",name:"小张",children:[] } }
} )

// 2.开始分析arr
arr.forEach( item => {
// 难点：map[item.pid] 可以找到它的父级
const parent = map[item.pid]
if (parent) {
// 如果它有父级，就把当前对象添加到父级元素的children中去。
parent.children.push(item)
} else {
// 如果它没有父级(pid:''),就直接把它添加到 newArr
newArr.push(item)
}
})
// 3.返回出去
return newArr
}