JavaScript Object.groupBy() 方法

摘要：在本教程中，您将学习如何使用 JavaScript groupBy() 方法根据指定回调函数返回的值对可迭代对象中的元素进行分组。

JavaScript groupBy() 函数简介

Object.groupBy() 是一个静态方法，允许您根据指定回调函数返回的值对可迭代对象中的元素进行分组。

当您想要将元素分类到不同的组时，Object.groupBy() 会非常有用。

以下是 groupBy() 方法的语法

Object.groupBy(items, callbackFn);Code language: JavaScript (javascript)

在此语法中

• items：您要分组的元素的可迭代对象（例如，数组）。
• callbackFn：要对可迭代对象中的每个元素执行的函数。它应该返回一个可以强制转换为属性键（字符串或符号）的值，该值表示当前元素所属的组。

Object.groupBy() 方法返回一个空原型对象，该对象包含所有组的属性，每个属性都分配给一个包含关联组元素的数组。

Object.groupBy() 方法对可迭代对象中的每个元素调用 callbackFn 函数。

callbackFn 函数应该返回一个字符串或符号，该字符串或符号用作当前元素所属组的键。

callbackFn 返回的值用作 Object.groupBy() 返回的对象的键，每个键都与一个关联数组相关联，该数组包含所有共享相同组的元素。

JavaScript groupBy() 函数

让我们探索一些使用 Object.groupBy() 函数的示例。

1) 使用 Object.groupBy() 方法按类型对书籍进行分组

以下示例使用 groupBy() 方法按类型对书籍对象进行分组

const books = [
  { title: 'The Catcher in the Rye', genre: 'Fiction' },
  { title: 'Sapiens', genre: 'Non-Fiction' },
  { title: 'Dune', genre: 'Science Fiction' },
  { title: 'To Kill a Mockingbird', genre: 'Fiction' },
];

const group = Object.groupBy(books, (book) => book.genre);

console.log(group);Code language: JavaScript (javascript)

输出

[Object: null prototype] {
  Fiction: [
    { title: 'The Catcher in the Rye', genre: 'Fiction' },
    { title: 'To Kill a Mockingbird', genre: 'Fiction' }
  ],
  'Non-Fiction': [ { title: 'Sapiens', genre: 'Non-Fiction' } ],
  'Science Fiction': [ { title: 'Dune', genre: 'Science Fiction' } ]
}Code language: JavaScript (javascript)

在此示例中，我们使用书籍对象的类型属性在回调函数中进行分组。结果对象有三个组：Fiction、Non-Fiction 和 Science Fiction。

为了使代码更简洁，您可以使用 对象解构，如下所示

const group = Object.groupBy(books, ({genre}) => genre);Code language: JavaScript (javascript)

{genre} 从书籍对象中提取 genre 属性，回调函数将其作为组的键返回。

2) 使用 Object.groupBy() 方法对数字进行分组

以下示例使用 groupBy() 方法将数字分类到 odd 和 even 组中

const numbers = [1, 2, 6, 5, 4, 9];
const group = Object.groupBy(numbers, (n) => (n % 2 == 0 ? 'even' : 'odd'));
console.log(group);Code language: JavaScript (javascript)

输出

[Object: null prototype] { odd: [ 1, 5, 9 ], even: [ 2, 6, 4 ] }Code language: JavaScript (javascript)

在此示例中，我们定义一个回调函数，该函数接受每个数字 n 并检查它是否为偶数 (n % 2 == 0)。

如果为偶数，回调函数将返回字符串 'even'；否则，它将返回 'odd'。groupBy() 方法使用字符串作为分组的键。

摘要

• 使用 JavaScript Object.groupBy() 是一个强大的方法，用于根据指定回调函数返回的特定条件对元素进行分组。