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: 1}（即F）前面被{number: 2}（即D和E）隔开，因此它被单独分成了新的一组。这种分组逻辑强调了元素的“连续性”和“顺序性”。

核心解决方案：使用 Array.prototype.reduce()

Array.prototype.reduce()方法是JavaScript中一个功能强大的高阶函数，它对数组中的每个元素执行一个由您提供的reducer函数，将其结果汇总为单个返回值。在本场景中，我们可以利用reduce的特性，通过比较当前元素与前一个元素的特定属性，动态地构建一个包含子数组的数组。

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

实现逻辑

reduce方法的reducer函数接收四个参数：accumulator（累加器）、currentValue（当前值）、currentIndex（当前索引）和array（原始数组）。

1. 累加器 (a)：我们将用一个空数组[]作为累加器的初始值。这个累加器将最终包含所有分组后的子数组。
2. 当前值 (c)：当前正在处理的数组元素。
3. 当前索引 (i)：当前元素在原始数组中的索引。
4. 原始数组 (d)：为了访问前一个元素，我们需要用到原始数组。

核心逻辑在于判断当前元素c的number属性是否与前一个元素d[i-1]的number属性相同。

• 如果不同 (d[i-1]?.number !== c.number)：这意味着一个新的连续序列开始了。此时，我们应该在累加器a中创建一个新的子数组，并将当前元素c作为该子数组的第一个元素。
• 如果相同：这意味着当前元素c属于前一个元素所在的连续序列。此时，我们应该将当前元素c添加到累加器a中最后一个子数组的末尾。

示例代码

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属性不同
  // array[index - 1]?.number 使用可选链操作符，安全地访问前一个元素的number属性
  // 当index为0时，array[index - 1]为undefined，array[index - 1]?.number 结果为undefined
  if (array[index - 1]?.number !== current.number) {
    // 如果不同，则开始一个新的分组，将当前元素放入一个新的子数组并添加到累加器中
    accumulator.push([current]);
  } else {
    // 如果相同，则将当前元素添加到累加器中最后一个子数组的末尾
    accumulator[accumulator.length - 1].push(current);
  }
  // 返回累加器，以便在下一次迭代中使用
  return accumulator;
}, []); // 初始累加器为空数组

console.log(result);
/*
输出:
[
  [
    { 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 }
  ]
]
*/

为了追求更简洁的表达，可以利用JavaScript的逗号操作符（comma expression），在箭头函数中省略花括号和return关键字：

硅基智能

基于Web3.0的元宇宙，去中心化的互联网，高质量、沉浸式元宇宙直播平台，用数字化重新定义直播

62

查看详情

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)

在这个紧凑的版本中：

• d[i-1]?.number!==c.number 是判断条件。
• a.push([c]) 是条件为真时执行的操作（开始新组）。
• a[a.length-1].push(c) 是条件为假时执行的操作（添加到当前组）。
• a.push([c]) : a[a.length-1].push(c) 是一个三元表达式，它的结果被逗号操作符连接到a。逗号操作符会依次执行其左侧和右侧的表达式，并返回右侧表达式的值。因此，无论三元表达式的结果是什么，最终都会返回累加器a，这使得代码非常简洁。

代码解析与注意事项

1. d[i-1]?.number：可选链操作符

   • ?. (可选链操作符) 是ES2020引入的特性，它允许您安全地访问嵌套对象的属性，而无需显式检查每个引用是否为null或undefined。
   • 当i为0时，d[i-1]（即d[-1]）将是undefined。undefined?.number的结果也是undefined。
   • 因此，对于数组的第一个元素，undefined !== c.number（例如 undefined !== 1）会评估为true，从而正确地为第一个元素创建一个新的子数组。

2. 逗号表达式的简洁性与可读性

   • 使用逗号操作符可以使代码非常紧凑，尤其是在reduce等高阶函数的回调中。
   • 然而，过度使用逗号操作符可能会降低代码的可读性，特别是对于不熟悉这种语法的开发者。在生产环境中，是否采用这种风格应根据团队的代码规范和可维护性要求来决定。对于复杂逻辑，明确的if/else结构可能更易于理解。

3. 初始值 [] 的重要性

   • reduce方法的第二个参数是累加器的初始值。在这里，我们将其设置为一个空数组[]。
   • 这个空数组将作为第一个子数组的容器，并在整个处理过程中不断被填充或添加新的子数组。

4. 适用场景

   • 这种方法非常适用于需要根据元素在数组中的顺序和连续性来分组数据的场景。例如，日志分析中连续相同事件的聚合，或时间序列数据中连续相同状态的识别。

总结

通过巧妙地运用Array.prototype.reduce()方法，并结合对前一个元素的判断，我们可以高效且优雅地解决按序分组连续重复项这一特殊的数据处理需求。这种模式不仅展示了reduce方法的强大灵活性，也体现了JavaScript在处理复杂数组转换方面的表现力。理解其背后的逻辑和可选链操作符的用法，将有助于您在未来的开发工作中，更自信地处理各种数据分组和转换任务。

以上就是JavaScript中基于顺序的连续重复数据分组技巧的详细内容，更多请关注php中文网其它相关文章！