JavaScript Object.groupBy 方法详解与实战
作者:木棉时间:2026-10-31 09:34:53浏览:555
本文介绍 JavaScript 新推出的 Object.groupBy 方法,用于对可迭代对象进行分组。通过城市列表示例,展示如何根据首字母生成分组结果,解析语法结构及回调函数的使用方式。
Object.groupBy 概述
JavaScript 近期引入了 Object.groupBy 方法,用于对可迭代对象中的元素进行分组处理。
语法如下:
语法结构
Object.groupBy(items, callbackFn)items
需要分组的可迭代对象,例如 Array。
callbackFn
应用于可迭代对象中每个元素的函数。
例如,我们需要根据城市名称的首字母进行分组:
代码示例
const cityList = [
{ id: 1, name: "beijing" },
{ id: 2, name: "shanghai" },
{ id: 3, name: "guangzhou" },
{ id: 4, name: "shenzhen" },
{ id: 5, name: "hangzhou" },
{ id: 6, name: "chengdu" },
{ id: 7, name: "wuhan" },
{ id: 8, name: "xian" },
{ id: 9, name: "chongqing" },
];
const result = Object.groupBy(cityList, (city) => city.name[0]);返回结果如下:

{
"b": [
{
"id": 1,
"name": "beijing"
}
],
"s": [
{
"id": 2,
"name": "shanghai"
},
{
"id": 4,
"name": "shenzhen"
}
],
"g": [
{
"id": 3,
"name": "guangzhou"
}
],
"h": [
{
"id": 5,
"name": "hangzhou"
}
],
"c": [
{
"id": 6,
"name": "chengdu"
},
{
"id": 9,
"name": "chongqing"
}
],
"w": [
{
"id": 7,
"name": "wuhan"
}
],
"x": [
{
"id": 8,
"name": "xian"
}
]
}本文关于 JavaScript 数组分组 Object.groupBy 的介绍到此结束,更多相关内容请查阅本站往期文章或继续浏览后续内容,感谢大家的支持!
作者最新文章
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比:灵活性 vs 开发效率
2026-11-05 09:45:01
为什么JS中typeof []返回object:数组类型检测误区解析
2026-11-04 19:50:47
