首页 > 网页制作 >如何利用 Object.groupBy(ES2024)根据业务字段对数组进行高效分组

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

来源:互联网 2026-04-16 21:06:03

利用 Object.groupBy(ES2024)按业务字段高效分组数组 是否厌倦了为数组分组编写冗长的 reduce 代码?现在,使用 Object.groupBy() 一行即可完成。这个 ES2024 的新特性,让依据字段或自定义逻辑生成分组对象变得异常简洁。 基于单个字段快速分组 这是最常见且

利用 Object.groupBy(ES2024)按业务字段高效分组数组

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

是否厌倦了为数组分组编写冗长的 reduce 代码?现在,使用 Object.groupBy() 一行即可完成。这个 ES2024 的新特性,让依据字段或自定义逻辑生成分组对象变得异常简洁。

长期稳定更新的攒劲资源: >>>点此立即查看<<<

基于单个字段快速分组

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

其用法非常直接:传入目标数组和一个回调函数,该函数返回每个元素的分组键。例如 user => user.roleorder => 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 是万能的吗?并非如此。当分组键不是字符串时,就会遇到限制。例如,你想使用一个对象引用、一个函数,或者 nullundefined 作为键。因为普通对象的属性名只能是字符串或 Symbol,且 Symbol 键不会自动匹配。

此时,它的兄弟方法 Map.groupBy() 便派上用场。它支持任意类型的值作为键,并返回一个 Map 实例。调用方式与 Object.groupBy 完全一致,仅结果类型不同。

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

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

简而言之,需要普通对象时使用 Object.groupBy,需要更灵活的键类型时使用 Map.groupBy,两者结合足以覆盖绝大多数分组场景。

侠游戏发布此文仅为了传递信息,不代表侠游戏网站认同其观点或证实其描述

热游推荐

更多
湘ICP备14008430号-1 湘公网安备 43070302000280号
All Rights Reserved
本站为非盈利网站,不接受任何广告。本站所有软件,都由网友
上传,如有侵犯你的版权,请发邮件给xiayx666@163.com
抵制不良色情、反动、暴力游戏。注意自我保护,谨防受骗上当。
适度游戏益脑,沉迷游戏伤身。合理安排时间,享受健康生活。