Array grouping
Object.groupBy() は配列の要素をコールバック関数の戻り値をキーとしてグループ化し、プレーンオブジェクトで返します。Map.groupBy() は Map を返します。
概要
Object.groupBy() は配列の要素をコールバック関数の戻り値をキーとしてグループ化し、プレーンオブジェクトで返します。Map.groupBy() は Map を返します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 117 | 117 | 119 | 17.4 | 117 | 17.4 | |
| ビルトインオブジェクト | ||||||
| Object.groupBy() は静的メソッドで、指定されたコールバック関数によって返された文字列値に従って、指定された反復可能な要素をグループ化します。返されるオブジェクトには、グループごとに個別のプロパティがあり、グループ内の要素を含む配列が格納されます。 | 117 | 117 | 119 | 17.4 | 117 | 17.4 |
注釈 2件
削除済み
- このバージョンで機能が削除されました (17.4)
対応条件
- 以前は別名で対応していました: Array.prototype.groupToMap (16.4)
注釈 2件
削除済み
- このバージョンで機能が削除されました (17.4)
対応条件
- 以前は別名で対応していました: Array.prototype.groupToMap (16.4)
注釈 2件
削除済み
- このバージョンで機能が削除されました (17.4)
対応条件
- 以前は別名で対応していました: Array.prototype.groupToMap (16.4)
注釈 2件
削除済み
- このバージョンで機能が削除されました (17.4)
対応条件
- 以前は別名で対応していました: Array.prototype.groupToMap (16.4)
基本構文
JAVASCRIPT
const products = [
{ name: 'apple', type: 'fruit' },
{ name: 'carrot', type: 'vegetable' },
{ name: 'banana', type: 'fruit' },
{ name: 'spinach', type: 'vegetable' },
];
const grouped = Object.groupBy(products, p => p.type);
// {
// 'fruit': [{ name: 'apple', ... }, { name: 'banana', ... }],
// 'vegetable': [{ name: 'carrot', ... }, { name: 'spinach', ... }]
// }ライブデモ
実務での使いどころ
-
Array grouping の活用
配列の要素をコールバック関数の戻り値でグルーピングする。Object.groupBy と Map.groupBy を提供。
注意点
- 古いブラウザ（IE等）では対応していない。対象ブラウザを確認すること。
アクセシビリティ
- JavaScript による動的更新時は、aria-live リージョンで変更をスクリーンリーダーに通知する。
参考リンク
Powered by web-features