理解原始数据结构与目标需求
在前端开发中，我们经常需要处理来自后端或第三方接口的复杂嵌套数据。本教程的起点是一个包含group和categories的数组，其中categories内部又可能包含subcategories，形成一个多层级的递归结构。
原始数据结构示例：
const arr = [
{
group: { id: "group1", groupname: "groupname1" },
categories: [
{
id: "cat1",
categoryName: "category1",
total: 5,
available: 2,
subCategories: []
},
{
id: "cat2",
categoryName: "category2",
total: 15,
available: 12,
subCategories: [
{
id: "cat3",
categoryName: "category3",
total: 15,
available: 12,
subCategories: []
}
]
}
]
},
{
group: { id: "group2", groupname: "groupname2" },
categories: [
{
id: "cat4",
categoryName: "category4",
total: 25,
available: 22,
subCategories: []
},
{
id: "cat5",
categoryName: "category5",
total: 50,
available: 25,
subCategories: []
}
]
}
];我们的目标是将上述结构转换为一个统一的树形结构，其中每个节点都包含key、name、total、available和children属性。特别地，顶层节点（即原数据中的group）的total和available值需要从其所有子节点（categories及其subCategories）中递归聚合而来。
目标数据结构示例：
[
{
"key": "group1",
"name": "groupname1",
"total": 20, // 由其子节点聚合而来 (5 + 15)
"available": 24, // 由其子节点聚合而来 (2 + 12)
"children": [
{
"key": "cat1",
"name": "category1",
"total": 5,
"available": 2,
"children": []
},
{
"key": "cat2",
"name": "category2",
"total": 15,
"available": 12,
"children": [
{
"key": "cat3",
"name": "category3",
"total": 15,
"available": 12,
"children": []
}
]
}
]
},
// ... 其他组
]可以看到，group1的total是其直接子节点cat1和cat2的total之和（5 + 15 = 20），available同理（2 + 12 = 24）。注意，cat2的total和available已经包含了其subCategories（cat3）的值。这意味着子节点的聚合计算需要在更深的层级完成。
立即学习“Java免费学习笔记（深入）”；
第一阶段：递归结构转换
首先，我们需要一个递归函数来将原始数据结构中的group、category和subCategory统一转换为目标结构中的key、name、total、available和children。
const formatter = (data) => {
const recursiveTree = (item) => {
// 处理顶层 group 结构
if (item.group) {
const {
group: { id, groupname }, // 原始 group 对象没有 total 和 available
categories
} = item;
return {
key: id,
name: groupname,
total: 0, // 初始设置为 0，等待后续聚合
available: 0, // 初始设置为 0，等待后续聚合
children: categories?.map(recursiveTree) // 递归处理子分类
};
}
// 处理 category 和 subCategory 结构
const { id, categoryName, total, available, subCategories } = item;
return {
key: id,
name: categoryName,
total: total || 0, // 使用原始 total/available 或默认值
available: available || 0, // 使用原始 total/available 或默认值
children: subCategories?.map(recursiveTree) || [] // 递归处理子分类，确保 children 始终为数组
};
};
return data.map(recursiveTree); // 对原始数组中的每个顶层项进行转换
};在这个阶段，recursiveTree函数能够正确地将id映射到key，将groupname或categoryName映射到name，并将嵌套的categories或subCategories映射到children。对于category和subCategory节点，它们的total和available值会直接从原始数据中获取。然而，对于顶层的group节点，由于原始group对象本身不包含total和available属性，它们被初始化为0。这正是需要后续聚合步骤的原因。
第二阶段：父节点数据聚合
在第一阶段完成后，我们得到了一个结构正确的树，但顶层父节点（group）的total和available尚未计算。由于这些值依赖于其所有子节点的汇总，我们需要在结构转换完成后，对顶层结果进行一次后处理。
// 假设 result 是第一阶段 formatter 函数的输出
const result = formatter(arr);
// 对顶层节点进行后处理，计算 total 和 available
for (const item of result) {
if (item.children && item.children.length > 0) {
// 使用 reduce 方法聚合所有子节点的 total
item.total = item.children.reduce((sum, child) => sum + (child.total || 0), 0);
// 使用 reduce 方法聚合所有子节点的 available
item.available = item.children.reduce((sum, child) => sum + (child.available || 0), 0);
}
}这个后处理步骤遍历了formatter函数返回的顶层节点数组。对于每个顶层节点，它检查是否存在子节点，然后使用Array.prototype.reduce()方法遍历其children数组，将所有子节点的total和available属性累加起来，并将结果赋值给父节点的相应属性。
值得注意的是，由于recursiveTree函数在处理category和subCategory时已经正确计算了它们的total和available（包括了更深层级的聚合），因此这里的reduce操作能够直接获取到正确的子节点汇总值。
完整解决方案
将两个阶段结合起来，我们可以得到一个完整的解决方案函数：
const consolidateRecursiveArray = (data) => {
// 第一阶段：递归结构转换
const recursiveTree = (item) => {
if (item.group) {
const {
group: { id, groupname },
categories
} = item;
return {
key: id,
name: groupname,
total: 0, // 临时占位，待后续聚合
available: 0, // 临时占位，待后续聚合
children: categories?.map(recursiveTree) || []
};
}
const { id, categoryName, total, available, subCategories } = item;
return {
key: id,
name: categoryName,
total: total || 0,
available: available || 0,
children: subCategories?.map(recursiveTree) || []
};
};
const transformedResult = data.map(recursiveTree);
// 第二阶段：父节点数据聚合
for (const item of transformedResult) {
if (item.children && item.children.length > 0) {
item.total = item.children.reduce((sum, child) => sum + (child.total || 0), 0);
item.available = item.children.reduce((sum, child) => sum + (child.available || 0), 0);
}
}
return transformedResult;
};
// 使用示例
const finalResult = consolidateRecursiveArray(arr);
console.log(JSON.stringify(finalResult, null, 2));关键点与注意事项
- 递归深度与性能: 这种递归处理方式对于大多数常见的数据深度是有效的。然而，如果数组的嵌套层级非常深（例如，数千层），可能会导致JavaScript引擎的栈溢出错误。对于极端情况，可以考虑使用迭代而非递归的方式来处理。
- 数据完整性与默认值: 在聚合计算中，使用child.total || 0和child.available || 0是良好的实践，它确保即使某个子节点缺少total或available属性，计算也不会中断，而是将其视为0。这增加了代码的健壮性。
- 两阶段处理的优势: 将结构转换和父节点聚合分为两个明确的阶段，使得代码逻辑更加清晰。第一阶段专注于构建正确的树形结构和计算叶子节点/中间节点的直接属性，第二阶段则专注于解决顶层节点的聚合依赖问题。
- 通用性: 这种模式不仅适用于total和available属性，也可以推广到任何需要从子节点聚合到父节点的数值型属性（例如，count、priceSum等）。
总结
通过上述两阶段的方法，我们成功地将一个复杂的递归数组结构转换为目标树形结构，并准确计算了顶层父节点的聚合统计数据。这种分步处理的策略在处理复杂的嵌套数据转换和汇总需求时非常有效，它提高了代码的可读性和可维护性，同时保证了计算的准确性。理解并掌握这种数据处理模式，对于前端开发者处理各种树形或图状数据结构具有重要意义。
