本文详细阐述了如何运用 javascript 的 `reduce` 方法对复杂对象数组进行深度转换与聚合。教程通过一个具体示例，展示了如何逐层构建嵌套结构，并根据 `medico`、`rateio` 和 `convenio` 等键对数据进行分组及 `subtotal` 求和，以实现高效且结构化的数据重塑。
JavaScript reduce 方法基础
在深入探讨复杂数据转换之前，我们首先回顾一下 Array.prototype.reduce() 方法。reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数，将其结果汇总为单个返回值。
reducer 函数接收四个参数：
accumulator (累加器)：上一次调用 reducer 函数的返回值，或者是 initialValue。currentValue (当前值)：数组中正在处理的当前元素。currentIndex (当前索引)：数组中正在处理的当前元素的索引。array (源数组)：调用 reduce() 的数组本身。
reduce() 方法通常用于将数组扁平化、计算总和、构建新对象等场景，其灵活性使其成为处理复杂数据转换的强大工具。
复杂数据转换需求分析
假设我们有一个扁平化的对象数组，其中包含 medico（医生）、rateio（费率）、convenio（协议）和 subtotal（小计）等信息：
立即学习“Java免费学习笔记（深入）”；
const arr = [ { medico: "med1", rateio: "rat1", convenio: "conv1", subtotal: 10 }, { medico: "med2", rateio: "rat2", convenio: "conv2", subtotal: 10 }, { medico: "med2", rateio: "rat2", convenio: "conv2", subtotal: 20 }, { medico: "med1", rateio: "rat1", convenio: "conv3", subtotal: 20 }, { medico: "med1", rateio: "rat1", convenio: "conv3", subtotal: 25 }, { medico: "med2", rateio: "rat3", convenio: "conv4", subtotal: 15 }, { medico: 'med2', rateio: 'rat4', convenio: 'conv3', subtotal: 10 },];
我们的目标是将这个扁平数组转换为一个高度结构化的嵌套数组，具体要求如下：
按 medico 分组：最外层以 medico 为键进行分组。按 rateio 分组：在每个 medico 组下，进一步按 rateio 分组。按 convenio 分组并汇总 subtotal：在每个 rateio 组下，按 convenio 分组，并将其对应的 subtotal 值进行累加，形成 sum_subtotal。
期望的输出结构如下：
const result = [ {medico: "med1", grantotals:[ { rateio: "rat1", grandtotals: [ { convenio: "conv1", sum_subtotal: 10 }, { convenio: "conv3", sum_subtotal: 45 } // 20 + 25 ] } ]}, {medico: "med2", grantotals:[ { rateio: "rat2", grandtotals: [ { convenio: "conv2", sum_subtotal: 30 }, // 10 + 20 ] }, { rateio: "rat3", grandtotals: [ { convenio: "conv4", sum_subtotal: 15 }, ] }, { rateio: "rat4", grandtotals: [ { convenio: "conv3", sum_subtotal: 10 }, ] } ]}];
使用 reduce 实现层级聚合
为了实现上述复杂转换，我们将利用 reduce 方法的累加器来逐步构建目标结构。核心思路是：对于原始数组中的每一个元素，我们都尝试在累加器中查找其对应的 medico、rateio 和 convenio 层级。如果存在，则更新 subtotal；如果不存在，则创建新的层级对象并添加到相应的位置。
示例代码
const arr = [ { medico: "med1", rateio: "rat1", convenio: "conv1", subtotal: 10 }, { medico: "med2", rateio: "rat2", convenio: "conv2", subtotal: 10 }, { medico: "med2", rateio: "rat2", convenio: "conv2", subtotal: 20 }, { medico: "med1", rateio: "rat1", convenio: "conv3", subtotal: 20 }, { medico: "med1", rateio: "rat1", convenio: "conv3", subtotal: 25 }, { medico: "med2", rateio: "rat3", convenio: "conv4", subtotal: 15 }, { medico: "med2", rateio: "rat4", convenio: "conv3", subtotal: 10 },];const result = arr.reduce((acc, obj) => { // 1. 查找或创建 medico 层级 let existingMedico = acc.find((item) => item.medico === obj.medico); if (!existingMedico) { existingMedico = { medico: obj.medico, grantotals: [], }; acc.push(existingMedico); } // 2. 在 medico 层级下查找或创建 rateio 层级 let existingRateio = existingMedico.grantotals.find( (item) => item.rateio === obj.rateio ); if (!existingRateio) { existingRateio = { rateio: obj.rateio, grandtotals: [], }; existingMedico.grantotals.push(existingRateio); } // 3. 在 rateio 层级下查找或创建 convenio 层级并更新 subtotal let existingConvenio = existingRateio.grandtotals.find( (item) => item.convenio === obj.convenio ); if (existingConvenio) { existingConvenio.sum_subtotal += obj.subtotal; } else { existingRateio.grandtotals.push({ convenio: obj.convenio, sum_subtotal: obj.subtotal, }); } return acc;}, []);console.log(JSON.stringify(result, null, 2));
代码逐行解析
arr.reduce((acc, obj) => { … }, []);
reduce 方法被调用在原始数组 arr 上。acc 是累加器，初始化为一个空数组 []，它将逐步构建成最终的目标结构。obj 是 arr 中当前正在处理的元素。
查找或创建 medico 层级
Visual Studio IntelliCode
微软VS平台的 AI 辅助开发工具
46 查看详情
let existingMedico = acc.find((item) => item.medico === obj.medico);if (!existingMedico) { existingMedico = { medico: obj.medico, grantotals: [] }; acc.push(existingMedico);}
acc.find(…)：尝试在累加器 acc（即已构建的 medico 列表）中查找当前 obj.medico 是否已存在。如果 existingMedico 为 null 或 undefined（表示未找到），则创建一个新的 medico 对象，并将其 grantotals 数组初始化为空，然后将此新对象推入 acc。无论找到还是创建，existingMedico 都会指向当前 medico 的对象引用，以便后续操作。
在 medico 层级下查找或创建 rateio 层级
let existingRateio = existingMedico.grantotals.find( (item) => item.rateio === obj.rateio);if (!existingRateio) { existingRateio = { rateio: obj.rateio, grandtotals: [] }; existingMedico.grantotals.push(existingRateio);}
逻辑与 medico 层级类似。在 existingMedico.grantotals 数组中查找 obj.rateio。如果未找到，则创建一个新的 rateio 对象，初始化其 grandtotals 数组，并推入 existingMedico.grantotals。
在 rateio 层级下查找或创建 convenio 层级并更新 subtotal
let existingConvenio = existingRateio.grandtotals.find( (item) => item.convenio === obj.convenio);if (existingConvenio) { existingConvenio.sum_subtotal += obj.subtotal;} else { existingRateio.grandtotals.push({ convenio: obj.convenio, sum_subtotal: obj.subtotal, });}
在 existingRateio.grandtotals 数组中查找 obj.convenio。如果找到：说明该 convenio 已存在，直接将其 sum_subtotal 属性加上当前 obj.subtotal。如果未找到：创建一个新的 convenio 对象，设置其 convenio 和 sum_subtotal（初始值为 obj.subtotal），然后将其推入 existingRateio.grandtotals。
return acc;
在每次迭代结束时，返回更新后的累加器 acc，它将作为下一次迭代的 accumulator。
性能考量与优化方案
上述 reduce 实现虽然功能正确且易于理解，但在处理大型数据集时可能会遇到性能瓶颈。主要原因是使用了 Array.prototype.find() 方法进行层层查找。find() 方法的时间复杂度为 O(N)，在最坏情况下，每次迭代都需要遍历数组。如果 medico、rateio、convenio 的种类繁多，整个转换过程的复杂度将显著增加。
为了优化性能，我们可以考虑使用 JavaScript 的 Map 对象作为中间缓存，将查找操作的时间复杂度从 O(N) 降低到 O(1)。
基于 Map 的优化思路：
主累加器仍是数组： 最终结果仍是一个数组。引入 Map 进行快速查找： 在 reduce 的累加器中，除了最终结果数组，还可以维护一个或多个 Map 对象，用于存储已处理的 medico、rateio、convenio 对象的引用，以其唯一标识符作为键。例如，可以有一个 medicoMap，键是 medico 名称，值是对应的 medico 对象。类似地，每个 medico 对象内部可以维护一个 rateioMap，每个 rateio 对象内部维护一个 convenioMap。查找逻辑： 每次处理 obj 时，首先通过 medicoMap.get(obj.medico) 快速查找。如果不存在，则创建新 medico 对象，添加到结果数组，并更新 medicoMap。嵌套查找： 对于 rateio 和 convenio，也采用相同的方式，利用它们各自的 Map 进行 O(1) 查找和更新。
这种 Map 优化的方法可以显著提升处理大量数据的效率，尤其是在唯一键值较多的情况下。
总结
Array.prototype.reduce() 是 JavaScript 中一个极其强大的数组方法，能够实现从简单的聚合到复杂的数据结构转换。通过本教程，我们学习了如何利用 reduce 方法，结合条件判断和层级查找，将一个扁平化的对象数组转换为多层级嵌套并带有聚合计算的复杂结构。
在实际应用中，理解 reduce 的工作原理及其在不同场景下的适用性至关重要。同时，对于大型数据集，我们也应关注性能问题，并考虑使用 Map 等数据结构进行优化，以确保代码的效率和可扩展性。掌握这些技巧，将使您在处理 JavaScript 数据转换任务时更加得心应手。
以上就是JavaScript reduce 高级用法：多层级数据结构转换与汇总的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/875781.html
微信扫一扫 
支付宝扫一扫 
