本文详细介绍了如何使用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 属性，巧妙地保留了原始数据的层级关系。掌握这种技术对于处理各种层级数据场景都非常有用，能够帮助开发者构建更灵活、更易于管理的数据模型。
