js数组和树互转

1. 数组转树

const data = 
[
  {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: "运维工程师"}
]

1.1 基本操作

toTree(data)

function toTree(arr) {
  arr.forEach(obj => {
    arr.forEach(ele => {
      if (ele.id === obj.pid) {
        if (!ele.children) {
          ele.children = [];
        }
        ele.children.push(obj);
      }
    });
  })
  return arr.filter(item => !item.pid)
}

1.2 利用递归

toTree(data, '')

function toTree(data, pid) {
  let res = [];
  data.forEach(item => {
    if (item.pid === pid) {
      let team = toTree(data, item.id);
      if (team.length) {
        item.children = team;
      }
      res.push(item);
    }
  });
  return res;
}

2. 树转数组

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

2.1 利用reduce

toArray(arr) 

function toArray(arr) {
return arr.reduce((prev, item) => {
  if (Array.isArray(item.children)) {
    prev.push(item)
    return prev.concat(toArray(item.children))
  } else {
    return prev.concat(item)
  }
}, []);
}

2.2 利用递归

const newArr = []

toArray(arr)

function toArray(arr) {
  arr.forEach(item => {
    if (item.children && item.children.length) {
      newArr.push(item)
      toArray(item.children)
    } else {
      newArr.push(item)
    }
  })
}
console.log(newArr);