Object.groupBy()

基线 2024

新可用

自 2024 年 3 月起，此功能适用于最新的设备和浏览器版本。此功能可能无法在旧设备或浏览器中使用。

注意： 在某些浏览器版本中，此方法被实现为 Array.prototype.group() 方法。由于 Web 兼容性问题，它现在被实现为静态方法。有关详细信息，请查看 浏览器兼容性表。

Object.groupBy() 静态方法根据提供的回调函数返回的字符串值，对给定可迭代对象的元素进行分组。返回的对象包含每个组的单独属性，其中包含该组中元素的数组。

当组名可以用字符串表示时，应该使用此方法。如果您需要使用任意值作为键来对元素进行分组，请改用 Map.groupBy()。

语法

js
Object.groupBy(items, callbackFn)

参数

items

一个 可迭代对象（如 Array），其元素将被分组。

callbackFn

对可迭代对象中的每个元素执行的函数。它应该返回一个可以强制转换为属性键（字符串或 符号）的值，该键指示当前元素所在的组。该函数使用以下参数调用

element

正在处理的当前元素。

index

正在处理的当前元素的索引。

返回值

一个 null 原型对象，包含所有组的属性，每个属性都分配给包含相关组元素的数组。

描述

Object.groupBy() 对可迭代对象中的每个元素调用一次提供的 callbackFn 函数。回调函数应该返回一个字符串或符号（既不是类型的值都会 强制转换为字符串），指示相关元素所在的组。callbackFn 返回的值用作 Map.groupBy() 返回的对象的键。每个键都有一个关联的数组，包含回调函数返回相同值的元素。

返回对象中的元素和原始可迭代对象中的元素是相同的（不是 深拷贝）。更改元素的内部结构会反映在原始可迭代对象和返回对象中。

示例

使用 Object.groupBy()

首先，我们定义一个数组，其中包含表示不同食品库存的对象。每种食品都有一个 type 和一个 quantity。

js
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 属性的值对元素进行分组。

js
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 组。

js
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 }
  ]
}
*/

规范

规范
数组分组
# sec-object.groupby

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅