树形结构转换(平铺的数组结构转成树形结构)

350 阅读1分钟

非递归的方法

<script>

/**
* 把平铺的数组结构转成树形结构
*/
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研发部'}
]

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

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


//  {
//    "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 => {
   // 对于每一个元素来说,先找它的上级
   //    如果能找到,说明它有上级,则要把它添加到上级的children中去
   //    如果找不到,说明它没有上级,直接添加到 treeList
   const parent = map[item.pid]
   // 如果存在则表示item不是最顶层的数据
   if (parent) {
     parent.children.push(item)
   } else {
     // 如果不存在 则是顶层数据
     treeList.push(item)
   }
 })
 // 4. 返回出去
 return treeList
}

const treeList = tranListToTreeData(arr)
console.log(treeList);
console.log(arr)
// 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: []}
//   ]},
// ]
</script>

递归的写法

 function toRee (list,pid = '' ){
        return list.filter(it => it.pid === pid).forEach(it => it.children = toRee(list,it.id))
    }