本教程详细讲解如何使用javascript将复杂的嵌套数组结构扁平化为单一列表。通过递归遍历策略，我们为每个元素动态添加其父级id和子级id列表，从而在扁平化数据中保留原始的层级关系，适用于数据处理和ui展示等场景。
引言：处理嵌套数据结构的挑战
在前端和后端开发中，我们经常会遇到以树形或嵌套数组形式组织的数据，例如文件系统、组织架构、菜单导航或分类目录。虽然这种结构直观地表达了层级关系，但在某些场景下，如数据展示（扁平列表）、全局搜索、数据过滤或与某些API交互时，将这些嵌套数据转换为扁平列表会更加高效和便捷。然而，在扁平化的过程中，如何保留原始的父子关系信息是一个关键挑战。
问题定义：从层级到扁平
假设我们有一个表示课程或分类的嵌套数组，每个对象可能包含一个 children 数组，表示其子级：
const transferClasses = [ { id: "c5d91430-aaab-ed11-8daf-85953743f5cc", name: "Class1", isTransfer: false, children: [], }, { id: "775cb75d-aaab-ed11-8daf-85953743f5cc", name: "Class2", isTransfer: false, children: [ { id: "89134f56-3ef6-ed11-8daf-85953743f5cc", name: "Class2-1", isTransfer: false, children: [], }, { id: "89134f56-3ef6-ed11-8daf-85953743f4cc", name: "Class2-2", isTransfer: false, children: [ { id: "89134f56-3ef6-ed11-8daf-85953743f4de", name: "Class2-2-1", isTransfer: false, children: [], }, { id: "89134f56-3ef6-ed11-8daf-85953743f1ce", name: "Class2-2-2", isTransfer: false, children: [], }, ], }, ], },];
我们的目标是将其转换为一个扁平的数组 flatList，其中每个元素都包含 id、name、isTransfer，以及新添加的 childrenId（一个包含所有直接子节点ID的数组）和 parentId（一个包含其直接父节点ID的数组，如果不存在则为 null）：
const flatList = [ { id: "c5d91430-aaab-ed11-8daf-85953743f5cc", name: "Class1", isTransfer: false, childrenId: [], parentId: null }, { id: "775cb75d-aaab-ed11-8daf-85953743f5cc", name: "Class2", isTransfer: false, childrenId: ["89134f56-3ef6-ed11-8daf-85953743f5cc", "89134f56-3ef6-ed11-8daf-85953743f4cc"], parentId: null }, { id: "89134f56-3ef6-ed11-8daf-85953743f5cc", name: "Class2-1", isTransfer: false, childrenId: [], parentId: ["775cb75d-aaab-ed11-8daf-85953743f5cc"] }, { id: "89134f56-3ef6-ed11-8daf-85953743f4cc", name: "Class2-2", isTransfer: false, childrenId: ["89134f56-3ef6-ed11-8daf-85953743f4de", "89134f56-3ef6-ed11-8daf-85953743f1ce"], parentId: ["775cb75d-aaab-ed11-8daf-85953743f5cc"] }, { id: "89134f56-3ef6-ed11-8daf-85953743f4de", name: "Class2-2-1", isTransfer: false, childrenId: [], parentId: ["89134f56-3ef6-ed11-8daf-85953743f4cc"] }, { id: "89134f56-3ef6-ed11-8daf-85953743f1ce", name: "Class2-2-2", isTransfer: false, childrenId: [], parentId: ["89134f56-3ef6-ed11-8daf-85953743f4cc"] },];
注意，目标 flatList 中的 parentId 和 childrenId 都被设计为数组形式，即使只有一个ID。顶层元素的 parentId 为 null。
立即学习“Java免费学习笔记（深入）”；
核心策略：递归遍历
处理树形或层级数据结构最自然、最有效的方法是递归。通过定义一个函数来处理单个节点，并在其子节点上递归调用自身，我们可以遍历整个结构。关键在于如何在递归调用中传递上下文信息，特别是父节点的ID，以便为子节点正确设置 parentId。
实现步骤与代码解析
我们将创建一个主函数 flattenArray，它将初始化一个空数组来存储扁平化后的结果，并启动递归过程。
const flattenArray = (array) => { let flatArray = []; // 用于存储扁平化后的所有节点 /** * 递归遍历函数，处理单个节点及其子节点 * @param {object} node - 当前正在处理的节点对象 * @param {string|null} parentId - 当前节点的父节点ID，顶层节点为null */ const traverse = (node, parentId = null) => { // 解构当前节点，将 children 属性分离，其余属性放入 restOfNode const { children, ...restOfNode } = node; // 构建当前节点的扁平化表示 flatArray.push({ ...restOfNode, // 复制原始节点除 children 外的所有属性 // 提取所有直接子节点的ID，如果 children 不存在或为空，则为 [] childrenId: children && children.length > 0 ? children.map(child => child.id) : [], // 设置父节点ID。如果 parentId 存在，则将其放入数组；否则为 null parentId: parentId ? [parentId] : null, }); // 如果当前节点有子节点，则对每个子节点递归调用 traverse if (children && children.length > 0) { children.forEach((child) => traverse(child, node.id)); // 将当前节点的 id 作为子节点的 parentId 传入 } }; // 遍历顶层数组的每个元素，启动递归过程 // 对于顶层元素，其 parentId 默认为 null array.forEach((arrayItem) => traverse(arrayItem)); return flatArray; // 返回最终的扁平化数组};
代码解析：
flatArray 初始化： flatArray 是一个在 flattenArray 函数作用域内声明的数组，用于收集所有扁平化后的节点。traverse 递归函数：它接收两个参数：node（当前处理的节点）和 parentId（当前节点的父节点ID）。parentId 默认值为 null，用于处理顶层节点。解构赋值： const { children, …restOfNode } = node; 这一行将当前节点的 children 属性单独提取出来，其余的属性（如 id, name, isTransfer）则通过 …restOfNode 收集到一个新对象中。构建新节点：…restOfNode 确保原始节点的核心数据被保留。childrenId: 通过 children.map(child => child.id) 收集所有直接子节点的ID。如果 children 数组为空或不存在，则 childrenId 为空数组 []。parentId: 根据 parentId 参数的值来设置。如果 parentId 存在（即当前节点不是顶层节点），则将其包装成一个数组 [parentId]；否则，设置为 null。这与我们目标输出的格式一致。递归调用： if (children && children.length > 0) 检查当前节点是否有子节点。如果有，则 children.forEach((child) => traverse(child, node.id)) 对每个子节点递归调用 traverse 函数，并将当前节点的 id 作为新的 parentId 传递下去。这是构建父子关系的关键步骤。启动遍历： array.forEach((arrayItem) => traverse(arrayItem)); 遍历初始输入数组中的每个顶层元素，为它们调用 traverse 函数，并默认将 parentId 设置为 null。
示例用法
使用我们最初的 transferClasses 数组来测试这个函数：
const transferClasses = [ // ... (同上文定义的 transferClasses 数组)];const flatListResult = flattenArray(transferClasses);console.log(flatListResult);
运行上述代码，将得到符合预期的扁平化 flatList。
注意事项与最佳实践
初始 parentId 处理： 确保顶层元素的 parentId 被正确设置为 null，这是通过 traverse 函数的 parentId = null 默认参数和 array.forEach 的初始调用实现的。childrenId 的健壮性： children && children.length > 0 ? children.map(child => child.id) : [] 确保即使 children 属性不存在或为空数组，childrenId 也能正确地被初始化为空数组，避免运行时错误。parentId 数据结构： 教程中遵循了目标输出的格式，将 parentId 也设计为数组 [id]。在实际应用中，如果父节点只有一个，将其直接存储为字符串 id 可能更常见，但为了保持一致性，我们使用了数组。纯函数设计： flattenArray 函数是一个纯函数，它不会修改原始的 transferClasses 数组，而是返回一个新的扁平化数组，这符合函数式编程的最佳实践。性能考量： 递归在处理嵌套结构时非常直观和强大。然而，对于极深（数千层）的嵌套结构，可能会有栈溢出的风险。在大多数Web应用场景中，这种深度是罕见的，因此递归是完全可接受的解决方案。
总结
通过本教程，我们学习了如何利用递归遍历策略，将复杂的嵌套数组结构扁平化为易于管理的单一列表。这个方法不仅有效地展开了层级数据，还巧妙地为每个元素添加了 parentId 和 childrenId 属性，从而在扁平化数据中保留了重要的父子关系信息。这种技术在数据处理、UI组件渲染（如无限滚动列表）以及需要快速查找或过滤数据的场景中都具有广泛的应用价值。掌握递归扁平化是处理树形数据结构的必备技能之一。
以上就是JavaScript中扁平化嵌套数组并构建父子ID关系教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1534402.html
微信扫一扫 
支付宝扫一扫 
