[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.groupBy
works for any iterator object, such as Set
or 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 {}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源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