JavaScript平铺数据转换为树状

const arr = [
      { id: "1175310929766055936", pid: "", name: "总裁办" },
      { id: "1175311213774962688", pid: "", name: "行政部" },
      { id: "1175311267684352000", pid: "", name: "人事部" },
      { id: "1175311325720936448", pid: "", name: "财务部" },
      { id: "1175311373083017216", pid: "", name: "技术部" },
      { id: "1175311418004013056", pid: "", name: "运营部" },
      { id: "1175311466846683136", pid: "", name: "市场部" },
      { id: "1235395178363559936", pid: "1175311325720936448", name: "财务核算部" },
      { id: "1235398264104624128", pid: "1175311325720936448", name: "税务管理部" },
      { id: "1235398536969265152", pid: "1175311325720936448", name: "薪资管理部" },
      { id: "1235398608847052800", pid: "1175311373083017216", name: "Java研发部" },
      { id: "1235398661355544576", pid: "1175311373083017216", name: "Python研发部" },
    ]

 双循环写法,虽然代码多一些,但是更好理解一些

  // 双循环写法

    function three (arr) {
      const newArr = []
      const obj = {}

      arr.forEach(item => {

        obj[item.id] = item
        obj[item.id].children = []

      })

      arr.forEach(item => {
        if (obj[item.pid]) {
          obj[item.pid].children.push(item)
        } else {
          newArr.push(item)
        }

      })

      return newArr

    }



    // three(arr)
    console.log(three(arr));

 打印结果

 

使用递归写法

    // 递归函数写法---生成树状数据
    function fn (arr, pid = '') {
      const newArr = []

      arr.forEach(item => {

        if (item.pid === pid) {
          item.children = fn(arr, item.id)
          newArr.push(item)
        }

      });

      return newArr
    }

    console.log(fn(arr));

打印结果

 

vue中也有插件可以实现

下载

npm i -S array-to-tree

引入

import arrayToTree from "array-to-tree";

使用

const result = arrayToTree(arr , {
      parentProperty: "pid",
      customID: "id",
    })

也可以实现

明日画图分析递归