生成树形结构

• 在项目中假如后端返回来的有层级的数据没有处理过，需要前端来生成为树形结构的数据

定义数据格式

const result = [
  {id:'1',name:'kkdaly',pid:'-1'},
  {id:'2',name:'kkdaly',pid:'1'},
  {id:'3',name:'kkdaly',pid:'1'},
  {id:'4',name:'kkdaly',pid:'2'},
  {id:'5',name:'kkdaly',pid:'2'},
  {id:'6',name:'kkdaly',pid:'-1'}
]

双循环方法

// 双循环方法
function getTreeResult1(result){
  // 定义一个对象用来存储父组件
  const allObj = {}

  const newArr = []
  // 循环数组生成 {id:对象} 类型数据

  result.forEach(item =>{
    item.children = []
    allObj[item.id] = item
  
  })

  // 循环result数组，判断数据的pid是否在allObj里，如果在的话就说明这个数据就是allObj数据里其中一个对象的children对象

  result.forEach(item =>{
    if (allObj[item.pid]){
      allObj[item.pid].children.push(item)
    }else{
      newArr.push(item)
    }
  })
  return newArr

}

const data = getTreeResult1(result); // 调用函数

函数递归方法

// 递归方式写法
function  getTreeResult(value,pid){
  // 方法是判断数据列表中的一个数据,判断当前获取的数据是否和参数传入的pid相同，如果相同就说明是根数据，或者是一个父数据的子数据
  const newArr = []
  // 循环数据
  for (var i=0; i<value.length; i++){
    // 获取单个数据
      const node = value[i]
      // 判断它的pid是否和函数传递的数据相同
      if (node.pid == pid){
        // 如果想同就重新调用自己，重新判断当前这个数据的子数据
        node.children = getTreeResult(value,node.id)
        // 将数据push到新的数组内
        newArr.push(node)
      }
      
  }
  // 返回新的数组
  return newArr
}

const data1 = getTreeResult(result,'-1') // 调用函数