标签：用非 name 递归 2c pid id item 转树 children

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

数组:

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: []}
//   ]},
// ]

完成转换

标签：用非,name,递归,2c,pid,id,item,转树,children
来源： https://blog.csdn.net/mmmawo/article/details/120853240

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。