js 如何使用groupBy对数组元素进行分组-js教程-PHP中文网

js 如何使用groupBy对数组元素进行分组

月夜之吻

发布： 2025-08-07 08:05:01

原创

527人浏览过

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()。

js 如何使用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()

登录后复制

方法来实现数组分组。虽然代码量会稍微多一点，但它是一个非常强大且灵活的数组迭代方法，能够处理各种数据转换和聚合任务。

最常见的做法是这样的：

j2me3D游戏开发简单教程中文WORD版

本文档主要讲述的是j2me3D游戏开发简单教程；　如今，3D图形几乎是任何一部游戏的关键部分，甚至一些应用程序也通过用3D形式来描述信息而获得了成功。如前文中所述，以立即模式和手工编码建立所有的3D对象的方式进行开发速度很慢且很复杂。应用程序中多边形的所有角点必须在数组中独立编码。在JSR 184中，这称为立即模式。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看

查看详情

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

登录后复制

就能派上大用场。

数据可视化和报表生成： 这是最常见的场景之一。
- 比如，你有一堆销售订单数据，想按“产品类别”统计销售额，或者按“月份”统计订单量。
```
groupBy
```
  登录后复制
  可以先帮你把订单按类别或月份分好组，然后你再对每个组进行求和、计数等操作，轻松生成各种报表和图表所需的数据源。
- 想象一下，你有一组用户行为日志，需要按“事件类型”或“用户ID”来分析，
```
groupBy
```
  登录后复制
  能帮你快速构建出分析所需的结构。
UI 界面渲染： 在前端开发中，经常需要将列表数据以分组的形式展示。
- 例如，一个联系人列表，你想按姓氏首字母（A-Z）分组显示。
- 电商网站的产品列表，可以按“品牌”、“类别”或“价格区间”分组展示。
- 一个任务管理系统，将任务按“状态”（待办、进行中、已完成）或“优先级”分组显示。
```
groupBy
```
  登录后复制
  能直接给你提供分好组的数据，前端渲染时遍历这些组就行了。
数据清洗与预处理： 在处理原始数据时，
```
groupBy
```
登录后复制
可以帮助我们发现和处理一些模式。
- 比如，你可能需要找出所有重复的记录，或者根据某个字段将数据进行初步的归类，以便后续的去重或合并操作。
- 在处理一些不规范的数据时，可以根据某个规则将数据归类到“有效”和“无效”组，便于后续处理。
权限管理与批量操作：
- 在后台系统中，你可能需要根据用户的“角色”来展示不同的操作界面或分配不同的权限。
```
groupBy
```
  登录后复制
  可以把用户按角色分组，方便你针对性地进行权限配置。
- 进行批量操作时，比如批量发送通知给特定状态的用户，你可以先按用户状态分组，然后对每个组的用户执行相应的操作。
缓存策略：
- 在某些场景下，你可能需要根据数据的某个属性来决定缓存策略。例如，将不同类型的数据缓存到不同的存储区域，
```
groupBy
```
  登录后复制
  可以帮助你组织这些数据。