ECMAScript 悄悄更新了两个对象分组 API，你注意到了么？

最新推荐文章于 2025-01-11 09:19:14 发布

OpenTiny社区

最新推荐文章于 2025-01-11 09:19:14 发布

阅读量1k

点赞数 10

分类专栏：前端文章标签： ecmascript 前端 javascript 开源低代码

本文链接：https://blog.youkuaiyun.com/OpenTiny/article/details/135867685

版权

本文介绍了JavaScript117版本新增的Object.groupBy和Map.groupBy分组方法，它们简化了数组对象的分组操作，提升了代码可读性。同时，文章还讨论了它们的使用场景、浏览器兼容性以及与Array.prototype.groupby的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文由体验技术团队小汪同学分享~

摘要：“ Map.groupBy() 静态方法使用提供的回调函数返回的值对给定可迭代对象中的元素进行分组。最终返回的 Map 使用测试函数返回的唯一值作为键，可用于获取每个组中的元素组成的数组。
详见: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/groupBy ”

哈喽，各位小伙伴们大家好呀~

今天和大家聊一下谷歌在117版本更新的两个 API。

Object.groupBy 和 Map.groupBy

在日常的开发实践中，数据分组是一个很常用的操作。一般情况下，我们需要编写自定义的分组函数或者借助于三方库中的 groupBy 函数来实现。不过，有个激动人心的好消息：ECMAScript 更新了两个原生的分组方法——Object.groupBy 和 Map.groupBy。

让我们来回忆一下，在以往的开发过程中，我们是怎么自定义数组分组方法的。假设我们有一个由员工对象组成的数组，并且我们希望按照年龄来对这些员工进行分组。以往，我们可能会使用 forEach 循环来达到目的，相关代码如下所示：

const members = [
    {
    name: "HuaXiaoWen", age: 23 },
    {
    name: "HuaXiaoMing", age: 25 },
    {
    name: "HuaXiaoGang", age: 23 },
];

const membersGroupByAge = {
   };

members.forEach((member) => {
   
    const age = member.age;
    if (!membersGroupByAge[age]) {
   
        membersGroupByAge[age] = [];
    }
    membersGroupByAge[age].push(member);
});

console.log(membersGroupByAge);