JavaScript数组分组技巧：groupBy使用详解

还在为JavaScript数组分组烦恼吗？本文详解ES2024标准引入的`Object.groupBy()`方法，告别繁琐的`reduce`模式。`Object.groupBy()`接收数组和回调函数，根据回调函数返回值将数组元素分组，返回以分组键为属性、元素数组为值的普通对象，适用于字符串或数字键的常规分组。文章对比了`Object.groupBy()`与仍在提案阶段的`Array.prototype.groupBy()`，并介绍了旧版JavaScript中`Array.prototype.reduce()`和`for...of`循环的实现方式。此外，深入探讨了`groupBy`在数据可视化、报表生成、UI界面渲染、数据清洗、权限管理、批量操作和缓存策略等实际开发场景中的应用，助你提升代码效率和可读性。推荐在现代JavaScript环境中优先使用`Object.groupBy()`，让数组分组更优雅、高效。

JavaScript中对数组元素进行分组的更优雅方法是使用Object.groupBy()。1. Object.groupBy()是ES2024标准引入的方法，接收一个数组和一个回调函数作为参数，回调函数返回的值作为分组键，最终返回一个以分组键为属性、对应元素数组为值的普通对象；2. 与仍在Stage 3提案阶段的Array.prototype.groupBy()不同，Object.groupBy()返回的是普通对象而非Map，更适合字符串或数字键的常规分组场景；3. 在旧版JavaScript中，通常使用Array.prototype.reduce()或for...of循环手动实现分组，通过判断累加器对象中是否存在对应键并初始化数组来收集元素；4. 实际开发中，groupBy广泛应用于数据可视化、报表生成、UI界面按类别渲染、数据清洗、权限管理、批量操作和缓存策略等场景，能有效将扁平数据转化为结构化分组数据，提升代码可读性和处理效率。该方法现已稳定支持，推荐在现代JavaScript环境中优先使用Object.groupBy()。

JavaScript中对数组元素进行分组，现在有了更直接、更优雅的办法：Object.groupBy()。说实话，当我第一次看到这个提案被接受并最终进入标准时，心里是乐开了花，因为它直接解决了我们日常开发中一个非常高频的需求，而且代码写起来也清晰了很多，告别了之前那些略显啰嗦的reduce模式。它就是为了这个目的而生的，能让你根据数组中元素的某个属性或计算结果，将它们归类到不同的“桶”里。

解决方案

要使用Object.groupBy()，你只需要提供两个参数：要分组的数组，以及一个回调函数。这个回调函数会针对数组中的每一个元素执行，并返回一个字符串或Symbol，这个返回值就是该元素所属的“组”的键。最终，Object.groupBy()会返回一个新对象，它的键就是你回调函数返回的那些组名，值则是对应组的所有元素的数组。

举个例子，假设我们有一堆用户数据，想把他们按城市分组：

const users = [
  { id: 1, name: 'Alice', city: 'New York' },
  { id: 2, name: 'Bob', city: 'London' },
  { id: 3, name: 'Charlie', city: 'New York' },
  { id: 4, name: 'David', city: 'Paris' },
  { id: 5, name: 'Eve', city: 'London' },
];

const usersByCity = Object.groupBy(users, (user) => user.city);

console.log(usersByCity);
/*
输出会是这样：
{
  'New York': [
    { id: 1, name: 'Alice', city: 'New York' },
    { id: 3, name: 'Charlie', city: 'New York' }
  ],
  'London': [
    { id: 2, name: 'Bob', city: 'London' },
    { id: 5, name: 'Eve', city: 'London' }
  ],
  'Paris': [
    { id: 4, name: 'David', city: 'Paris' }
  ]
}
*/

看，是不是简单明了？回调函数里，我们直接返回了user.city，Object.groupBy就自动帮我们把相同city的用户收集到了一起。如果你的分组逻辑更复杂，比如根据年龄段分组，回调函数里写点逻辑判断就行了，非常灵活。

Object.groupBy 与 Array.prototype.groupBy 有何不同？

这确实是个容易让人混淆的地方，毕竟名字太像了。简单来说，它们的主要区别在于返回值的类型和一些细微的使用场景。

Object.groupBy()（ES2024标准）是目前更稳定、更推荐使用的分组方法。它返回的是一个普通JavaScript对象。这意味着你的分组键（也就是回调函数返回的值）最终会成为这个对象的属性名。如果你需要通过字符串键快速访问某个组，或者你的分组键本身就是简单的字符串或可以被强制转换为字符串的值，那么Object.groupBy就是你的首选。它的输出结构直接就是我们最常用的键值对形式，非常直观。

而Array.prototype.groupBy()（目前还在Stage 3提案阶段，尚未完全进入标准，所以浏览器和Node.js支持度可能不如前者）则返回一个Map对象。Map的键可以是任意类型的值，包括对象、函数甚至是NaN，这在某些特殊场景下会很有用，比如你想以一个对象本身作为分组的键。但对于绝大多数常规分组需求，特别是键是字符串或数字时，Object.groupBy的普通对象输出已经足够，并且通常更方便操作。

所以，在当前阶段，如果你只是想按字符串或数字键进行分组，并且希望得到一个普通对象作为结果，那么毫无疑问选择Object.groupBy()。如果你确实有以非字符串/数字作为键的需求，或者对Map数据结构有偏好，并且能接受其仍在提案阶段的风险，可以关注Array.prototype.groupBy的进展。

在旧版JavaScript中，如何实现类似的数组分组功能？

在Object.groupBy()成为标准之前，我们通常会借助Array.prototype.reduce()方法来实现数组分组。虽然代码量会稍微多一点，但它是一个非常强大且灵活的数组迭代方法，能够处理各种数据转换和聚合任务。

最常见的做法是这样的：

const users = [
  { id: 1, name: 'Alice', city: 'New York' },
  { id: 2, name: 'Bob', city: 'London' },
  { id: 3, name: 'Charlie', city: 'New York' },
  { id: 4, name: 'David', city: 'Paris' },
  { id: 5, name: 'Eve', city: 'London' },
];

const usersByCityOldSchool = users.reduce((acc, user) => {
  const city = user.city;
  if (!acc[city]) {
    acc[city] = []; // 如果这个城市还没有对应的数组，就创建一个空数组
  }
  acc[city].push(user); // 把当前用户添加到对应城市的数组里
  return acc; // 返回累加器
}, {}); // 初始值是一个空对象

console.log(usersByCityOldSchool);
/*
输出和 Object.groupBy 类似：
{
  'New York': [ ... ],
  'London': [ ... ],
  'Paris': [ ... ]
}
*/

这里，reduce的第一个参数是一个回调函数，它接收两个参数：acc（accumulator，累加器，也就是最终要返回的结果对象）和user（当前正在处理的数组元素）。我们初始化acc为一个空对象{}。在每次迭代中，我们取出用户的城市，然后检查acc中是否已经有了这个城市作为键。如果没有，就创建一个空数组；然后把当前用户user推进这个数组里。最后，返回更新后的acc。

除了reduce，你也可以用传统的for...of循环来达到同样的目的，代码会更显式一点：

const usersByCityForOf = {};
for (const user of users) {
  const city = user.city;
  if (!usersByCityForOf[city]) {
    usersByCityForOf[city] = [];
  }
  usersByCityForOf[city].push(user);
}
console.log(usersByCityForOf); // 结果同上

这两种方法在旧版JavaScript环境中都是非常有效的。reduce更函数式，更紧凑；for...of则更命令式，对一些初学者来说可能更容易理解其执行流程。在现代JS中，有了Object.groupBy，我们确实可以少写很多这样的“样板代码”，让意图表达得更清晰。

groupBy 在实际开发中常见的应用场景有哪些？

groupBy这个操作，在实际开发中简直是无处不在，它的出现大大简化了数据处理的复杂度。我个人觉得，只要你涉及到“分类”、“统计”、“按维度展示”数据，groupBy就能派上大用场。

1. 数据可视化和报表生成： 这是最常见的场景之一。

   • 比如，你有一堆销售订单数据，想按“产品类别”统计销售额，或者按“月份”统计订单量。groupBy可以先帮你把订单按类别或月份分好组，然后你再对每个组进行求和、计数等操作，轻松生成各种报表和图表所需的数据源。
   • 想象一下，你有一组用户行为日志，需要按“事件类型”或“用户ID”来分析，groupBy能帮你快速构建出分析所需的结构。

2. UI 界面渲染： 在前端开发中，经常需要将列表数据以分组的形式展示。

   • 例如，一个联系人列表，你想按姓氏首字母（A-Z）分组显示。
   • 电商网站的产品列表，可以按“品牌”、“类别”或“价格区间”分组展示。
   • 一个任务管理系统，将任务按“状态”（待办、进行中、已完成）或“优先级”分组显示。groupBy能直接给你提供分好组的数据，前端渲染时遍历这些组就行了。

3. 数据清洗与预处理： 在处理原始数据时，groupBy可以帮助我们发现和处理一些模式。

   • 比如，你可能需要找出所有重复的记录，或者根据某个字段将数据进行初步的归类，以便后续的去重或合并操作。
   • 在处理一些不规范的数据时，可以根据某个规则将数据归类到“有效”和“无效”组，便于后续处理。

4. 权限管理与批量操作：

   • 在后台系统中，你可能需要根据用户的“角色”来展示不同的操作界面或分配不同的权限。groupBy可以把用户按角色分组，方便你针对性地进行权限配置。
   • 进行批量操作时，比如批量发送通知给特定状态的用户，你可以先按用户状态分组，然后对每个组的用户执行相应的操作。

5. 缓存策略：

   • 在某些场景下，你可能需要根据数据的某个属性来决定缓存策略。例如，将不同类型的数据缓存到不同的存储区域，groupBy可以帮助你组织这些数据。

总的来说，groupBy是一个非常基础但又极其强大的工具，它把数据从扁平的列表结构转换成更有层次、更易于分析和展示的树形（或说映射）结构，大大提升了数据处理的效率和代码的可读性。

好了，本文到此结束，带大家了解了《JavaScript数组分组技巧：groupBy使用详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！