本教程详细阐述了如何在JavaScript中对数组对象进行特殊分组：将具有相同“number”属性的连续项聚合到独立的子数组中，同时保持原始顺序。通过利用Array.prototype.reduce()方法，结合对前一个元素的条件判断，可以高效地实现这一复杂的数据转换，最终将一维对象数组转换为二维分组数组，适用于需要按序处理连续相同属性数据的场景。
理解特殊分组需求
在数据处理中，我们经常遇到需要对数组元素进行分组的场景。但有时，分组的条件并非简单地基于某个属性值，而是要求将“连续出现”的、具有相同特定属性值的元素聚合在一起。例如，给定一个对象数组，每个对象包含name、number和order属性，我们的目标是将number属性值连续相同的对象归入同一个子数组。
原始数据示例：
[ {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} ]]
注意，尽管 F 的 number 也是 1，但因为它不与 A, B, C 连续，所以它被分到了一个新的子数组中。这与传统的去重或简单分组有所不同。
解决方案：使用 Array.prototype.reduce()
Array.prototype.reduce() 方法是处理数组累积和转换的强大工具。它遍历数组的每个元素，并将其“缩减”为单个值。在这个场景中，我们将把原始数组“缩减”为一个包含子数组的数组。
立即学习“Java免费学习笔记（深入）”；
核心思路
初始化累加器： 累加器（a）将是一个空数组 []，用于存储最终的分组子数组。遍历元素： 对于数组中的每个当前元素（c）：判断是否开始新组： 检查当前元素的 number 属性是否与前一个元素的 number 属性不同。如果是数组的第一个元素 (i === 0)，或者当前元素的 number 与前一个元素的 number 不一致，这意味着一个新的连续分组开始了。此时，在累加器中创建一个新的子数组，并将当前元素作为其第一个成员。否则（当前元素的 number 与前一个元素的 number 相同），将当前元素添加到累加器中最后一个（即当前正在构建的）子数组中。返回累加器： reduce 操作结束后，累加器就是我们期望的分组结果。
示例代码
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, current, index, array) => { // 检查当前元素的number属性是否与前一个元素的number属性不同 // 或者当前元素是数组的第一个元素 if (index === 0 || array[index - 1]?.number !== current.number) { // 如果不同，开始一个新的子数组 accumulator.push([current]); } else { // 如果相同，将当前元素添加到最后一个子数组中 accumulator[accumulator.length - 1].push(current); } return accumulator; // 返回累加器}, []); // 初始累加器为空数组console.log(result);
代码精简（使用逗号表达式）
在JavaScript中，逗号运算符（,）可以用于从左到右评估每个操作数，并返回最后一个操作数的值。这在某些情况下可以用于编写更紧凑的代码，特别是在箭头函数中省略大括号和return语句时。
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((a,c,i,d)=> (d[i-1]?.number!==c.number ? a.push([c]) : a[a.length-1].push(c), a), []);// 解释：// (d[i-1]?.number!==c.number ? a.push([c]) : a[a.length-1].push(c), a)// 这是一个逗号表达式。它会先执行问号表达式（三元运算符），// 无论三元表达式的结果是什么，逗号表达式的最终结果都是逗号后面的 `a` (累加器)。// 这样就避免了显式写 `return a;`console.log(result);
这种精简写法利用了三元运算符和逗号运算符的特性，使代码更加紧凑。d[i-1]?.number 使用了可选链操作符 (?.) 来安全地访问前一个元素的 number 属性，避免在 i=0 时因 d[-1] 为 undefined 而报错。
注意事项与扩展
数据顺序的重要性： 此方法的核心在于“连续”分组。如果原始数据不是按 order 属性排序的，或者分组条件依赖于其他非顺序属性，则需要先对数据进行预处理（例如排序）。属性类型： 本例中基于 number 属性进行分组，但同样适用于字符串或其他可比较的属性类型。性能： reduce 方法对数组进行一次遍历，其时间复杂度为 O(n)，其中 n 是数组的长度，效率较高。可读性： 尽管逗号表达式可以使代码更紧凑，但在团队协作或复杂逻辑中，明确的 if/else 结构可能提供更好的可读性和维护性。根据项目规范和个人偏好选择。空数组处理： 如果 data 数组为空，reduce 方法会返回初始值 []，符合预期。
总结
通过巧妙地运用 Array.prototype.reduce() 方法，并结合对前一个元素的条件判断，我们能够高效且优雅地解决按顺序分组连续重复项的特殊需求。这种模式不仅适用于本例中的数字属性，也能够推广到其他需要基于元素间顺序关系进行复杂分组的场景，是JavaScript数据处理中一个非常有用的技巧。理解并掌握 reduce 的强大功能，将极大地提升你在处理复杂数据转换时的能力。
以上就是JavaScript 中根据顺序分组连续重复项的教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1513654.html
微信扫一扫 
支付宝扫一扫 
