[Javascript] Object.groupBy & Map.groupBy

Zhentiw發表於2024-05-17
JavaScriptObject

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 {}

相關文章