本文旨在介绍如何将复杂的嵌套JavaScript数组结构转换为具有 key、name 和 children 的树形结构。文章将重点演示如何通过一个后处理步骤，为顶层节点（如分组）计算其子节点（如分类）的 total 和 available 聚合值，以满足数据展示和业务逻辑的需求。
引言
在前端开发中，我们经常会遇到需要将后端返回的扁平或多层嵌套数据转换为更直观、更易于操作的树形结构。这种转换不仅涉及到数据字段的映射，还可能需要在树形结构的父节点上聚合其子节点的某些数值，例如计算一个分组下的所有分类的总量。本文将通过一个具体的案例，详细讲解如何实现这种递归的数据结构转换与父级数据聚合。
原始数据结构
假设我们有以下嵌套的JavaScript数组，它代表了按组分类的商品信息，每个分类下可能还有子分类：
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: [] } ] } ];
目标数据结构
我们的目标是将上述数据转换为以下树形结构。注意，顶层 group 节点的 total 和 available 字段需要由其直接子节点（categories）的相应值聚合而来。
[ { "key": "group1", "name": "groupname1", "total": 20, // 5 (cat1) + 15 (cat2) "available": 14, // 2 (cat1) + 12 (cat2) "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": [] } ] } ] }, { "key": "group2", "name": "groupname2", "total": 75, // 25 (cat4) + 50 (cat5) "available": 47, // 22 (cat4) + 25 (cat5) "children": [ { "key": "cat4", "name": "category4", "total": 25, "available": 22, "children": [] }, { "key": "cat5", "name": "category5", "total": 50, "available": 25, "children": [] } ] } ]
构建基本树形结构
首先，我们可以通过一个递归函数来实现基础的结构转换，将原始数据映射为包含 key、name 和 children 的树形节点。
const formatter = (data) => { const recursiveTree = (item) => { // 判断当前项是分组还是分类 if (item.group) { // 如果是分组 const { group: { id, groupname }, categories } = item; return { key: id, name: groupname, // 初始时，group的total和available可能不存在或为0 total: 0, available: 0, children: categories?.map(recursiveTree) // 递归处理子分类 }; } else { // 如果是分类（或子分类） const { id, categoryName, total, available, subCategories } = item; return { key: id, name: categoryName, total: total || 0, // 分类本身的total和available是已知的 available: available || 0, children: subCategories?.map(recursiveTree) || [] // 递归处理子分类，如果不存在则为空数组 }; } }; return data.map(recursiveTree); }; // 示例调用 (此时group的total和available仍为0) // const initialTree = formatter(arr); // console.log(JSON.stringify(initialTree, null, 2));
在上述 recursiveTree 函数中：
- 我们通过检查 item.group 属性来区分处理分组和分类。
- 对于分组 (group)，我们提取 id 和 groupname 作为 key 和 name。此时 total 和 available 被初始化为 0，因为原始 group 对象本身不包含这些聚合信息。其 children 属性通过递归调用 recursiveTree 处理 categories 数组。
- 对于分类 (category)，我们提取 id、categoryName、total 和 available。其 children 属性通过递归调用 recursiveTree 处理 subCategories 数组。
经过这一步，我们已经成功地将数据转换成了所需的树形结构，并且分类和子分类的 total 和 available 值也已正确设置。然而，顶层 group 节点的 total 和 available 仍然是 0，这不符合我们的聚合要求。
聚合父级数据：解决方案
为了解决顶层 group 节点的 total 和 available 聚合问题，我们可以在完成初步的结构转换之后，增加一个后处理步骤。这个步骤将遍历已生成的树形结构中的顶层节点，并根据其子节点的 total 和 available 值进行计算。
const formatterWithAggregation = (data) => { const recursiveTree = (item) => { if (item.group) { const { group: { id, groupname }, categories } = item; return { key: id, name: groupname, total: 0, // 初始值仍为0，将在后处理中更新 available: 0, // 初始值仍为0，将在后处理中更新 children: categories?.map(recursiveTree) }; } else { const { id, categoryName, total, available, subCategories } = item; return { key: id, name: categoryName, total: total || 0, available: available || 0, children: subCategories?.map(recursiveTree) || [] }; } }; // 第一步：执行基础的树形结构转换 const result = data.map(recursiveTree); // 第二步：后处理，计算顶层节点的聚合值 for (const item of result) { if (item.children && item.children.length > 0) { // 聚合子节点的 total item.total = item.children.reduce((sum, child) => sum + (child.total || 0), 0); // 聚合子节点的 available item.available = item.children.reduce((sum, child) => sum + (child.available || 0), 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 formatterWithAggregation = (data) => { // 递归函数：用于将原始数据转换为树形结构 const recursiveTree = (item) => { if (item.group) { // 处理分组节点 const { group: { id, groupname }, categories } = item; return { key: id, name: groupname, total: 0, // 分组的total和available在第一步中先设为0 available: 0, children: categories?.map(recursiveTree) // 递归处理子分类 }; } else { // 处理分类或子分类节点 const { id, categoryName, total, available, subCategories } = item; return { key: id, name: categoryName, total: total || 0, // 分类节点的total和available直接取自原始数据 available: available || 0, children: subCategories?.map(recursiveTree) || [] // 递归处理子分类，若无则为空数组 }; } }; // 第一步：将原始数据映射为初步的树形结构 const result = data.map(recursiveTree); // 第二步：遍历顶层结果，计算每个分组的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); } } return result; }; const finalResult = formatterWithAggregation(arr); console.log(json.stringify(finalResult, null, 2));
注意事项
- 聚合深度： 当前的解决方案仅聚合了顶层分组节点的直接子节点（即分类）的 total 和 available。如果需要实现多层级聚合（例如，一个分组的 total 是其所有子分类和子子分类的总和），则需要修改 recursiveTree 函数，使其在返回时就计算并传递聚合值，这通常涉及到后序遍历的思想，即先处理子节点，然后父节点根据子节点返回的值进行计算。
- 字段健壮性： 在聚合计算中，使用了 child.total || 0 和 child.available || 0，这确保了即使子节点缺少这些字段，计算也不会出错，而是将其视为 0。
- 性能考虑： 对于非常大的数据集，map 和 for…of 循环的组合可能会有性能开销。但在大多数常见的应用场景中，这种两步走的策略是高效且易于理解的。
- 可扩展性： 如果未来需要聚合更多字段，只需在 reduce 逻辑中添加相应的计算即可，代码结构依然清晰。
总结
通过结合递归函数进行结构转换和后续的迭代聚合，我们能够有效地将复杂的嵌套数组数据转换为所需的树形结构，并准确地计算父节点的聚合值。这种分步处理的策略使得代码逻辑更加清晰，易于维护和扩展。理解递归在数据结构转换中的应用，以及如何通过后处理步骤补充数据，是处理复杂数据场景的关键技能。
评论（已关闭）
评论已关闭