Object.groupBy()
注意： 在某些浏览器版本的早期实现中，此方法是以 Array.prototype.group() 的形式实现的。由于 Web 兼容性问题，现在它已实现为静态方法。有关详细信息，请查看 浏览器兼容性表格。
Object.groupBy() 静态方法根据提供的回调函数返回的字符串值对给定可迭代对象的元素进行分组。返回的对象为每个组都设有独立的属性，其中包含属于该组的元素组成的数组。
当组名可以用字符串表示时，应使用此方法。如果您需要使用任意值作为键来分组元素，请改用 Map.groupBy()。
试一试
const inventory = [
{ name: "asparagus", type: "vegetables", quantity: 9 },
{ name: "bananas", type: "fruit", quantity: 5 },
{ name: "goat", type: "meat", quantity: 23 },
{ name: "cherries", type: "fruit", quantity: 12 },
{ name: "fish", type: "meat", quantity: 22 },
];
const result = Object.groupBy(inventory, ({ quantity }) =>
quantity < 6 ? "restock" : "sufficient",
);
console.log(result.restock);
// [{ name: "bananas", type: "fruit", quantity: 5 }]
语法
Object.groupBy(items, callbackFn)
参数
返回值
一个 null-prototype 对象，其中包含所有组的属性，每个属性都分配给一个包含相关组元素的数组。
描述
Object.groupBy() 对可迭代对象中的每个元素调用一次提供的 callbackFn 函数。回调函数应返回一个字符串或 symbol（非这两种类型的其他值将被 强制转换为字符串），指示相关元素的组。callbackFn 返回的值将用作 Object.groupBy() 返回的对象的键。每个键都有一个关联的数组，其中包含回调函数返回相同值的的所有元素。
返回对象和原始可迭代对象中的元素是相同的（不是 深拷贝）。更改元素的内部结构将同时反映在原始可迭代对象和返回的对象中。
示例
使用 Object.groupBy()
首先，我们定义一个包含对象的数组，这些对象代表不同食品的库存。每种食品都有一个 type 和一个 quantity。
const inventory = [
{ name: "asparagus", type: "vegetables", quantity: 5 },
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "goat", type: "meat", quantity: 23 },
{ name: "cherries", type: "fruit", quantity: 5 },
{ name: "fish", type: "meat", quantity: 22 },
];
下面的代码按其 type 属性的值对元素进行分组。
const result = Object.groupBy(inventory, ({ type }) => type);
/* Result is:
{
vegetables: [
{ name: 'asparagus', type: 'vegetables', quantity: 5 },
],
fruit: [
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "cherries", type: "fruit", quantity: 5 }
],
meat: [
{ name: "goat", type: "meat", quantity: 23 },
{ name: "fish", type: "meat", quantity: 22 }
]
}
*/
每次调用时，箭头函数都会返回每个数组元素的 type。请注意，函数参数 { type } 是 函数参数对象解构语法 的基本示例。这会解构作为参数传递的对象的 type 属性，并将其赋值给函数体中名为 type 的变量。这是访问函数内元素相关值的非常简洁的方法。
我们还可以创建基于元素的一个或多个属性中的值推断出的组。下面是一个非常相似的示例，它根据 quantity 字段的值将物品放入 ok 或 restock 组。
function myCallback({ quantity }) {
return quantity > 5 ? "ok" : "restock";
}
const result2 = Object.groupBy(inventory, myCallback);
/* Result is:
{
restock: [
{ name: "asparagus", type: "vegetables", quantity: 5 },
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "cherries", type: "fruit", quantity: 5 }
],
ok: [
{ name: "goat", type: "meat", quantity: 23 },
{ name: "fish", type: "meat", quantity: 22 }
]
}
*/
规范
| 规范 |
|---|
| ECMAScript® 2026 语言规范 # sec-object.groupby |
浏览器兼容性
加载中…