数组转树

  1. // 元数据
  2. const currentArray = [
  3.   {id:"01", name: "张大大", pid:"", job: "项目经理"},
  4.   {id:"02", name: "小亮", pid:"01", job: "产品leader"},
  5.   {id:"03", name: "小美", pid:"01", job: "UIleader"},
  6.   {id:"04", name: "老马", pid:"01", job: "技术leader"},
  7.   {id:"05", name: "老王", pid:"01", job: "测试leader"},
  8.   {id:"06", name: "老李", pid:"01", job: "运维leader"},
  9.   {id:"07", name: "小丽", pid:"02", job: "产品经理"},
  10.   {id:"08", name: "大光", pid:"02", job: "产品经理"},
  11.   {id:"09", name: "小高", pid:"03", job: "UI设计师"},
  12.   {id:"10", name: "小刘", pid:"04", job: "前端工程师"},
  13.   {id:"11", name: "小华", pid:"04", job: "后端工程师"},
  14.   {id:"12", name: "小李", pid:"04", job: "后端工程师"},
  15.   {id:"13", name: "小赵", pid:"05", job: "测试工程师"},
  16.   {id:"14", name: "小强", pid:"05", job: "测试工程师"},
  17.   {id:"15", name: "小涛", pid:"06", job: "运维工程师"}
  18. ];

方法一：递归

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

方法二：非递归（只适用于js）

  1. // 巧妙的应用了对象保存的是引用的特点
  2. // 代码少，性能不如下面
  3. function arrToTree(data) {
  4.   const result = []
  5.   data.forEach(item =>{
  6.     const parent = data.find(i => i.id === item.pid)
  7.     if (parent) {
  8.         parent['children'] = [...(parent['children'] ?? []), item]
  9.     } else {
  10.       result.push(item);
  11.     }
  12.   });
  13.   return result;
  14. }
  17. // 性能提升版
  18. function arrToTree(data) {
  19.   const result = []
  20.   const map = {}
  21.   data.forEach(item => map[item.id] = item)
  22.   data.forEach(item =>{
  23.       const parent = map[item.pid]
  24.     if (parent) {
  25.         parent['children'] = [...(parent['children'] ?? []), item]
  26.     } else {
  27.       result.push(item);
  28.     }
  29.   });
  30.   return result;
  31. }

树转数组

  1. let JsonTree = [
  2. {id: 1, title: '解忧杂货铺1', pid: 0},
  3.   {
  4.     id: 2, title: '解忧杂货铺2', pid: 0, children: [
  5.       {id: 6, title: '解忧杂货铺4-2', pid: 2},
  6.       {
  7.         id: 3, title: '解忧杂货铺2-1', pid: 2, children: [
  8.           {
  9.             id: 4, title: '解忧杂货铺3-1', pid: 3, children: [
  10.               {id: 5, title: '解忧杂货铺4-1', pid: 4},
  11.             ]
  12.           },
  13.         ]
  14.       },
  15.     ]
  16.   }
  17. ];

方法一： 递归

  1. function flatten(data) {
  2.   return data.reduce((arr, {id, title, pid, children = []}) =>
  3.     arr.concat([{id, title, pid}], flatten(children)), []);
  4. }
  5. let flatArr = flatten(JsonTree);

树过滤

  1. export interface DepartmentChildren extends API.department {
  2.   title: string
  3.   value: string
  4.   children?: DepartmentChildren[]
  5. }
  7. export const treeFilter  = (tree: DepartmentChildren[], func: Function): DepartmentChildren[]  => {
  8.   // 使用map复制一下节点，避免修改到原树
  9.   return tree.map(node => ({ ...node })).filter(node => {
  10.     node.children = node.children && treeFilter(node.children, func)
  11.     return func(node) || (node.children && node.children.length)
  12.   })
  13. }