[ES2024] Object.groupBy & Map.groupBy

Array Grouping is the new feature of JavaScript/ECMAScript, which splits an array (or, generally, an iterable), into smaller sub-arrays. Grouping is different than other JS array methods - it's not a part of the array prototype, but a static method.

 

Array:

let people = [
    { name: "Alice", specialization: "frontend", active: true },
    { name: "Bob", specialization: "backend", active: false },
    { name: "Cecile", specialization: "devops", active: true },
    { name: "Dan", specialization: "frontend", active: false },
    { name: "Elijah", specialization: "backend", active: true }
];

Object.groupBy(people, item => item.specialization)

/*
{
    "frontend": [
        {
            "name": "Alice",
            "specialization": "frontend",
            "active": true
        },
        {
            "name": "Dan",
            "specialization": "frontend",
            "active": false
        }
    ],
    "backend": [
        {
            "name": "Bob",
            "specialization": "backend",
            "active": false
        },
        {
            "name": "Elijah",
            "specialization": "backend",
            "active": true
        }
    ],
    "devops": [
        {
            "name": "Cecile",
            "specialization": "devops",
            "active": true
        }
    ]
}
*/

 

Object.groupByworks for any iterator object, such as Setor Generator

let peopleSet = new Set([
    { name: "Alice", specialization: "frontend", active: true },
    { name: "Bob", specialization: "backend", active: false },
    { name: "Cecile", specialization: "devops", active: true },
    { name: "Dan", specialization: "frontend", active: false },
    { name: "Elijah", specialization: "backend", active: true },
]);
Object.groupBy(peopleSet, ({specialization}) => specialization)

function* peopleGenerator() {
    yield { name: "Alice", specialization: "frontend", active: true };
    yield { name: "Bob", specialization: "backend", active: false };
    yield { name: "Cecile", specialization: "devops", active: true };
    yield { name: "Dan", specialization: "frontend", active: false };
    yield { name: "Elijah", specialization: "backend", active: true };
}
Object.groupBy(peopleGenerator(), ({specialization}) => specialization)

 

You can also dynamicly define the grouping key:

let people = [
    { name: "Alice", specialization: "frontend", active: true },
    { name: "Bob", specialization: "backend", active: false },
    { name: "Cecile", specialization: "devops", active: true },
    { name: "Dan", specialization: "frontend", active: false },
    { name: "Elijah", specialization: "backend", active: true }
];
Object.groupBy(people, item => `active:${item.active}`)

/*
{
    "active:true": [
        {
            "name": "Alice",
            "specialization": "frontend",
            "active": true
        },
        {
            "name": "Cecile",
            "specialization": "devops",
            "active": true
        },
        {
            "name": "Elijah",
            "specialization": "backend",
            "active": true
        }
    ],
    "active:false": [
        {
            "name": "Bob",
            "specialization": "backend",
            "active": false
        },
        {
            "name": "Dan",
            "specialization": "frontend",
            "active": false
        }
    ]
}
*/

 

The same for Map.groupBy

let people = [
    { name: "Alice", specialization: "frontend", active: true },
    { name: "Bob", specialization: "backend", active: false },
    { name: "Cecile", specialization: "devops", active: true },
    { name: "Dan", specialization: "frontend", active: false },
    { name: "Elijah", specialization: "backend", active: true }
];
Map.groupBy(people,  ({specialization}) => specialization) // result a Map instead of {}

 

posted @   Zhentiw  阅读(23)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2023-05-17 [Rust] Enum
2021-05-17 [Cloud DA] Serverless Framework with AWS
2021-05-17 [AWS] Using APIGateway to validate API request
2020-05-17 [React Recoil] Write a Custom Recoil Hook to Reset a Value in the Recoil State
2019-05-17 [Functional Programming] propSatisfies with implies
2019-05-17 [Git] How to revert one file changes from one commit
2019-05-17 [Svelte 3] Use reactive declarations to compute component state in Svelte 3
点击右上角即可分享
微信分享提示