本教程探讨了如何使用 JavaScript 对数组中的对象进行分组，其核心在于根据对象某个属性的连续相同值来创建子数组。与传统去重不同，此方法侧重于保持原始顺序并识别连续的相同值序列。我们将详细解析如何巧妙运用 Array.prototype.reduce() 方法，实现高效且简洁的数据结构转换，适用于需要按特定顺序对数据进行分类的场景。
理解问题：连续分组的挑战
在数据处理中，我们经常需要对数组中的元素进行分组。然而，有时分组的逻辑并非基于简单的属性值相等，而是要求只有当某个属性的值与前一个元素的该属性值不同时，才开始一个新的分组。如果值相同，则当前元素应归入上一个分组。这与常见的去重或按属性值聚合有所不同，它强调的是“连续性”和“顺序性”。
例如，给定以下数据结构：
[ {name: A, number: 1, order: 1}, {name: B, number: 1, order: 2}, {name: C, number: 1, order: 3}, {name: D, number: 2, order: 4}, {name: E, number: 2, order: 5}, {name: F, number: 1, order: 6}]
我们的目标是将其转换为：
[ [ {name: A, number: 1, order: 1}, {name: B, number: 1, order: 2}, {name: C, number: 1, order: 3}, ], [ {name: D, number: 2, order: 4}, {name: E, number: 2, order: 5}, ], [ {name: F, number: 1, order: 6} ]]
可以看到，number 属性为 1 的前三个对象被分到一组，接着 number 属性变为 2，因此 D 和 E 形成新组。最后，number 属性再次变为 1，F 独立形成一个新组。这种分组方式严格依赖于元素的相对顺序。
核心解决方案：Array.prototype.reduce()
Array.prototype.reduce() 方法是处理数组累积和转换的强大工具。它遍历数组的每个元素，并将其“缩减”为单个值（可以是任何类型，包括数组或对象）。在本例中，我们将利用 reduce 来构建一个包含多个子数组的数组，每个子数组代表一个连续的分组。
立即学习“Java免费学习笔记（深入）”；
reduce 方法接受一个回调函数和一个可选的初始值。回调函数通常有四个参数：
accumulator (累加器): 上一次回调函数执行的返回值，或者是 initialValue。currentValue (当前值): 数组中正在处理的当前元素。currentIndex (当前索引): 数组中正在处理的当前元素的索引。array (源数组): reduce 被调用的数组本身。
通过巧妙地利用 currentIndex 和 array 参数，我们可以访问到当前元素的前一个元素，从而判断是否需要开始一个新的分组。
代码示例与解析
以下是实现上述分组逻辑的 JavaScript 代码示例：
const data = [ {"name":"A","number":1,"order":1}, {"name":"B","number":1,"order":2}, {"name":"C","number":1,"order":3}, {"name":"D","number":2,"order":4}, {"name":"E","number":2,"order":5}, {"name":"F","number":1,"order":6}];let result = data.reduce((accumulator, currentObject, currentIndex, sourceArray) => (sourceArray[currentIndex - 1]?.number !== currentObject.number ? accumulator.push([currentObject]) : accumulator[accumulator.length - 1].push(currentObject), accumulator), []);console.log(result);
代码解析：
data.reduce((…), []):
我们对 data 数组调用 reduce 方法。第二个参数 [] 是 accumulator 的初始值，表示最终结果将是一个空数组（[[…], […]]）。
回调函数参数:
accumulator (简写为 a): 这是一个数组，用于存储最终的分组结果，例如 [[…], […]]。currentObject (简写为 c): 数组中当前正在处理的对象。currentIndex (简写为 i): currentObject 在 sourceArray 中的索引。sourceArray (简写为 d): 原始的 data 数组。
核心逻辑：sourceArray[currentIndex – 1]?.number !== currentObject.number:
这行代码是判断是否需要开启新分组的关键。sourceArray[currentIndex – 1]：尝试获取当前元素的前一个元素。?. (可选链操作符): 这是一个非常重要的特性。当 currentIndex 为 0 时（即处理第一个元素时），currentIndex – 1 为 -1，sourceArray[-1] 将是 undefined。可选链操作符确保在 sourceArray[currentIndex – 1] 为 null 或 undefined 时，不会尝试访问其 number 属性而抛出错误，而是直接返回 undefined。undefined !== currentObject.number：对于第一个元素，undefined 永远不会等于任何有效的 number 值，因此条件为真，这确保了第一个元素总是开始一个新的分组。对于后续元素，如果当前元素的 number 属性与前一个元素的 number 属性不同，则条件为真。
条件分支：? accumulator.push([currentObject]) : accumulator[accumulator.length – 1].push(currentObject):
如果条件为真（需要开始新分组）: accumulator.push([currentObject])。将一个包含 currentObject 的新数组推入 accumulator。例如，[[group1], [currentObject]]。如果条件为假（与前一个元素同组）: accumulator[accumulator.length – 1].push(currentObject)。将 currentObject 推入 accumulator 中最后一个子数组。例如，[[item1, item2, currentObject]]。
逗号表达式：, accumulator:
在 JavaScript 中，逗号操作符 (expr1, expr2, … exprN) 会依次执行每个表达式，并返回最后一个表达式的值。在这里，无论 push 操作是添加到新数组还是现有数组，我们都需要确保 reduce 回调函数最终返回 accumulator 本身，以便在下一次迭代中继续累积。通过将 accumulator 作为逗号表达式的最后一个部分，我们避免了显式使用 return 关键字，使代码更加紧凑。
关键点与注意事项
顺序依赖性: 此方法严格依赖于原始数组中元素的顺序。如果原始数组的顺序发生变化，分组结果也会随之变化。第一个元素处理: 通过 ?. 可选链操作符，巧妙地处理了数组的第一个元素，使其自动成为新分组的开始。性能: reduce 方法只进行一次遍历，时间复杂度为 O(n)，其中 n 是数组的长度，效率较高。可读性: 尽管代码紧凑，但对于不熟悉 reduce、可选链和逗号表达式的开发者来说，可能需要一些时间来理解。在实际项目中，如果团队成员对这些高级特性不熟悉，可以考虑将其拆分为更易读的 if/else 结构，或者添加详细注释。通用性: 此模式可以轻松修改以根据其他属性（例如 name 或 order）进行连续分组，只需更改比较的属性即可。
总结
通过巧妙地运用 Array.prototype.reduce() 方法结合索引访问和可选链操作符，我们可以高效地解决按顺序对连续相同属性值进行分组的问题。这种方法不仅代码简洁，而且执行效率高，是处理类似数据转换场景的强大工具。理解其背后的逻辑，特别是对 reduce 累加器状态的管理和对前一个元素的判断，是掌握此技巧的关键。
以上就是JavaScript 数组分组技巧：按顺序连续属性值分组对象的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1513662.html
微信扫一扫 
支付宝扫一扫 
