Object.groupBy()

¥Syntax

Object.groupBy(items, callbackFn)

¥Parameters

items

一个 iterable（例如 Array），其元素将被分组。

callbackFn

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

element

当前正在处理的元素。

index

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

¥Return value

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

¥A null-prototype object with properties for all groups, each assigned to an array containing the elements of the associated group.

¥Description

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

¥Object.groupBy() calls a provided callbackFn function once for each element in an iterable. The callback function should return a string or symbol (values that are neither type are coerced to strings) indicating the group of the associated element. The values returned by callbackFn are used as keys for the object returned by Map.groupBy(). Each key has an associated array containing all the elements for which the callback returned the same value.

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

¥The elements in the returned object and the original iterable are the same (not deep copies). Changing the internal structure of the elements will be reflected in both the original iterable and the returned object.

¥Examples

¥Using Object.groupBy()

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

¥First we define an array containing objects representing an inventory of different foodstuffs. Each food has a type and a 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 属性值对元素进行分组。

¥The code below groups the elements by the value of their type property.

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 的变量。这是一种访问函数内元素相关值的非常简洁的方法。

¥The arrow function just returns the type of each array element each time it is called. Note that the function argument { type } is a basic example of object destructuring syntax for function arguments. This unpacks the type property of an object passed as a parameter, and assigns it to a variable named type in the body of the function. This is a very succinct way to access the relevant values of elements within a function.

我们还可以创建根据元素的一个或多个属性中的值推断的组。下面是一个非常相似的示例，它根据 quantity 字段的值将项目放入 ok 或 restock 组。

¥We can also create groups inferred from values in one or more properties of the elements. Below is a very similar example that puts the items into ok or restock groups based on the value of the quantity field.

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

¥See also

• core-js 中 Object.groupBy 的 Polyfill
• 索引集合 指南
• Array.prototype.reduce()
• Object.fromEntries()
• Map.groupBy()