数组转树递归实现

数组数据

const currentArray = [
  {id:"01", name: "张大大", pid:"", job: "项目经理"},
  {id:"02", name: "小亮", pid:"01", job: "产品leader"},
  {id:"03", name: "小美", pid:"01", job: "UIleader"},
  {id:"04", name: "老马", pid:"01", job: "技术leader"},
  {id:"05", name: "老王", pid:"01", job: "测试leader"},
  {id:"06", name: "老李", pid:"01", job: "运维leader"},
  {id:"07", name: "小丽", pid:"02", job: "产品经理"},
  {id:"08", name: "大光", pid:"02", job: "产品经理"},
  {id:"09", name: "小高", pid:"03", job: "UI设计师"},
  {id:"10", name: "小刘", pid:"04", job: "前端工程师"},
  {id:"11", name: "小华", pid:"04", job: "后端工程师"},
  {id:"12", name: "小李", pid:"04", job: "后端工程师"},
  {id:"13", name: "小赵", pid:"05", job: "测试工程师"},
  {id:"14", name: "小强", pid:"05", job: "测试工程师"},
  {id:"15", name: "小涛", pid:"06", job: "运维工程师"}
];
复制代码

arrToTree方法

function arrToTree(list, pid){ 
  let flag = list.filter(item => item.pid === pid); // 1
  return  flag.length === 0 ? [] : flag.map(i => { // 2
    let obj = {label: i.name, children: arrToTree(list, i.id)}; 
    return obj.children.length === 0 ? { label: obj.label } : obj // 3
  })
}
arrToTree(currentArray, '');
复制代码

输出

简单明了，arrToTree函数传入一个数组和pid就会得到树形结构，在本例中，形参pid是其父节点的id

第一步：在数组中筛选pid属性等于形参pid的子节点数组，定义为flag

第二步：判断flag的元素个数，元素为0就没有子节点，则返回一个空数组，如果有子节点的话，进行map处理，flag数组中的每一项都会递归调用arrTotree函数，得到它的子节点

第三步：判断当前的节点是否有子节点，即children属性的长度，有子节点的话不对obj进行处理，没有的话会把children属性删除

链接：juejin.cn/post/695248… 来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

数组转树的实现

数组转树 递归实现

数组转树递归实现