JavaScript 数组高级分组：按相邻元素属性动态切片

本文详细讲解如何利用JavaScript的Array.prototype.reduce()方法，实现一种特殊的数组分组逻辑。该方法根据数组中相邻元素的特定属性值（如number）是否发生变化，动态地将原始数组切片成多个子数组。当属性值连续相同时，元素被归入当前子数组；一旦属性值改变，则开启一个新的子数组，从而高效地实现按序的结构化数据重组。

在数据处理和前端开发中，我们经常需要对数组进行分组操作。传统的分组通常基于某个固定属性值，将所有具有相同属性值的元素归为一组。然而，有时我们会遇到一种特殊需求：需要根据元素在数组中的顺序，以及相邻元素之间某个特定属性值的变化来动态地进行分组。例如，给定一个对象数组，我们希望将连续的、某个属性值相同的对象归为一个子数组，一旦该属性值发生变化，就开启一个新的子数组。

核心概念：按相邻元素属性动态分组

这种分组逻辑的核心在于“变化检测”。当我们遍历数组时，需要实时比较当前元素的某个属性值与前一个元素的该属性值。

• 如果当前元素的属性值与前一个元素相同，则它应该被添加到当前正在构建的子数组中。
• 如果当前元素的属性值与前一个元素不同，则意味着一个新的分组开始了，我们需要创建一个新的子数组来包含当前元素。

对于数组的第一个元素，由于没有前一个元素可以比较，它自然会开启第一个分组。

使用 Array.prototype.reduce() 实现

Array.prototype.reduce() 方法是实现这种动态分组的理想工具。它允许我们遍历数组，并累积一个结果，这个结果可以是任何类型，包括一个包含多个子数组的数组。

让我们通过一个具体的示例来理解其实现。假设我们有以下数据结构：

立即学习“Java免费学习笔记（深入）”；

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}
];

我们的目标是将其转换为：

[
[
{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变为2（C到D），或从2变为1（E到F）时，都会开启新的子数组。

示例代码

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, array) => {
// 获取前一个对象的 'number' 属性值。
// 使用可选链操作符 '?' 处理第一个元素 (currentIndex === 0) 的情况，
// 此时 array[currentIndex - 1] 为 undefined，其 .number 属性也将是 undefined。
const previousNumber = array[currentIndex - 1]?.number;
// 检查当前对象的 'number' 属性是否与前一个对象的 'number' 属性不同。
// 对于第一个元素，previousNumber 是 undefined，而 currentObject.number 是实际值，
// 所以它们必然不同，从而正确地开始第一个分组。
if (previousNumber !== currentObject.number) {
// 如果不同，说明需要开始一个新的分组。
// 将包含当前对象的数组推入累加器中。
accumulator.push([currentObject]);
} else {
// 如果相同，说明当前对象属于上一个分组。
// 将当前对象推入累加器中最后一个子数组。
accumulator[accumulator.length - 1].push(currentObject);
}
// 返回累加器，供下一次迭代使用。
return accumulator;
}, []); // 初始累加器为空数组，用于存放所有分组。
console.log(result);

代码解析

1. data.reduce((accumulator, currentObject, currentIndex, array) => { … }, []):

   • accumulator (a): 这是一个数组，用于累积最终的分组结果（即一个包含多个子数组的数组）。
   • currentObject (c): 当前正在处理的数组元素。
   • currentIndex (i): 当前元素的索引。
   • array (d): 原始数组（data本身），这使得我们可以访问前一个元素。
   • []: reduce 方法的第二个参数，表示 accumulator 的初始值，这里是一个空数组。

2. const previousNumber = array[currentIndex – 1]?.number;:

   • array[currentIndex – 1]：获取前一个元素。
   • ?.number：使用可选链操作符。这在 currentIndex 为 0 时非常有用，因为 array[-1] 会是 undefined，undefined?.number 会安全地返回 undefined 而不会抛出错误。

3. if (previousNumber !== currentObject.number):

   • 这是核心的判断逻辑。它检查当前元素的 number 属性是否与前一个元素的 number 属性不同。
   • 对于第一个元素（currentIndex = 0），previousNumber 是 undefined。由于 undefined 不等于任何有效的 number 值（如 1 或 2），这个条件会为真，从而确保第一个元素总是开启一个新的分组。

4. accumulator.push([currentObject]);:

   • 如果 number 属性不同，说明需要开始一个新的分组。我们将当前对象 currentObject 包装在一个新的数组 [currentObject] 中，并将其推入 accumulator。

5. accumulator[accumulator.length – 1].push(currentObject);:

   • 如果 number 属性相同，说明当前对象属于上一个分组。我们通过 accumulator[accumulator.length – 1] 访问 accumulator 中最后一个（即当前正在构建的）子数组，并将 currentObject 推入其中。

6. return accumulator;:

   • 每次迭代结束时，必须返回 accumulator 的当前状态，以便在下一次迭代中使用。

简洁写法（逗号表达式）

原始答案中使用了逗号表达式来简化代码，避免了 if/else 和 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), [])
console.log(result)

逗号表达式 (expr1, expr2, …, exprN) 会从左到右依次执行每个表达式，并返回最后一个表达式的值。在这个例子中：

• d[i-1]?.number!==c.number ? a.push([c]) : a[a.length-1].push(c) 是一个三元运算符，它的结果（push 方法的返回值，即新数组的长度）会被忽略。
• a 是逗号表达式的最后一个部分，因此 reduce 回调函数会返回 a（即 accumulator）。
  这种写法非常紧凑，但在可读性上可能不如带有 if/else 的版本直观，尤其对于初学者而言。

注意事项

1. 数据顺序的重要性： 这种分组方法是严格依赖于原始数组中元素的顺序的。如果原始数组的顺序发生变化，或者数据不是按顺序排列的，那么分组结果也会随之改变，可能无法达到预期效果。
2. 第一个元素的处理： array[currentIndex – 1]?.number 的设计巧妙地处理了第一个元素的情况。当 currentIndex 为 0 时，array[currentIndex – 1] 是 undefined，undefined?.number 也是 undefined。由于 undefined 不等于任何有效的 number 值，第一个元素总会被推入一个新的子数组中，从而正确地开始第一个分组。
3. 属性值的类型： 本教程以 number 属性为例，但这种方法同样适用于其他可比较的属性类型，如字符串 (string) 或布尔值 (boolean)。只要能够通过 !== 进行有效比较即可。
4. 性能考量： reduce 方法在处理大型数组时通常是高效的。这种线性遍历一次数组的方案，时间复杂度为 O(n)，其中 n 是数组的长度。

总结

通过巧妙地利用 Array.prototype.reduce() 方法，结合对相邻元素属性的比较，我们可以实现一种强大且灵活的数组分组逻辑。这种方法特别适用于需要根据数据流中某个特定属性的变化来动态切分数组的场景，例如日志分析、时间序列数据处理或任何需要按序分组的业务需求。理解并掌握这种模式，将极大地增强您在 JavaScript 中处理复杂数据结构的能力。