JavaScript重复项分组技巧详解

本教程深入解析了JavaScript中一种特殊的数组对象分组技巧：**JavaScript连续重复项分组**。针对具有相同“number”属性的连续对象，如何高效地将它们聚合到独立的子数组中，并保持原始顺序？本文将通过`Array.prototype.reduce()`方法，结合条件判断，提供详细的代码示例和精简写法，帮助你理解并掌握这种复杂的数据转换方法。无论你是前端工程师还是JavaScript爱好者，都能从本教程中学习到实用的技巧，提升数据处理能力，解决实际开发中遇到的特殊分组需求。

本教程详细阐述了如何在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() 方法是处理数组累积和转换的强大工具。它遍历数组的每个元素，并将其“缩减”为单个值。在这个场景中，我们将把原始数组“缩减”为一个包含子数组的数组。

核心思路

1. 初始化累加器： 累加器（a）将是一个空数组 []，用于存储最终的分组子数组。
2. 遍历元素： 对于数组中的每个当前元素（c）：
   • 判断是否开始新组： 检查当前元素的 number 属性是否与前一个元素的 number 属性不同。
     • 如果是数组的第一个元素 (i === 0)，或者当前元素的 number 与前一个元素的 number 不一致，这意味着一个新的连续分组开始了。此时，在累加器中创建一个新的子数组，并将当前元素作为其第一个成员。
     • 否则（当前元素的 number 与前一个元素的 number 相同），将当前元素添加到累加器中最后一个（即当前正在构建的）子数组中。
3. 返回累加器： 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 而报错。

注意事项与扩展

1. 数据顺序的重要性： 此方法的核心在于“连续”分组。如果原始数据不是按 order 属性排序的，或者分组条件依赖于其他非顺序属性，则需要先对数据进行预处理（例如排序）。
2. 属性类型： 本例中基于 number 属性进行分组，但同样适用于字符串或其他可比较的属性类型。
3. 性能： reduce 方法对数组进行一次遍历，其时间复杂度为 O(n)，其中 n 是数组的长度，效率较高。
4. 可读性： 尽管逗号表达式可以使代码更紧凑，但在团队协作或复杂逻辑中，明确的 if/else 结构可能提供更好的可读性和维护性。根据项目规范和个人偏好选择。
5. 空数组处理： 如果 data 数组为空，reduce 方法会返回初始值 []，符合预期。

总结

通过巧妙地运用 Array.prototype.reduce() 方法，并结合对前一个元素的条件判断，我们能够高效且优雅地解决按顺序分组连续重复项的特殊需求。这种模式不仅适用于本例中的数字属性，也能够推广到其他需要基于元素间顺序关系进行复杂分组的场景，是JavaScript数据处理中一个非常有用的技巧。理解并掌握 reduce 的强大功能，将极大地提升你在处理复杂数据转换时的能力。

以上就是《JavaScript重复项分组技巧详解》的详细内容，更多关于的资料请关注golang学习网公众号！