如何利用 Object.groupBy（ES2024）根据业务字段对数组进行高效分组

如何利用 Object.groupBy（ES2024）根据业务字段对数组进行高效分组

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

你是否厌倦了为数组分组编写冗长的 reduce 代码？现在，使用 ES2024 的新特性 Object.groupBy()，一行代码即可轻松实现。这个强大的 JavaScript 数组分组方法，让依据字段或自定义逻辑生成分组对象变得前所未有的简洁高效，极大提升了开发效率。

按单个字段快速分组

这是最常见且直观的应用场景。无论是按用户角色、订单状态，还是产品类别进行归类，只要是基于某个字符串字段，Object.groupBy 都能轻松胜任。

其用法非常直观：传入目标数组和一个回调函数，该函数返回每个元素的分组键。例如 user => user.role 或 order => order.status。最终，你将获得一个普通对象，其属性名即为分组键（会自动转换为字符串），属性值则是该组所有元素构成的数组。

以下是一个具体示例，演示如何将用户列表按角色进行分组：

const users = [
  { name: '张三', role: 'admin' },
  { name: '李四', role: 'user' },
  { name: '王五', role: 'admin' }
];
const grouped = Object.groupBy(users, user => user.role);
// 结果：{ admin: [{...}, {...}], user: [{...}] }

按计算逻辑动态分组

分组需求当然不仅限于直接读取字段。很多时候，我们需要根据计算或条件判断来动态生成分组键，Object.groupBy 的回调函数为此提供了完美的舞台。

你可以在回调函数中编写任何逻辑：根据分数划定等级、截取日期中的年月部分、或将金额归入不同的区间。需要注意的是：回调函数的返回值将用作对象的属性名，因此非字符串类型（如数字、日期）会自动调用其 toString() 方法进行转换。

例如，将订单按金额区间进行智能归类：

const orders = [
  { id: 1, amount: 980 },
  { id: 2, amount: 5200 },
  { id: 3, amount: 12000 }
];
const byRange = Object.groupBy(orders, o =>
  o.amount < 1000 ? '小额' :
  o.amount < 10000 ? '中额' : '大额'
);
// 结果：{ 小额: [{...}], 中额: [{...}], 大额: [{...}] }

兼容老环境的稳妥做法

新技术虽好，但如果项目仍需支持旧版浏览器或低版本的 Node.js 环境，直接使用可能会遇到兼容性问题。无需担心，已有成熟的解决方案。

首先，可以通过 if (!Object.groupBy) 来检测当前环境是否原生支持该特性。如果不支持，一个轻量级的 polyfill（垫片）即可让它无缝工作。这个 polyfill 的核心逻辑，其实就是我们熟悉的 reduce 方法：初始化一个空对象，为每个元素计算键，如果该键不存在则初始化一个空数组，然后将元素推入。

对于生产环境，更推荐直接引入 core-js 这类成熟的垫片库。它们已经妥善处理了各种边界情况，比自己维护要可靠得多。

什么时候该用 Map.groupBy

那么，Object.groupBy 是万能的吗？并非如此。当你的分组键不是字符串时，就会遇到限制。例如，你想用一个对象引用、一个函数，或者 null、undefined 作为键。因为普通对象的属性名只能是字符串或 Symbol，并且 Symbol 键不会自动匹配。

这时，就该它的兄弟方法 Map.groupBy() 登场了。它支持任意类型的值作为键，并返回一个 Map 实例。调用方式与 Object.groupBy 完全一致，只是结果类型不同。

典型的使用场景包括：按某个对象实例本身进行分组，或者按像 new Date().getFullYear() 这样返回数字的表达式分组。用法示例如下：

const groupedMap = Map.groupBy(items, item => item.category);

简单来说，当需要普通对象时使用 Object.groupBy，当需要更灵活的键类型时则选择 Map.groupBy。两者结合，足以覆盖前端开发中绝大部分的数组分组场景。