将扁平JSON数据转换为带层级的嵌套结构

本教程详细介绍了如何将包含层级（level）信息的扁平JSON数组转换为具有父子关系的嵌套JSON结构。通过迭代数据并利用映射表追踪各层级节点，我们可以高效地构建出复杂的树状结构，适用于动态菜单、文件系统表示等场景，确保输出结构清晰、逻辑严谨。

1. 场景概述与问题定义

在前端开发或数据处理中，我们经常会遇到需要将线性的、扁平化的数据列表转换成具有层级关系的树状结构。例如，一个网站的导航菜单、文件目录结构或评论回复链等。这些数据通常以数组形式存储，其中每个元素包含一个标识其层级的属性（如 level）。

我们的目标是将以下结构的扁平JSON数据：

const content = [  { title: "Item 1", metaData: { "level": 1, "desc": "Some Desc 1", "displayOnOverview": true }},  { title: "Item 2", metaData: { "level": 2, "desc": "Some Desc 2", "displayOnOverview": true }},  { title: "Item 3", metaData: { "level": 2, "desc": "Some Desc 3", "displayOnOverview": false }},  { title: "Item 4", metaData: { "level": 3, "desc": "Some Desc 4", "displayOnOverview": true }},  { title: "Item 5", metaData: { "level": 1, "desc": "Some Desc 5", "displayOnOverview": true }}];

转换为以下具有 subNav 属性的嵌套结构：

[  {    "title": "Item 1",    "metaData": {      "desc": "Some Desc 1",      "displayOnOverview": true    },    "subNav": [      {        "title": "Item 2",        "metaData": {          "desc": "Some Desc 2",          "displayOnOverview": true        }      },      {        "title": "Item 3",        "metaData": {          "desc": "Some Desc 3",          "displayOnOverview": false        },        "subNav": [          {            "title": "Item 4",            "metaData": {              "desc": "Some Desc 4",              "displayOnOverview": true            }          }        ]      }    ]  },  {    "title": "Item 5",    "metaData": {      "desc": "Some Desc 5",      "displayOnOverview": true    }  }]

核心挑战在于如何根据 level 属性正确地识别父子关系，并将子节点动态地添加到其父节点的 subNav 数组中。

2. 核心转换逻辑与算法设计

为了高效地构建嵌套结构，我们需要一种机制来追踪当前处理的节点及其潜在的父节点。这里介绍一种基于迭代和映射表的解决方案。

算法思路：

初始化：

创建一个空数组 topLevelItems 用于存放所有 level 为 1 的顶级节点。创建一个映射表 itemMap，其键为层级（level），值为该层级最近处理过的节点对象。这个映射表是实现动态父子链接的关键。

迭代处理： 遍历输入的扁平数据数组 data 中的每一个 item。

节点构建： 对于每个 item，提取其 title 和 metaData。需要注意的是，最终输出的 metaData 不应包含 level 属性，因为 level 仅用于结构构建，而非最终数据负载。因此，我们创建一个新的 newItem 对象，其中 metaData 只包含除 level 之外的其他属性。

判断层级并连接：

顶级节点 (level === 1)： 如果当前 item 的 level 为 1，它是一个顶级节点。直接将其 newItem 添加到 topLevelItems 数组中。子节点 (level > 1)： 如果当前 item 的 level 大于 1，它是一个子节点。计算其父节点的层级 parentLevel = metaData.level – 1。从 itemMap 中获取 parentLevel 对应的父节点 parentItem。如果 parentItem 尚无 subNav 数组，则为其创建一个空数组。将当前 newItem 添加到 parentItem.subNav 数组中。

更新映射表： 无论当前 item 是顶级节点还是子节点，都需要将其 newItem 存储到 itemMap 中，键为 metaData.level。这样，当前 newItem 就成为了后续更高层级节点的潜在父节点。

返回结果： 遍历结束后，topLevelItems 数组将包含完整的嵌套结构。

3. 示例代码实现

以下是使用 JavaScript 实现上述算法的完整代码：

const content = [  { title: "Item 1", metaData: { "level": 1, "desc": "Some Desc 1", "displayOnOverview": true }},  { title: "Item 2", metaData: { "level": 2, "desc": "Some Desc 2", "displayOnOverview": true }},  { title: "Item 3", metaData: { "level": 2, "desc": "Some Desc 3", "displayOnOverview": false }},  { title: "Item 4", metaData: { "level": 3, "desc": "Some Desc 4", "displayOnOverview": true }},  { title: "Item 5", metaData: { "level": 1, "desc": "Some Desc 5", "displayOnOverview": true }}];/** * 将扁平JSON数组转换为带有层级关系的嵌套结构。 * * @param {Array