JavaScript递归构建层级JSON树形结构：避免嵌套数组陷阱-js教程-PHP中文网

JavaScript递归构建层级JSON树形结构：避免嵌套数组陷阱

霞舞

发布： 2025-09-13 14:34:01

原创

304人浏览过

javascript递归构建层级json树形结构：避免嵌套数组陷阱

本文详细介绍了在JavaScript中如何利用递归函数正确构建具有层级关系的JSON树形结构。通过分析常见错误，并提供优化的代码示例，旨在帮助开发者避免在递归过程中产生不必要的嵌套数组，从而生成符合预期的扁平化子节点列表。

在前端开发中，将扁平化的数据列表转换为具有层级关系的树形结构JSON是一种常见需求，例如组织架构、文件系统或菜单导航等。递归是实现这一转换的强大工具，但如果不仔细处理，很容易引入不必要的嵌套，导致输出结构不符合预期。本教程将深入探讨这一问题，并提供一个健壮的解决方案。

数据准备与问题描述

假设我们有一组员工数据，其中包含姓名（Name）、邮箱（Email）、上级ID（Reports to Id）和员工ID（Id）。为了高效地查找每个员工的直接下属，我们通常会将原始列表预处理成一个Map结构，其中键是上级ID，值是直接向该上级汇报的员工对象数组。

原始数据结构示例 (概念性):

const employees = [
    { Name: "Lauren Boyle", Email: "lauren@example.com", "Reports to Id": null, Id: "1" },
    { Name: "Banoth Srikanth", Email: "banoth@example.com", "Reports to Id": "1", Id: "2" },
    { Name: "Stella Pavlova", Email: "stella@example.com", "Reports to Id": "2", Id: "3" },
    { Name: "Srikanth", Email: "srikanth@example.com", "Reports to Id": "1", Id: "4" },
    // ...更多员工
];

登录后复制

预处理后的 directReportee Map 结构 (示例):

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

v0.dev

Vercel推出的AI生成式UI工具，通过文本描述生成UI组件代码

232

查看详情

// directReportee = Map<string, Array<EmployeeObject>>
// 例如:
// directReportee.get("1") => [{ Name: "Banoth Srikanth", ... }, { Name: "Srikanth", ... }]
// directReportee.get("2") => [{ Name: "Stella Pavlova", ... }]

登录后复制

我们的目标是构建一个符合以下格式的树形JSON结构：

[
    {
        label: 'Lauren Boyle',
        name: '1', // 假设name字段应对应Id
        expanded: true,
        items: [ // 子节点数组，每个元素是一个对象
            {
                label: 'Banoth Srikanth',
                name: '2',
                expanded: true,
                items: [
                    {
                        label: 'Stella Pavlova',
                        name: '3',
                        expanded: true,
                        items: [],
                    }
                ]
            },
            {
                label: 'Srikanth',
                name: '4',
                expanded: true,
                items: [],
            },
        ],
    }
]

登录后复制

请注意，items 字段的值是一个对象数组，而不是一个数组的数组。

原始递归函数及问题分析

最初尝试的递归函数可能类似于以下形式，它在构建树时产生了不必要的嵌套：

function buildTree(mainRoot) {
  // 错误点1: 每次递归都返回一个包含单个元素的数组
  const items = [ // 这里定义了一个数组
    {
      label: mainRoot.Name,
      name: mainRoot.Name, // 原始代码中name字段映射的是Name，预期是Id
      expanded: true,
      items: [], // 用于存放子节点
    },
  ];
  if (directReportee.has(mainRoot.Id)) {
    directReportee.get(mainRoot.Id).forEach((childNodes) => {
        // 错误点2: buildTree(childNodes) 返回的是一个数组（如 [{...}]），
        // 将其直接推入 items[0].items 会导致双重嵌套。
        items[0].items.push(buildTree(childNodes));
    });
  }

  return items; // 返回包含一个节点的数组
}

登录后复制

当 buildTree 函数被递归调用时，例如 buildTree(childNodes)，它会返回一个包含单个节点对象的数组（例如 [{ label: "Child", ... }]）。然后，items[0].items.push() 操作会将这个返回的数组作为一个整体推入父节点的 items 数组中。这

以上就是JavaScript递归构建层级JSON树形结构：避免嵌套数组陷阱的详细内容，更多请关注php中文网其它相关文章！