本教程详细介绍了如何将包含层级（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 }}
];

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

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

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

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

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

算法思路：

1. 初始化：

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

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

   青泥AI

   青泥学术AI写作辅助平台

   360 查看详情

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

4. 判断层级并连接：

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

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

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

3. 示例代码实现

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

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