JS数组转树形结构

JS数组转树形结构

在前端开发中，经常会遇到需要将一个扁平的数组转换为树形结构的情况。这种情况通常发生在需要展示类似文件夹和子文件的层级结构时。本文将介绍如何使用JavaScript将一个数组转换成树形结构。

为什么需要将数组转换成树形结构

在实际开发中，我们通常从后端接口获取到一维数组的数据，但是展示的时候需要将这些数据以树形结构显示出来，这就需要将数组转换成树形结构。另外，在前端的一些组件中，比如树形组件，也要求数据以树的形式展示，因此数组转树形结构是一个很常见的需求。

转换数组为树形结构的思路

将数组转换成树形结构的思路一般是构建一个树的数据结构，然后遍历数组，将每个元素插入到相应的位置。在这个过程中，通常会用到递归来处理子节点。

实现数组转换成树形结构的代码示例

下面给出一个简单的示例，展示如何将一个数组转换成树形结构。在这个示例中，我们的数据结构是一个包含id和parent_id字段的扁平数组，要将其转换成树形结构。

const data = [
    {id: 1, parent_id: null, name: 'A'},
    {id: 2, parent_id: 1, name: 'B'},
    {id: 3, parent_id: 1, name: 'C'},
    {id: 4, parent_id: 2, name: 'D'},
    {id: 5, parent_id: 2, name: 'E'},
];

function arrayToTree(data, root = null) {
    const tree = {};

    data.forEach(node => {
        if (node.parent_id === root) {
            tree[node.id] = {
                ...node,
                children: arrayToTree(data, node.id)
            };
        } else if (tree[node.parent_id]) {
            if (!tree[node.parent_id].children) {
                tree[node.parent_id].children = {};
            }
            tree[node.parent_id].children[node.id] = {
                ...node,
                children: arrayToTree(data, node.id)
            };
        }
    });

    return tree;
}

const result = arrayToTree(data);
console.log(JSON.stringify(result, null, 2));

上面的代码中，我们定义了一个arrayToTree函数，接收一个数据数组和一个根节点的值作为参数。通过遍历数组，将每个节点插入到相应的位置，从而构建出一个树形结构。最后打印出转换后的树形结构数据。

运行结果

{
  "1": {
    "id": 1,
    "parent_id": null,
    "name": "A",
    "children": {
      "2": {
        "id": 2,
        "parent_id": 1,
        "name": "B",
        "children": {
          "4": {
            "id": 4,
            "parent_id": 2,
            "name": "D",
            "children": {}
          },
          "5": {
            "id": 5,
            "parent_id": 2,
            "name": "E",
            "children": {}
          }
        }
      },
      "3": {
        "id": 3,
        "parent_id": 1,
        "name": "C",
        "children": {}
      }
    }
  }
}

以上就是将数组转换成树形结构的一个简单示例。通过这种方法，可以方便地将扁平的数组转换为树形结构，便于在前端展示和处理数据。