数组结构
扁平数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
[
  {
    "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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
[
  {
    "id": "01",
    "name": "张大大",
    "pid": "",
    "job": "项目经理",
    "children": [
      {
        "id": "02",
        "name": "小亮",
        "pid": "01",
        "job": "产品leader",
        "children": [
          {
            "id": "07",
            "name": "小丽",
            "pid": "02",
            "job": "产品经理",
            "children": []
          },
          {
            "id": "08",
            "name": "大光",
            "pid": "02",
            "job": "产品经理",
            "children": []
          }
        ]
      },
      {
        "id": "03",
        "name": "小美",
        "pid": "01",
        "job": "UIleader",
        "children": [
          {
            "id": "09",
            "name": "小高",
            "pid": "03",
            "job": "UI设计师",
            "children": []
          }
        ]
      },
      {
        "id": "04",
        "name": "老马",
        "pid": "01",
        "job": "技术leader",
        "children": [
          {
            "id": "10",
            "name": "小刘",
            "pid": "04",
            "job": "前端工程师",
            "children": []
          },
          {
            "id": "11",
            "name": "小华",
            "pid": "04",
            "job": "后端工程师",
            "children": []
          },
          {
            "id": "12",
            "name": "小李",
            "pid": "04",
            "job": "后端工程师",
            "children": []
          }
        ]
      },
      {
        "id": "05",
        "name": "老王",
        "pid": "01",
        "job": "测试leader",
        "children": [
          {
            "id": "13",
            "name": "小赵",
            "pid": "05",
            "job": "测试工程师",
            "children": []
          },
          {
            "id": "14",
            "name": "小强",
            "pid": "05",
            "job": "测试工程师",
            "children": []
          }
        ]
      },
      {
        "id": "06",
        "name": "老李",
        "pid": "01",
        "job": "运维leader",
        "children": [
          {
            "id": "15",
            "name": "小涛",
            "pid": "06",
            "job": "运维工程师",
            "children": []
          }
        ]
      }
    ]
  }
]
结构转换
「扁平数组」转「树形结构」
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function treeing (arr) {
  let tree = []
  const map = {}
  for (let item of arr) {
    // 一个新的带children的结构
    let newItem = map[item.id] = {
      ...item,
      children: []
    }
    if (map[item.pid]) { // 父节点已存进map则在父节点的children添加新元素
      let parent = map[item.pid]
      parent.children.push(newItem)
    } else { // 没有父节点，在根节点添加父节点
      tree.push(newItem)
    }
  }
  return tree
}
「树形结构」转「扁平数组」
1
2
3
4
5
6
7
8
9
10
11
12
function flatten (tree, arr = []) {
  tree.forEach(item => {
    const {children, ...props} = item
    // 添加除了children的属性
    arr.push(props)
    if (children) {
      // 递归将所有节点加入到结果集中
      flatten(children, arr)
    }
  })
  return arr
}

相关文档：https://juejin.cn/post/6997445260632653861