将扁平JSON数组转换为嵌套结构：基于层级信息的JavaScript实现-js教程-PHP中文网

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

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

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 }}
];

转换为如下所示的嵌套结构，其中子项通过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
    }
  }
]

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

2. 常见误区分析

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

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

超会AI

AI驱动的爆款内容制造机

下载

// 初始尝试的代码片段
const root = [];
sideNavData.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]['subNav'] = node // 错误：这里会直接覆盖，并且可能不是正确的父节点
    }
});

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

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不存在subNav数组，则为其创建一个。然后将newItem添加到parentItem.subNav中。
- 更新映射: 无论当前节点是顶级节点还是子节点，都将其newItem存储到itemMap中，键为当前节点的level。这样，itemMap[level]将始终指向当前层级最近处理过的节点，以便后续更深层级的节点能找到正确的父节点。

3.2 示例代码

以下是实现上述逻辑的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