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: 2, order: 5},
  ],
  [
    {name: F, number: 1, order: 6}
  ]
]

可以看到，尽管 {F, number: 1} 的 number 值与前三个元素相同，但由于它不与 {E, number: 2} 连续，因此被分到了一个新的子数组中。这与简单的按 number 值进行全局分组（例如使用 groupBy 函数）有所不同，它强调的是“连续性”。

核心思路：reduce方法的应用

解决此类问题的关键在于利用 Array.prototype.reduce() 方法。reduce 方法可以遍历数组，并根据每次迭代的结果累积一个单一的值。在这里，我们将累积一个包含多个子数组的数组。

每次迭代时，我们需要比较当前元素（c）的 number 属性与前一个元素（d[i-1]）的 number 属性。

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

• 如果它们不相同，或者这是数组的第一个元素（此时 d[i-1] 为 undefined），则意味着一个新的连续组开始了，我们需要在累加器（a）中创建一个新的子数组，并将当前元素添加到其中。
• 如果它们相同，则当前元素属于当前正在构建的最后一个子数组，我们将其添加到该子数组中。

代码实现与解析

以下是实现上述逻辑的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, current, index, array) => {
  // 检查当前元素的 'number' 属性是否与前一个元素的 'number' 属性不同
  // 对于第一个元素 (index === 0)，array[index-1] 为 undefined，其 .number 属性访问会是 undefined
  // 此时条件 (undefined !== current.number) 为真，会创建一个新的子数组
  if (array[index - 1]?.number !== current.number) {
    accumulator.push([current]); // 开始一个新的子数组
  } else {
    accumulator[accumulator.length - 1].push(current); // 将当前元素添加到最后一个子数组中
  }
  return accumulator; // 返回累加器
}, []); // 初始累加器为一个空数组

console.log(result);

代码解析：

1. data.reduce((accumulator, current, index, array) => { ... }, []):

   • accumulator (a): 这是一个累加器，它在每次迭代中保存着最终结果（一个包含子数组的数组）。初始值是一个空数组 []。
   • current (c): 当前正在处理的数组元素。
   • index (i): 当前元素的索引。
   • array (d): 原始数组，这允许我们访问前一个元素 (array[index - 1])。

2. array[index - 1]?.number:

   • array[index - 1] 获取前一个元素。
   • ?. (可选链操作符): 这是一个重要的特性。当 index 为 0 时，array[index - 1] 将是 undefined。可选链操作符确保在尝试访问 undefined 的 number 属性时不会抛出错误，而是返回 undefined。
   • 这样，对于数组的第一个元素，array[index - 1]?.number 将是 undefined，确保 undefined !== current.number 条件为真，从而正确地为第一个元素创建一个新的子数组。

3. if (array[index - 1]?.number !== current.number):

   • 这个条件判断是核心逻辑。它检测当前元素的 number 属性是否与前一个元素的 number 属性不同。如果不同，则表示连续性中断，需要开启一个新的分组。

4. accumulator.push([current]):

   • 如果条件为真，这会将一个新的子数组（其中包含 current 元素）推入 accumulator。

5. else { accumulator[accumulator.length - 1].push(current); }:

   • 如果条件为假（即 number 属性与前一个元素相同），则将 current 元素添加到 accumulator 中最后一个子数组的末尾。accumulator.length - 1 总是指向当前正在构建的子数组的索引。

6. return accumulator;:

   • 在每次迭代结束时，reduce 回调函数必须返回累加器的当前状态，以便在下一次迭代中使用。

注意事项与总结

• “连续性”是关键：此方法的核心在于其对“连续”重复项的处理。它不会将数组中所有具有相同 number 值的元素归为一组，而只会在 number 值连续相同的情况下进行分组。
• 适用于有序数据：此方法假定输入数组的顺序是重要的，因为分组是基于元素的相对位置进行的。如果原始数组的顺序不重要，或者需要对所有相同 number 值的元素进行分组（无论它们是否连续），则需要采用不同的分组策略（例如使用 Map 或对象进行 groupBy 操作）。
• 性能：reduce 方法是一种高效的迭代方式，因为它只需要一次遍历即可完成分组，时间复杂度为 O(n)，其中 n 是数组的长度。
• 代码简洁性：虽然示例中为了可读性使用了 if/else 结构，但原始答案中展示的逗号表达式 (a.push([c]) : a[a.length-1].push(c), a) 是一种更简洁的写法。逗号操作符会依次执行表达式，并返回最后一个表达式的值。在这种情况下，它执行了 push 操作，然后返回了 a（累加器），从而避免了显式的 return 语句和花括号。

通过上述 reduce 方法，我们可以优雅且高效地解决JavaScript中按属性值连续变化进行有序分组的特殊需求。这种模式在处理日志、时间序列数据或任何需要基于相邻元素状态进行聚合的场景中都非常有用。

以上就是JavaScript数组：基于属性值连续变化的有序分组实现的详细内容，更多请关注php中文网其它相关文章！