本文详细介绍了在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免费学习笔记（深入）”；
// directReportee = Map<string, Array>// 例如:// 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树形结构：避免嵌套数组陷阱的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1519945.html
微信扫一扫 
支付宝扫一扫 
