1. 理解原始数据与目标结构
在处理前端数据展示或后端数据处理时，我们经常会遇到需要将某种特定结构的嵌套数据转换为更通用、更易于操作的树形结构。本教程将以一个具体的例子来演示这一过程。
原始数据结构示例：
我们有一个包含 group 和 categories 的数组，其中 categories 可以包含 subCategories，形成多层嵌套。每个分类项都包含 id、categoryName、total 和 available 等属性。
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: []
}
]
}
];目标数据结构示例：
立即学习“Java免费学习笔记（深入）”；
我们希望将上述数据转换为一个统一的递归结构，每个节点都包含 key、name、total、available 和 children 属性。其中，total 和 available 属性对于顶层的 group 节点，需要从其所有子节点（包括深层子节点）的相应值中聚合计算得出。
[
{
"key": "group1",
"name": "groupname1",
"total": 35, // 从其子节点聚合 (cat1.total + cat2.total)
"available": 14, // 从其子节点聚合 (cat1.available + cat2.available)
"children": [
{
"key": "cat1",
"name": "category1",
"total": 5,
"available": 2,
"children": []
},
{
"key": "cat2",
"name": "category2",
"total": 30, // 包含cat3的total
"available": 24, // 包含cat3的available
"children": [
{
"key": "cat3",
"name": "category3",
"total": 15,
"available": 12,
"children": []
}
]
}
]
},
// ... 其他组
]注意： 目标结构中 total 和 available 的计算方式需要特别注意。cat2 的 total 应该是它自身的值加上 cat3 的 total。而 group1 的 total 则是 cat1 的 total 加上 cat2 （已包含 cat3）的 total。这意味着聚合需要从最底层向上进行。
2. 构建基础递归树结构
首先，我们需要一个函数来遍历原始数组，并将其转换为目标结构中 key、name 和 children 的基本形式。对于 total 和 available，叶子节点（没有 subCategories 的 category）可以直接使用其自身的值，而对于中间节点和顶层节点，我们先将其初始化为0或根据自身属性赋值，后续再进行聚合。
const transformToRecursiveTree = (data) => {
const recursiveTree = (item) => {
// 处理组（group）节点
if (item.group) {
const {
group: { id, groupname },
categories
} = item;
// 初始时，group的total和available设为0，待后续聚合
return {
key: id,
name: groupname,
total: 0, // 初始设为0，待聚合
available: 0, // 初始设为0，待聚合
children: categories?.map(recursiveTree) || []
};
}
// 处理分类（category）或子分类（subCategory）节点
const { id, categoryName, total, available, subCategories } = item;
// 对于分类节点，其total和available需要包含其子分类的聚合值
// 这里先返回自身值，聚合逻辑在后续处理
const children = subCategories?.map(recursiveTree) || [];
// 在返回当前分类节点前，先聚合其子分类的total和available
const aggregatedTotal = children.reduce((sum, child) => sum + child.total, total || 0);
const aggregatedAvailable = children.reduce((sum, child) => sum + child.available, available || 0);
return {
key: id,
name: categoryName,
total: aggregatedTotal,
available: aggregatedAvailable,
children: children
};
};
return data.map(recursiveTree);
};代码解析：
- transformToRecursiveTree 是主函数，它会遍历顶层数组的每个 group 项。
- recursiveTree 是一个内部递归函数，用于处理单个节点。
- 当 item 具有 group 属性时，它被视为一个组节点。我们提取 id 和 groupname 作为 key 和 name，并递归处理其 categories 作为 children。此时，total 和 available 暂时设置为 0，因为它们需要从子节点聚合。
- 当 item 是一个 category 或 subCategory 时，我们提取 id、categoryName、total、available。
- 关键在于 category 节点的 total 和 available 计算。我们首先递归处理其 subCategories 得到 children，然后使用 reduce 方法将这些 children 的 total 和 available 累加到当前 category 的 total 和 available 上。这样，total 和 available 的聚合是从最底层向上逐级完成的。
3. 聚合顶层父节点（Group）的数值
上述 transformToRecursiveTree 函数已经能够正确计算所有 category 和 subCategory 节点的 total 和 available，使其包含所有子孙节点的聚合值。现在，我们只需要对顶层的 group 节点进行后处理，计算它们的 total 和 available。
由于 group 节点的 children（即 categories）已经通过 recursiveTree 函数处理过，它们的 total 和 available 属性已经是聚合后的正确值。因此，我们只需遍历 transformToRecursiveTree 的结果，对每个顶层 group 节点，将其 children 的 total 和 available 进行累加即可。
将上述 transformToRecursiveTree 函数修改为最终版本：
const consolidateRecursiveArray = (data) => {
// 阶段1: 构建基础递归树并聚合子分类的total/available
const recursiveTreeBuilder = (item) => {
// 处理组（group）节点
if (item.group) {
const {
group: { id, groupname },
categories
} = item;
return {
key: id,
name: groupname,
total: 0, // 初始设为0，将在阶段2聚合
available: 0, // 初始设为0，将在阶段2聚合
children: categories?.map(recursiveTreeBuilder) || []
};
}
// 处理分类（category）或子分类（subCategory）节点
const { id, categoryName, total, available, subCategories } = item;
const children = subCategories?.map(recursiveTreeBuilder) || [];
// 在返回当前分类节点前，聚合其子分类的total和available
const currentTotal = total || 0;
const currentAvailable = available || 0;
const aggregatedTotal = children.reduce((sum, child) => sum + child.total, currentTotal);
const aggregatedAvailable = children.reduce((sum, child) => sum + child.available, currentAvailable);
return {
key: id,
name: categoryName,
total: aggregatedTotal,
available: aggregatedAvailable,
children: children
};
};
const result = data.map(recursiveTreeBuilder);
// 阶段2: 后处理，聚合顶层group节点的total和available
for (const item of result) {
if (item.children && item.children.length > 0) {
item.total = item.children.reduce((sum, child) => sum + child.total, 0);
item.available = item.children.reduce((sum, child) => sum + child.available, 0);
}
}
return result;
};完整示例代码：
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: []
}
]
}
];
const consolidateRecursiveArray = (data) => {
// 阶段1: 构建基础递归树并聚合子分类的total/available
const recursiveTreeBuilder = (item) => {
// 处理组（group）节点
if (item.group) {
const {
group: { id, groupname },
categories
} = item;
return {
key: id,
name: groupname,
total: 0, // 初始设为0，将在阶段2聚合
available: 0, // 初始设为0，将在阶段2聚合
children: categories?.map(recursiveTreeBuilder) || []
};
}
// 处理分类（category）或子分类（subCategory）节点
const { id, categoryName, total, available, subCategories } = item;
const children = subCategories?.map(recursiveTreeBuilder) || [];
// 在返回当前分类节点前，聚合其子分类的total和available
const currentTotal = total || 0;
const currentAvailable = available || 0;
const aggregatedTotal = children.reduce((sum, child) => sum + child.total, currentTotal);
const aggregatedAvailable = children.reduce((sum, child) => sum + child.available, currentAvailable);
return {
key: id,
name: categoryName,
total: aggregatedTotal,
available: aggregatedAvailable,
children: children
};
};
const result = data.map(recursiveTreeBuilder);
// 阶段2: 后处理，聚合顶层group节点的total和available
for (const item of result) {
if (item.children && item.children.length > 0) {
item.total = item.children.reduce((sum, child) => sum + child.total, 0);
item.available = item.children.reduce((sum, child) => sum + child.available, 0);
}
}
return result;
};
const consolidatedData = consolidateRecursiveArray(arr);
console.log(JSON.stringify(consolidatedData, null, 2));4. 注意事项与总结
注意事项：
- 递归深度： 这种方法能够处理任意深度的嵌套层级，因为 recursiveTreeBuilder 函数会一直向下递归，直到遇到没有 subCategories 的叶子节点。
- 数据完整性： 确保原始数据中的 total 和 available 属性存在且为数值类型。代码中使用了 total || 0 来处理可能缺失或为 null/undefined 的情况，将其视为 0。
-
性能考量： 整个过程分为两个主要阶段：
- 第一阶段 (map + 递归)：构建树形结构并自底向上聚合 category 级别的 total/available。
- 第二阶段 (for...of 循环)：聚合顶层 group 节点的 total/available。 对于大多数应用场景，这种两阶段处理方式的性能是可接受的。如果数据集非常庞大，且对性能有极致要求，可以考虑在递归函数中通过返回聚合值来尝试单次遍历完成，但这通常会增加递归逻辑的复杂性。
- 灵活性： 如果未来需要聚合其他数值型属性，只需在 reduce 逻辑中添加相应的累加操作即可。
总结：
本教程提供了一种清晰且高效的方法来处理复杂的递归数组数据转换任务。通过将问题分解为两个逻辑阶段——首先构建基础的递归树并处理中间节点的聚合，然后对顶层父节点进行后处理以完成最终的聚合——我们成功地实现了将原始嵌套数据转换为具有正确聚合值的统一树形结构。这种分步处理策略提高了代码的可读性和可维护性，是处理类似数据转换问题的有力工具。
