前景

开发过程中，渲染数据时会发现后端返回来的数据并不是一个嵌套的树状结构，而是一个平铺的数组结构，它不能直接使用。

效果图如下

数据


 {'id': '01', 'pid': '',    'name': '总裁办' },
 { 'id': '02', 'pid': '',   'name': '财务部' },
 { 'id': '03', 'pid': '02', 'name': '财务核算部'},
 { 'id': '04', 'pid': '02', 'name': '薪资管理部'},
 { 'id': '05', 'pid': '',    'name': '技术部'},
 { 'id': '06', 'pid': '05', 'name': 'Java研发部'}
 { 'id': '07', 'pid': '05', 'name': 'Python研发部'}
 { 'id': '08', 'pid': '', 'name': '人事部'}

回顾递归算法

递归理解：函数内部自己调用自己；首先在写递归算法之前，需先弄清楚规律，写出递归公式；再找到递归终止条件；

树形结构思路分析

结合上述数据可判断出pid是决定部门的关键，若为空表示是一级部门，若pid值与id值相同，则表示是其子级部门；

递归方法


function toDo(arr, pid = '') {

//1.先定义一个空数组
  const newArr = []
  
  // 2.循环传递的数据
  arr.forEach(item => {
  
  // 3.数组对象中的pid值是否相同，如果表示为空。则只有第一层部门数据，将数据添加到定义的newArr空数组
    if (item.pid === pid) {
    
 // 判断第二层，调用toDo()，将id传递进去判断是否与pid值相等，如果相等则有第二层，向第一层的数据里面添加子部门
      const child = toDo(arr, item.id)
      
      if (child.length) {
        item.children = child
      }
      //4.集第一层部门数据
      newArr.push(item)
    }
  })
  return newArr
}

array-to-tree方法

步骤一：需先下包 npm install array-to-tree --save

步骤二：导入自己所需要使用的文件中

步骤三：引入结合自己数据更改parentProperty和customID值

import arrayToTree from 'array-to-tree'

 function toDo2(arr) {
  arrayToTree(arr, {
    parentProperty: 'pid',//结合上述数据此处值便是判断是否有子部门的值
    customID: 'id'
  })
}

引申---递归求1-100数组的和

找出算法规律

sum(n) = sum(n-1) + n
···
···
···
sum(5) = sum(4) + 5
sum(4) = sum(3) + 4
sum(3) = sum(2) + 3
sum(2) = sum(1) + 2
sum(1) = 1


再结合上述推算转化成递归代码

function  sum(n){
if(n==1) return 1

return sum (n-1) +n

}

利用递归算法和array-to-tree方法将数据转换为树形结构

前景