?ついに出ましたね!オブジェクトの配列をフィールドの特定の値でグループ化するための醜いコードを記述する必要はもうありません!
2023 年後半から、groupBy() と呼ばれる Object の公式の静的メソッドが追加されました。
これは、配列などの Iterable と、要素ごとに実行される関数を受け入れ、その特定の要素の「カテゴリ」を返す必要があります。
このメソッドは、各キーが異なるカテゴリであり、その特定のカテゴリに属するオブジェクトの配列を含む新しいオブジェクトを返します。
注: 返されたオブジェクトと元の反復可能オブジェクトの要素は同じです (深いコピーではありません!)。要素の内部構造を変更すると、元の反復可能オブジェクトと返されたオブジェクトの両方に反映されます。例
グループ化することがいかに簡単であるかを実際の例で見てみましょう。 初期配列
const ninjaTurtlesCharacters = [ { age: 16, name: 'Michelangelo' }, { age: 16, name: 'Raffaello' }, { age: 16, name: 'Donatello' }, { age: 16, name: 'Leonardo' }, { age: 91, name: 'Splinter' }, { age: 25, name: 'Casey Jones' }, { age: 25, name: 'April O\'Neil' } ];
const ninjaTurtlesCharactersByAge = ninjaTurtlesCharacters.reduce( (groupedPeople, item) => ({ ...groupedPeople, [item.age]: groupedPeople[item.age] ? [...groupedPeople[item.age], item] : [item], }), {} );
const ninjaTurtlesCharactersByAgeNew = Object.groupBy( ninjaTurtlesCharacters, ({ age }) => age );ヒント: オブジェクトの代わりにマップを返したい場合は、Map.groupBy() を使用してください
結果
{ "16": [ { age: 16, name: 'Michelangelo' }, { age: 16, name: 'Raffaello' }, { age: 16, name: 'Donatello' }, { age: 16, name: 'Leonardo' } ], "25": [ { age: 25, name: 'Casey Jones' }, { age: 25, name: 'April O\'Neil' } ], "91": [ { age: 91, name: 'Splinter' } ] }
?ドキュメント: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy
ℹ ブラウザのサポート: https://caniuse.com/mdn-javascript_builtins_object_groupby
免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。
Copyright© 2022 湘ICP备2022001581号-3