如何将数组数据转化成树形结构（小案例演示）

当我们从后端拿到一个列表型数据，我们需要将其转化为树形结构，该如何做呢？
核心：递归算法

一、实现思路

1、思路

将列表型的数据转化成树形数据 => 递归算法 => 自身调用自身 => 条件一定不能相同， 否则就会死循环

2、注意点

遍历树形 有一个重点 要先找到树根（数据顶端）

3、逻辑图

2、小案例

1、实现效果

2、 原始数据

[
    {
        "id": "604e21feb205b95968e13129",
        "pid": "",
        "name": "总裁办",
        "code": "1001",
        "manager": "管理员",
        "introduce": "公司战略部",
        "createTime": "2021-03-14 22:47:25"
    },
    {
        "id": "604e222bb205b95968e1312a",
        "pid": "",
        "name": "行政部",
        "code": "XZB",
        "manager": "管理员",
        "introduce": "行政部",
        "createTime": "2021-03-14 22:47:25"
    },
    {
        "id": "604e223fb205b95968e1312b",
        "pid": "",
        "name": "人事部",
        "code": "RSB",
        "manager": "管理员",
        "introduce": "人事部",
        "createTime": "2021-03-14 22:47:25"
    },
    {
        "id": "604e2251b205b95968e1312c",
        "pid": "",
        "name": "财务部",
        "code": "CWB",
        "manager": "管理员",
        "introduce": "财务部",
        "createTime": "2021-03-14 22:47:25",
        "children": [
            {
                "id": "604e2262b205b95968e1312d",
                "pid": "604e2251b205b95968e1312c",
                "name": "财务核算部1",
                "code": "CWHSB",
                "manager": "管理员",
                "introduce": "财务核算部",
                "createTime": "2021-03-14 22:47:25"
            },
            {
                "id": "604e227db205b95968e1312e",
                "pid": "604e2251b205b95968e1312c",
                "name": "税务管理部",
                "code": "SWGLN",
                "manager": "管理员",
                "introduce": "税务管理部",
                "createTime": "2021-03-14 22:47:25"
            },
            {
                "id": "604e2297b205b95968e1312f",
                "pid": "604e2251b205b95968e1312c",
                "name": "薪资管理部",
                "code": "XZGLB",
                "manager": "管理员",
                "introduce": "薪资管理部",
                "createTime": "2021-03-14 22:47:25"
            }
        ]
    },
    {
        "id": "6051ad90e93db6522c1d00d2",
        "pid": "",
        "name": "技术部",
        "code": "JSB",
        "manager": "孙财",
        "introduce": "技术部",
        "createTime": "2021-03-17 15:18:23",
        "children": [
            {
                "id": "6051adb6e93db6522c1d00d3",
                "pid": "6051ad90e93db6522c1d00d2",
                "name": "Java研发部",
                "code": "JYFB",
                "manager": "管理员",
                "introduce": "JAVA研发部",
                "createTime": "2021-03-17 15:18:23"
            },
            {
                "id": "6051add6e93db6522c1d00d4",
                "pid": "6051ad90e93db6522c1d00d2",
                "name": "Python研发部",
                "code": "PYFB",
                "manager": "罗晓晓",
                "introduce": "Python研发部",
                "createTime": "2021-03-17 15:18:23"
            },
            {
                "id": "6051adefe93db6522c1d00d5",
                "pid": "6051ad90e93db6522c1d00d2",
                "name": "Php研发部",
                "code": "PhpYFB",
                "manager": "孙财",
                "introduce": "Php研发部",
                "createTime": "2021-03-17 15:18:23"
            }
        ]
    },
    {
        "id": "6051ae03e93db6522c1d00d6",
        "pid": "",
        "name": "运营部",
        "code": "YYB",
        "manager": "孙财",
        "introduce": "运营部",
        "createTime": "2021-03-17 15:18:23"
    },
    {
        "id": "6051ae15e93db6522c1d00d7",
        "pid": "",
        "name": "市场部",
        "code": "SCB",
        "manager": "孙财",
        "introduce": "市场部",
        "createTime": "2021-03-17 15:18:23",
        "children": [
            {
                "id": "6051ae28e93db6522c1d00d8",
                "pid": "6051ae15e93db6522c1d00d7",
                "name": "北京事业部",
                "code": "BJSYB",
                "manager": "孙财",
                "introduce": "BJSYB",
                "createTime": "2021-03-17 15:18:23"
            },
            {
                "id": "6051ae3de93db6522c1d00d9",
                "pid": "6051ae15e93db6522c1d00d7",
                "name": "上海事业部",
                "code": "SHSYB",
                "manager": "文吉星",
                "introduce": "上海事业部",
                "createTime": "2021-03-17 15:18:23"
            }
        ]
    }
]

3、实现思路

通过实现效果，发现总共有两层数据
通过分析数据结构，发现第一层数据的pid是第二层数据的id，因此可以通过pid确定层级关系

4、封装递归方法

参数：
list：原始数据
rootValue：根值

function tranListToTreeData(list, rootValue) {
  var arr = []
  list.forEach(item => {
    if (item.pid === rootValue) {
      // 找到之后 就要去找 item 下面有没有子节点
      const children = tranListToTreeData(list, item.id)
      if (children.length) {
        // 如果children的长度大于0 说明找到了子节点
        item.children = children
      }
      arr.push(item) // 将内容加入到数组中
    }
  })
  return arr
}