两次循环搞定一维数组到多位数组的转换（菜单树生成）

发表于 分类于 ， ， 阅读次数： Changyan：

原数组：

1
2
3
4
5
6
7
8
9
10
11
const arr = [
  { id: 1, title: '第一层1000', parentId: 0 },
  { id: 2, title: '第一层2000', parentId: 0 },
  { id: 3, title: '第二层1100', parentId: 1 },
  { id: 4, title: '第二层1200', parentId: 1 },
  { id: 5, title: '第二层1300', parentId: 1 },
  { id: 6, title: '第二层2100', parentId: 2 },
  { id: 7, title: '第二层2200', parentId: 2 },
  { id: 8, title: '第三层1110', parentId: 3 },
  { id: 9, title: '第三层1120', parentId: 3 }
];

现在要实现以下效果：

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
[
    {
        "id": 1,
        "title": "第一层1000",
        "parentId": 0,
        "children": [
            {
                "id": 3,
                "title": "第二层1100",
                "parentId": 1,
                "children": [
                    {
                        "id": 8,
                        "title": "第三层1110",
                        "parentId": 3,
                        "children": [ ]
                    },
                    {
                        "id": 9,
                        "title": "第三层1120",
                        "parentId": 3,
                        "children": [ ]
                    }
                ]
            },
            {
                "id": 4,
                "title": "第二层1200",
                "parentId": 1,
                "children": [ ]
            },
            {
                "id": 5,
                "title": "第二层1300",
                "parentId": 1,
                "children": [ ]
            }
        ]
    },
    {
        "id": 2,
        "title": "第一层2000",
        "parentId": 0,
        "children": [
            {
                "id": 6,
                "title": "第二层2100",
                "parentId": 2,
                "children": [ ]
            },
            {
                "id": 7,
                "title": "第二层2200",
                "parentId": 2,
                "children": [ ]
            }
        ]
    }
]

实现代码如下：

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
// 第一次循环
// 先按照 parentId 转成 Map
function formatToMap(arr) {
  if (!arr || !Array.isArray(arr) || !arr.length) {
    return null;
  }
  const map = {};
  for (const item of arr) {
    const { parentId } = item;
    if (!map[parentId]) {
      map[parentId] = [];
    }
    map[parentId].push(item)
  }
  return map;
}
// 第二次循环
// 从 Map 中递归提取
function formatToTree(map, parentId) {
  const result = [];
  if (!map) {
    return result;
  }
  const items = map[parentId] || [];
  if (!items.length) {
    return result;
  }
  for (const item of items) {
    const { id } = item;
    item.children = formatToTree(map, id)
  }
  result.push(...items);
  return result;
}
// 测试代码
const mapData = formatToMap(arr);
const result = formatToTree(mapData, 0)
console.log(result)