JavaScript 数组对象转树结构

在前端开发中，我们经常会遇到将数组对象转换为树结构的需求，尤其是在处理大量数据的情况下。本文将介绍如何使用 JavaScript 实现数组对象转树结构，并提供详细的示例代码。

为什么需要数组对象转树结构?

当我们从后端获取到的数据是扁平化的数组对象的时候，往往需要将其转换为树状结构，以便于在前端进行展示和操作。例如，我们从后端获取到了以下数据：

const data = [
  { id: 1, name: 'A', parentId: null },
  { id: 2, name: 'B', parentId: null },
  { id: 3, name: 'A1', parentId: 1 },
  { id: 4, name: 'A2', parentId: 1 },
  { id: 5, name: 'B1', parentId: 2 },
  { id: 6, name: 'B2', parentId: 2 },
  { id: 7, name: 'A1-1', parentId: 3 },
  { id: 8, name: 'A1-2', parentId: 3 },
];

我们希望将上面的数据转换为以下树状结构：

- A
  - A1
    - A1-1
    - A1-2
  - A2
- B
  - B1
  - B2

这样的树状结构对于展示和操作数据是非常方便的。接下来，我们将介绍如何使用 JavaScript 实现这个转换过程。

实现数组对象转树结构的函数

下面是一个用于将数组对象转换为树状结构的函数的实现：

function arrayToTree(array) {
  const root = { id: null, children: [] };
  const map = {};

  array.forEach(item => {
    map[item.id] = { ...item, children: [] };
  });

  array.forEach(item => {
    if (item.parentId === null) {
      root.children.push(map[item.id]);
    } else {
      map[item.parentId].children.push(map[item.id]);
    }
  });

  return root.children;
}

以上函数的思路是先通过遍历数组创建了一个映射表 map，以 id 作为键，将数组对象转换为一个以 id 为属性的对象，并将其子节点初始化为空数组。然后再次遍历数组，根据每个对象的 parentId 将其放入对应父节点的 children 数组中。最后返回根节点的子节点数组即可。

使用示例

我们来使用上面的函数将之前提到的示例数据转换为树状结构：

const data = [
  { id: 1, name: 'A', parentId: null },
  { id: 2, name: 'B', parentId: null },
  { id: 3, name: 'A1', parentId: 1 },
  { id: 4, name: 'A2', parentId: 1 },
  { id: 5, name: 'B1', parentId: 2 },
  { id: 6, name: 'B2', parentId: 2 },
  { id: 7, name: 'A1-1', parentId: 3 },
  { id: 8, name: 'A1-2', parentId: 3 },
];

const tree = arrayToTree(data);
console.log(tree);

运行上述代码将会得到如下输出：

[
  {
    "id": 1,
    "name": "A",
    "parentId": null,
    "children": [
      {
        "id": 3,
        "name": "A1",
        "parentId": 1,
        "children": [
          {
            "id": 7,
            "name": "A1-1",
            "parentId": 3,
            "children": []
          },
          {
            "id": 8,
            "name": "A1-2",
            "parentId": 3,
            "children": []
          }
        ]
      },
      {
        "id": 4,
        "name": "A2",
        "parentId": 1,
        "children": []
      }
    ]
  },
  {
    "id": 2,
    "name": "B",
    "parentId": null,
    "children": [
      {
        "id": 5,
        "name": "B1",
        "parentId": 2,
        "children": []
      },
      {
        "id": 6,
        "name": "B2",
        "parentId": 2,
        "children": []
      }
    ]
  }
]

输出结果即为我们所期望的树状结构。

总结

通过上述的示例代码，我们可以轻松地将数组对象转换为树结构，并方便地在前端进行展示和操作。这在项目中处理复杂的数据结构时非常有用。希望本文对你有所帮助，如果有任何问题，欢迎留言讨论！

本文来自极简博客，作者：时光隧道喵，转载请注明原文链接：JavaScript 数组对象转树结构