JavaScript 数组分组技巧：按顺序连续属性值分组对象

理解问题：连续分组的挑战

在数据处理中，我们经常需要对数组中的元素进行分组。然而，有时分组的逻辑并非基于简单的属性值相等，而是要求只有当某个属性的值与前一个元素的该属性值不同时，才开始一个新的分组。如果值相同，则当前元素应归入上一个分组。这与常见的去重或按属性值聚合有所不同，它强调的是“连续性”和“顺序性”。

例如，给定以下数据结构：

[
  {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);

代码解析：

1. data.reduce((...), []):

   • 我们对 data 数组调用 reduce 方法。
   • 第二个参数 [] 是 accumulator 的初始值，表示最终结果将是一个空数组（[[...], [...]]）。

2. 回调函数参数:

   • accumulator (简写为 a): 这是一个数组，用于存储最终的分组结果，例如 [[...], [...]]。
   • currentObject (简写为 c): 数组中当前正在处理的对象。
   • currentIndex (简写为 i): currentObject 在 sourceArray 中的索引。
   • sourceArray (简写为 d): 原始的 data 数组。

3. 核心逻辑：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 属性不同，则条件为真。

4. 条件分支：? 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]]。

5. 逗号表达式：, accumulator:

   • 在 JavaScript 中，逗号操作符 (expr1, expr2, ... exprN) 会依次执行每个表达式，并返回最后一个表达式的值。
   • 在这里，无论 push 操作是添加到新数组还是现有数组，我们都需要确保 reduce 回调函数最终返回 accumulator 本身，以便在下一次迭代中继续累积。通过将 accumulator 作为逗号表达式的最后一个部分，我们避免了显式使用 return 关键字，使代码更加紧凑。

关键点与注意事项

• 顺序依赖性: 此方法严格依赖于原始数组中元素的顺序。如果原始数组的顺序发生变化，分组结果也会随之变化。
• 第一个元素处理: 通过 ?. 可选链操作符，巧妙地处理了数组的第一个元素，使其自动成为新分组的开始。
• 性能: reduce 方法只进行一次遍历，时间复杂度为 O(n)，其中 n 是数组的长度，效率较高。
• 可读性: 尽管代码紧凑，但对于不熟悉 reduce、可选链和逗号表达式的开发者来说，可能需要一些时间来理解。在实际项目中，如果团队成员对这些高级特性不熟悉，可以考虑将其拆分为更易读的 if/else 结构，或者添加详细注释。
• 通用性: 此模式可以轻松修改以根据其他属性（例如 name 或 order）进行连续分组，只需更改比较的属性即可。

总结

通过巧妙地运用 Array.prototype.reduce() 方法结合索引访问和可选链操作符，我们可以高效地解决按顺序对连续相同属性值进行分组的问题。这种方法不仅代码简洁，而且执行效率高，是处理类似数据转换场景的强大工具。理解其背后的逻辑，特别是对 reduce 累加器状态的管理和对前一个元素的判断，是掌握此技巧的关键。

以上就是JavaScript 数组分组技巧：按顺序连续属性值分组对象的详细内容，更多请关注php中文网其它相关文章！