将扁平JSON数组转换为嵌套结构：基于层级信息的J*aScript实现

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

将扁平JSON数组转换为嵌套结构：基于层级信息的J*aScript实现

2025-10-09

浏览次数：次

返回列表

将扁平JSON数组转换为嵌套结构：基于层级信息的JavaScript实现

本文详细介绍了如何将一个包含层级（level）信息的扁平JSON数组转换为具有父子关系的嵌套JSON结构。通过J*aScript实现，利用一个映射表（itemMap）来高效追踪不同层级的父节点，从而构建出符合预期的subN*层级关系。该方法适用于需要将线性数据转换为树状或菜单结构等场景，确保数据逻辑清晰且易于维护。

1. 问题背景与目标

在前端开发或数据处理中，我们经常会遇到需要将扁平化的数据结构转换为具有层级关系的树形结构。例如，一个菜单列表、文件系统路径或组织架构，其原始数据可能是一个简单的数组，每个元素通过一个“层级”或“深度”属性来指示其在整个结构中的位置。

我们的目标是将以下这种扁平化的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": {
      "level": 1,
      "desc": "Some Desc 1",
      "displayOnOverview": true
    },
    "subN*": [
      {
        "title": "Item 2",
        "metaData": {
          "level": 2,
          "desc": "Some Desc 2",
          "displayOnOverview": true
        }
      },
      {
        "title": "Item 3",
        "metaData": {
          "level": 2,
          "desc": "Some Desc 3",
          "displayOnOverview": false
        },
        "subN*": [
          {
            "title": "Item 4",
            "metaData": {
              "level": 3,
              "desc": "Some Desc 4",
              "displayOnOverview": true
            }
          }
        ]
      }
    ]
  },
  {
    "title": "Item 5",
    "metaData": {
      "level": 1,
      "desc": "Some Desc 5",
      "displayOnOverview": true
    }
  }
]

可以看到，metaData.level属性是构建层级关系的关键。level: 1的项是顶级节点，level: 2的项是level: 1项的子节点，以此类推。

2. 常见误区分析

在尝试构建嵌套结构时，一个常见的误区是仅依赖数组的索引和前一个元素的层级来判断父子关系。例如，以下代码片段：

// 初始尝试的代码片段
const root = [];
sideN*Data.forEach((node, index) => {
    const nodeLevel = node.metaData.level;

    if (root.length === 0) {
        return root.push(node)
    }

    const previousLevel = root[index - 1].metaData.level; // 这里的root[index - 1]不一定是正确的父节点

    if (previousLevel === nodeLevel) {
        return root.push(node)
    } else {
        return root[index - 1]['subN*'] = node // 错误：这里会直接覆盖，并且可能不是正确的父节点
    }
});

这种方法的问题在于，root[index - 1]并不总是当前节点在逻辑上的直接父节点。它仅仅是数组中前一个被处理的节点。当层级发生跳变（例如从level 1到level 3，中间没有level 2），或者同一层级有多个兄弟节点时，这种简单的索引依赖就会失效，导致结构错误或覆盖问题。我们需要一种更健壮的机制来追踪每个层级的最新父节点。

青泥AI

青泥学术AI写作辅助平台

360 查看详情青泥AI

3. 解决方案：基于层级映射表的构建方法

为了正确地构建嵌套结构，我们可以采用一种策略，即在遍历扁平数组时，维护一个映射表（itemMap），用于存储每个层级最近处理过的节点。这样，当处理一个新节点时，我们可以根据其level属性轻松找到其对应的父节点（level - 1）。

3.1 核心思路

初始化: 创建一个空数组topLevelItems用于存放所有level 1的顶级节点，以及一个空对象itemMap作为层级映射表。
遍历: 遍历原始的扁平JSON数组中的每个item。
节点处理:
- 为当前item创建一个新的对象newItem，只包含title和metaData（或其他需要保留的属性）。
- 获取当前item的level。
- 顶级节点: 如果level为1，则将newItem直接添加到topLevelItems数组中。
- 子节点: 如果level大于1，则计算其父节点的parentLevel (level - 1)。从itemMap中查找parentLevel对应的节点作为parentItem。
- 建立连接: 如果parentItem不存在subN*数组，则为其创建一个。然后将newItem添加到parentItem.subN*中。
- 更新映射: 无论当前节点是顶级节点还是子节点，都将其newItem存储到itemMap中，键为当前节点的level。这样，itemMap[level]将始终指向当前层级最近处理过的节点，以便后续更深层级的节点能找到正确的父节点。

3.2 示例代码

以下是实现上述逻辑的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", &quot;displayOnOverview": true }}
];

/**
 * 将扁平JSON数组转换为嵌套结构
 * @param {Array<Object>} data 包含level信息的扁平JSON数组
 * @returns {Array<Object>} 转换后的嵌套JSON数组
 */
function buildNestedStructure(data) {
  const topLevelItems = []; // 存储所有level 1的顶级节点
  const itemMap = {};       // 存储每个level最近处理过的节点，用于查找父节点

  for (const item of data) {
    // 提取title和metaData，可以根据需要提取更多属性
    const { title, metaData } = item;
    // 创建一个新的节点对象，避免直接修改原始数据
    const newItem = { title, metaData: { ...metaData } }; // 复制metaData以防直接引用问题

    if (metaData.level === 1) {
      // 如果是顶级节点，直接添加到topLevelItems数组
      topLevelItems.push(newItem);
    } else {
      // 如果是子节点，找到其父节点的层级
      const parentLevel = metaData.level - 1;
      // 从itemMap中获取父节点
      const parentItem = itemMap[parentLevel];

      // 检查父节点是否存在，并确保其有subN*数组
      if (parentItem) {
        if (!parentItem.subN*) {
          parentItem.subN* = [];
        }
        // 将当前节点添加到父节点的subN*中
        parentItem.subN*.push(newItem);
      } else {
        // 实际应用中，如果出现level > 1但找不到父节点的情况，可能需要报错或特殊处理
        console.warn(`Warning: Item "${title}" (level ${metaData.level}) has no parent at level ${parentLevel}. It will be orphaned.`);
      }
    }

    // 更新itemMap，将当前newItem存储为当前level的最新节点
    // 这样，后续更深层级的节点可以找到它作为父节点
    itemMap[metaData.level] = newItem;
  }

  return topLevelItems;
}

const output = buildNestedStructure(content);
console.log(JSON.stringify(output, null, 2));

3.3 代码解析

topLevelItems: 这个数组专门用于收集所有最高层级（level: 1）的节点。最终的输出就是这个数组。
itemMap: 这是解决方案的核心。它是一个哈希表（或对象），其键是层级编号（level），值是该层级最近被处理过的节点对象。
- 例如，当处理完Item 1 (level 1)后，itemMap会是{ '1': { title: 'Item 1', ... } }。
- 当处理Item 2 (level 2)时，它会查找itemMap[1]找到Item 1作为父节点。然后将Item 2添加到Item 1的subN*中。接着，itemMap更新为{ '1': { title: 'Item 1', ... }, '2': { title: 'Item 2', ... } }。
- 当处理Item 3 (level 2)时，它再次查找itemMap[1]找到Item 1。将Item 3添加到Item 1的subN*中。然后itemMap更新为{ '1': { title: 'Item 1', ... }, '2': { title: 'Item 3', ... } }。注意itemMap[2]现在是Item 3，因为它是level 2最近处理的节点。
- 当处理Item 4 (level 3)时，它会查找itemMap[2]，此时找到的是Item 3。将Item 4添加到Item 3的subN*中。
metaData: { ...metaData }: 在创建newItem时，使用了展开运算符{ ...metaData }来浅拷贝metaData对象。这有助于防止在修改newItem的metaData时意外影响原始content数组中的数据，尤其是在metaData对象本身被修改（例如添加或删除属性）的情况下。

4. 注意事项与扩展

数据顺序: 此方法假设输入数据是按照层级顺序（即父节点总是在其子节点之前出现）且层级是连续递增的。如果数据顺序混乱或层级跳跃（例如level 1后直接是level 3而没有level 2），则可能需要额外的预处理或更复杂的逻辑来处理“孤儿”节点。
错误处理: 在parentItem可能不存在的情况下（即level > 1但itemMap[parentLevel]为空），代码中添加了一个console.warn。在生产环境中，可以根据业务需求选择抛出错误、跳过该节点或将其视为顶级节点。
属性选择: 示例代码只复制了title和metaData。如果原始对象包含其他顶级属性，需要根据需求在newItem中进行复制。
性能: 对于大规模数据集，这种单次遍历的方法具有O(N)的时间复杂度，效率较高。