| CARVIEW |
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
Object.groupBy()
Baseline
2024
Newly available
Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
メモ:
一部のブラウザーのあるバージョンでは、このメソッドは Array.prototype.group() というメソッドとして実装されていました。ウェブの互換性の問題により、現在は静的メソッドとして実装されています。詳細はブラウザーの互換性を確認してください。
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 プロトタイプオブジェクト で、それぞれに関連するグループの要素を含む配列が割り当てられたものです。
解説
Object.groupBy() は、指定された callbackFn 関数を反復可能な要素ごとに 1 回呼び出します。コールバック関数は、関連付けられた要素のグループを示す文字列またはシンボル（どちらの型でもない値は文字列変換されます）を返す必要があります。 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);
/* 結果:
{
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 という名前の変数に代入します。 これは、関数内の要素に関連する値にアクセスするためのとても簡潔な方法です。
また、要素の 1 つまたは複数のプロパティの値から推測されるグループを作成することもできます。 以下は、quantity フィールドの値に基づいて、項目を ok または restock グループに入れる、とても似たような例です。
function myCallback({ quantity }) {
return quantity > 5 ? "ok" : "restock";
}
const result2 = Object.groupBy(inventory, myCallback);
/* 結果:
{
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 }
]
}
*/
仕様書
| Specification |
|---|
| ECMAScript® 2026 Language Specification # sec-object.groupby |
ブラウザーの互換性
Loading…