「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > #LearnedToday: Object.groupBy()

#LearnedToday: Object.groupBy()

2024 年 11 月 1 日に公開
ブラウズ:566

#LearnedToday: Object.groupBy()

?ついに出ましたね!オブジェクトの配列をフィールドの特定の値でグループ化するための醜いコードを記述する必要はもうありません!

2023 年後半から、groupBy() と呼ばれる Object の公式の静的メソッドが追加されました。 これは、配列などの Iterable と、要素ごとに実行される関数を受け入れ、その特定の要素の「カテゴリ」を返す必要があります。
このメソッドは、各キーが異なるカテゴリであり、その特定のカテゴリに属する​​オブジェクトの配列を含む新しいオブジェクトを返します。

注: 返されたオブジェクトと元の反復可能オブジェクトの要素は同じです (深いコピーではありません!)。要素の内部構造を変更すると、元の反復可能オブジェクトと返されたオブジェクトの両方に反映されます。

ニンジャ タートルズのすべてのキャラクターを年齢別に

グループ化することがいかに簡単であるかを実際の例で見てみましょう。 初期配列

const ninjaTurtlesCharacters = [ { 年齢: 16 歳、名前: 「ミケランジェロ」 }、 { 年齢: 16 歳、名前: 'ラファエロ' }、 { 年齢: 16 歳、名前: 'ドナテロ' }、 { 年齢: 16 歳、名前: 'レオナルド' }、 { 年齢: 91 歳、名前: 「スプリンター」 }、 { 年齢: 25 歳、名前: 'ケイシー ジョーンズ' }、 { 年齢: 25 歳、名前: 'エイプリル・オ\'ニール' } ];

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( (グループ化された人々、アイテム) => ({ ...グループ化された人々、 [item.age]: groupedPeople[item.age] ? [...groupedPeople[item.age], item] : [アイテム]、 })、 {} );

const ninjaTurtlesCharactersByAge = ninjaTurtlesCharacters.reduce(
  (groupedPeople, item) => ({
    ...groupedPeople,
    [item.age]: groupedPeople[item.age]
      ? [...groupedPeople[item.age], item]
      : [item],
  }),
  {}
);

const ninjaTurtlesCharactersByAgeNew = Object.groupBy( 忍者タートルズのキャラクター、 ({ 年齢 }) => 年齢 );

const ninjaTurtlesCharactersByAgeNew = Object.groupBy(
  ninjaTurtlesCharacters,
  ({ age }) => age
);
ヒント: オブジェクトの代わりにマップを返したい場合は、Map.groupBy() を使用してください

結果

{ "16": [ { 年齢: 16 歳、名前: 「ミケランジェロ」 }、 { 年齢: 16 歳、名前: 'ラファエロ' }、 { 年齢: 16 歳、名前: 'ドナテロ' }、 { 年齢: 16 歳、名前: 'レオナルド' } ]、 "25": [ { 年齢: 25 歳、名前: 'ケイシー ジョーンズ' }、 { 年齢: 25 歳、名前: 'エイプリル・オ\'ニール' } ]、 "91": [ { 年齢: 91 歳、名前: 「スプリンター」 } ] }

{
  "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' }
  ]
}

??‍?いつものように、コードで遊ぶための単純な Stackblitz プロジェクトを作成しました。

?ドキュメント: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy

ℹ ブラウザのサポート: https://caniuse.com/mdn-javascript_builtins_object_groupby

リリースステートメント この記事は次の場所に転載されています: https://dev.to/danielzotti/learnedtoday-objectgroupby-4kl9?1 侵害がある場合は、[email protected] に連絡して削除してください。
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3