本文详细介绍了如何使用javascript递归算法将复杂的嵌套树形结构数组转换为扁变列表。通过在每个元素中添加 parentid 和 childrenid 属性，我们能够有效地维护数据间的层级关系，从而简化数据处理和查询，适用于需要扁平化层次数据的场景。
在前端开发或数据处理中，我们经常会遇到以树形结构表示的数据，例如菜单、部门组织架构或文件系统。虽然树形结构直观地展现了层级关系，但在某些操作（如搜索、过滤或数据传输）中，将其扁平化为一维列表会更加高效。本教程将深入探讨如何利用递归算法，将一个包含多层嵌套 children 属性的数组扁平化，并在扁平化后的每个元素中准确记录其父级和子级的ID，从而在扁平化的同时保留重要的层级关联信息。
问题阐述与目标
假设我们有一个 transferClasses 数组，它代表了一组具有层级关系的课程数据。每个课程对象可能包含一个 children 数组，表示其子课程。我们的目标是将这个嵌套的数组结构转换为一个扁平化的列表 flatList。在这个扁平化过程中，每个课程对象除了保留原有的 id、name、isTransfer 属性外，还需要新增两个属性：
childrenId: 一个数组，包含当前课程所有直接子课程的 id。parentId: 一个数组，包含当前课程的直接父课程的 id。对于顶层课程，parentId 为 [null]。
以下是原始的嵌套数据结构示例：
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 示例如下：
立即学习“Java免费学习笔记（深入）”；
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", // 注意这里ID修正为Class2-2的ID name: "Class2-2", isTransfer: false, childrenId: [ "89134f56-3ef6-ed11-8daf-85953743f4de", "89134f56-3ef6-ed11-8daf-53743f1ce", ], 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"], },];
核心概念：递归遍历
处理树形或嵌套结构数据时，递归是一种非常自然且强大的方法。其核心思想是函数调用自身来处理子问题，直到达到基本情况（例如，一个节点没有子节点）。在这个场景中，我们可以定义一个递归函数来遍历每个节点：
处理当前节点，将其转换为扁平化格式并记录其子节点ID。将当前节点的ID作为参数，递归调用自身来处理其所有子节点，以此传递父节点信息。
解决方案实现
我们将创建一个主函数 flattenArray，它将初始化一个空数组来存储扁平化后的结果，并调用一个内部的递归辅助函数 traverse 来完成实际的遍历和转换工作。
flattenArray 主函数
这个函数是入口点，它接收原始的嵌套数组作为参数。它会遍历数组的每个顶层元素，并为每个元素启动一次 traverse 递归调用。
const flattenArray = (array) => { let flatArray = []; // 用于存储扁平化结果的数组 // ... traverse 递归函数定义在里面 ... array.forEach((arrayItem) => traverse(arrayItem)); // 对顶层元素进行遍历 return flatArray;};
traverse 递归函数详解
traverse 函数是解决方案的核心。它负责处理单个节点，并递归地处理其子节点。
const traverse = (node, parentId = null) => { // 1. 解构节点：分离 children 属性和其余属性 const { children, ...restOfNode } = node; // 2. 构建扁平化后的当前节点对象 flatArray.push({ ...restOfNode, // 复制节点原有属性 childrenId: children ? children.map(child => child.id) : [], // 提取所有子节点的ID parentId: [parentId], // 将父节点ID存储为数组，顶层节点为 [null] }); // 3. 递归处理子节点 if (node.children && node.children.length > 0) { // 检查是否存在子节点 node.children.forEach((child) => traverse(child, node.id)); // 递归调用，并传入当前节点的ID作为子节点的 parentId } }
关键步骤解析：
参数 node 和 parentId: node 是当前正在处理的节点对象，parentId 是当前节点的父节点ID。parentId 默认值为 null，用于处理顶层节点。解构赋值: const { children, …restOfNode } = node; 这一行将当前节点的 children 属性分离出来，并将所有其他属性收集到 restOfNode 对象中。这确保了在构建新对象时不会将 children 数组直接复制过去。构建扁平化对象:…restOfNode: 展开当前节点除 children 外的所有属性。childrenId: children ? children.map(child => child.id) : []: 如果存在 children 数组，则映射其所有子节点的 id 形成一个 childrenId 数组；否则，为一个空数组。parentId: [parentId]: 将传入的 parentId 封装成一个数组。这是为了与目标输出格式保持一致，即使只有一个父节点，也将其表示为数组。递归调用: if (node.children && node.children.length > 0) 检查当前节点是否有子节点。如果有，则遍历 node.children 数组，对每个子节点递归调用 traverse 函数。在递归调用时，当前节点的 node.id 被作为 parentId 传递给子节点，从而建立了父子关系链。
完整代码示例
将上述逻辑整合，形成完整的JavaScript函数：
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: [], }, ], }, ], },];const flattenArray = (array) => { let flatArray = []; // 存储扁平化结果的数组 const traverse = (node, parentId = null) => { // 解构节点，分离 children 属性和其余属性 const { children, ...restOfNode } = node; // 构建扁平化后的当前节点对象并添加到结果数组 flatArray.push({ ...restOfNode, childrenId: children && children.length > 0 ? children.map(child => child.id) : [], parentId: [parentId], // 将父节点ID存储为数组 }); // 如果存在子节点，则递归处理 if (children && children.length > 0) { children.forEach((child) => traverse(child, node.id)); // 递归调用，并传入当前节点的ID作为子节点的 parentId } } // 遍历原始数组的顶层元素，启动递归 array.forEach((arrayItem) => traverse(arrayItem)); return flatArray;};const flatList = flattenArray(transferClasses);console.log(JSON.stringify(flatList, null, 2));
输出结果：
[ { "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" ] }]
注意事项与最佳实践
parentId 作为数组: 在本示例中，parentId 被设计为包含单个父ID的数组（或 [null]）。这可能在某些场景下有用，例如未来可能支持多父节点的情况，或者为了统一数据结构。如果确定每个节点只有一个父节点，也可以将其设计为直接存储父ID（例如 parentId: parentId || null），具体取决于业务需求。空 children 数组处理: 代码中 children && children.length > 0 的检查确保了在节点没有子节点时，childrenId 属性被正确地赋值为空数组 []，避免了 map 方法在 undefined 或空数组上调用时可能出现的问题。性能考量: 对于非常深或非常大的树形结构，递归可能会导致栈溢出（Stack Overflow）或性能问题。JavaScript引擎通常对递归深度有限制。对于极端情况，可以考虑使用迭代方法（例如，使用栈或队列模拟递归）来避免栈溢出。然而，对于大多数常见的树形结构，递归方法是简洁且高效的。数据不变性: 本方案通过创建新对象并添加到 flatArray 来实现扁平化，原始的 transferClasses 数组及其内部对象保持不变，这符合函数式编程中数据不变性的原则。
总结
通过本教程，我们学习了如何利用JavaScript的递归能力，有效地将复杂的嵌套树形结构数组扁平化为一维列表。这种方法不仅简化了数据结构，还通过添加 parentId 和 childrenId 属性，巧妙地保留了原始数据的层级关系。掌握这种技术对于处理各种层级数据场景都非常有用，能够帮助开发者构建更灵活、更易于管理的数据模型。
以上就是使用递归扁平化JavaScript树形数组并构建父子ID映射的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1534338.html
微信扫一扫 
支付宝扫一扫 
