如何在 JavaScript 中从平面数组高效构建层次树结构？

在 JavaScript 中从平面数组构建分层树结构

简介

在 JavaScript 中，处理分层数据是对于各种应用程序至关重要，例如创建树结构或导航菜单。当数据存储在平面数组中时，有必要将其转换为分层结构以方便数据操作和可视化。本文将演示一种在 JavaScript 中从平面数组构建树数组的有效方法。

问题

给定一个由具有以下属性的对象组成的复杂 JSON 文件:

• id：唯一标识符
• parentId：父节点的ID（0对于根节点）
• 级别：树中节点的深度

任务是将平面 JSON 结构转换为具有代表父子的嵌套对象的分层树结构

解决方案

该解决方案利用地图查找方法高效构建层次树结构。该算法涉及两个步骤：

1. 创建索引对象的映射：

   • 迭代平面数组并创建一个映射，其中键是 id 属性，值是相应的数组索引。

2. 构建树结构：

   • 再次迭代平面数组：

     • 对于每个对象，使用以下方法从地图中检索其父对象的索引ParentId。
     • 如果父节点存在（不是根），则将当前对象作为子节点附加到其父节点。
     • 如果父节点不存在，则它是根节点，应该添加到根节点数组。

示例

考虑以下平面 JSON 数组：

const entries = [{
  "id": "12",
  "parentId": "0",
  "text": "Man",
  "level": "1",
  "children": null
},
{
  "id": "6",
  "parentId": "12",
  "text": "Boy",
  "level": "2",
  "children": null
},
{
  "id": "7",
  "parentId": "12",
  "text": "Other",
  "level": "2",
  "children": null
},
{
  "id": "9",
  "parentId": "0",
  "text": "Woman",
  "level": "1",
  "children": null
},
{
  "id": "11",
  "parentId": "9",
  "text": "Girl",
  "level": "2",
  "children": null
}];

将上述算法应用到这个平面数组将输出以下层次树结构：

const result = [
{
  "id": "12",
  "parentId": "0",
  "text": "Man",
  "level": "1",
  "children": [
    {
      "id": "6",
      "parentId": "12",
      "text": "Boy",
      "level": "2",
      "children": null
    },
    {
      "id": "7",
      "parentId": "12",
      "text": "Other",
      "level": "2",
      "children": null
    }
  ]
},
{
  "id": "9",
  "parentId": "0",
  "text": "Woman",
  "level": "1",
  "children":
  {
    "id": "11",
    "parentId": "9",
    "text": "Girl",
    "level": "2",
    "children": null
  }
}
];

结论

所提出的算法提供了一种在 JavaScript 中将分层数据的平面数组转换为结构化树数组的有效方法。这种方法利用地图查找来优化流程并支持多个根节点。它非常适合您需要从复杂数据创建树结构以进行进一步操作或可视化的情况。

以上是如何在 JavaScript 中从平面数组高效构建层次树结构？的详细内容。更多信息请关注PHP中文网其他相关文章！