JavaScript Object.groupBy() メソッド

概要：このチュートリアルでは、JavaScript の groupBy() メソッドを使用して、指定されたコールバック関数によって返される値に基づいて、イテラブルの要素をグループ化する方法を学びます。

JavaScript groupBy() 関数の紹介

Object.groupBy() は、指定されたコールバック関数によって返される値に基づいて、イテラブルの要素をグループ化できる静的メソッドです。

Object.groupBy() は、要素を異なるグループに分類したい場合に役立ちます。

groupBy() メソッドの構文は次のとおりです。

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

この構文では

• items：グループ化したい要素を持つイテラブル（例：配列）。
• callbackFn：イテラブル内の各要素に対して実行する関数。現在の要素のグループを示すプロパティキー（文字列またはシンボル）に強制変換できる値を返す必要があります。

Object.groupBy() メソッドは、すべてのグループのプロパティを持つ null プロトタイプ オブジェクトを返し、それぞれが関連付けられたグループの要素を含む配列に割り当てられます。

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)

この例では、コールバック関数でグループ化するために書籍オブジェクトの genre プロパティを使用します。結果のオブジェクトには、Fiction、Non-Fiction、Science Fiction の 3 つのグループがあります。

コードをより簡潔にするために、次のようにオブジェクトの分割代入を使用できます。

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() は、指定されたコールバックによって返される特定の基準に基づいて要素をグループ化するための強力なメソッドです。