将扁平化JSON数据转换为多级嵌套结构：JavaScript实现指南

本教程详细介绍了如何将包含层级信息的扁平化JSON数组转换为具有多级嵌套（subNav）结构的JSON对象。通过迭代处理数据并利用一个映射表追踪每个层级的最新节点，我们可以高效地构建出复杂的树形结构，从而实现数据的清晰组织和展示。

1. 理解问题：扁平化数据与目标结构

在前端开发或数据处理中，我们经常会遇到需要将扁平化数组转换为具有层级关系的数据结构。假设我们有一个JSON数组，其中每个对象都包含一个metaData.level属性，表示其在层级结构中的深度：

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结构，其中子项通过subNav属性连接，如下所示：

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

直接通过数组索引判断父子关系（如root[index – 1]）在多级嵌套中是不可行的，因为它无法准确追踪任意深度的父节点。我们需要一种更灵活的机制来识别并连接父子节点。

2. 核心思路：父节点追踪与层级映射

解决这个问题的关键在于，在遍历扁平化数组时，我们需要能够快速找到当前项的直接父节点。由于层级关系由metaData.level定义，我们可以维护一个映射表来存储每个层级的“最新”父节点。

立即学习“Java免费学习笔记（深入）”；

具体步骤如下：

初始化结果数组：用于存放所有顶层（level: 1）的节点。初始化层级映射表 (itemMap)：这是一个对象，键是层级（例如1, 2, 3），值是该层级的最新节点对象。当处理一个level为N的项时，itemMap[N-1]将指向其父节点。遍历扁平化数组：对每个元素执行以下操作：创建新节点：复制当前项的title和metaData到新节点，以便后续添加subNav。判断层级：如果metaData.level为1，则该项是顶层节点，直接添加到结果数组中。如果metaData.level大于1，则计算其父级parentLevel（即currentLevel – 1）。从itemMap中获取parentLevel对应的父节点。如果父节点尚未有subNav属性，则初始化一个空数组。将当前新节点添加到父节点的subNav数组中。更新层级映射表：将当前新节点存储到itemMap[metaData.level]中。这样做是为了确保后续更深层级的子节点能够找到正确的直接父节点。

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数组转换为基于level属性的多级嵌套结构。 * @param {Array