#LearnedToday: Object.groupBy()

? Ia akhirnya keluar! Tidak perlu lagi menulis kod hodoh untuk mengumpulkan pelbagai objek mengikut nilai medan tertentu!

Sejak lewat 2023, terdapat kaedah statik rasmi untuk Objek dipanggil groupBy() yang melakukannya untuk kita!
Ia menerima Iterable, seperti Array, dan fungsi, yang dilaksanakan untuk setiap elemen dan mesti mengembalikan "kategori" elemen khusus itu.
Kaedah ini mengembalikan Objek baharu dengan setiap kunci ialah kategori berbeza yang mengandungi tatasusunan objek yang tergolong dalam kategori tertentu itu.

NOTA: Unsur-unsur dalam objek yang dikembalikan dan boleh lelar asal adalah sama (bukan salinan dalam!). Menukar struktur dalaman unsur-unsur akan dicerminkan dalam kedua-dua lelaran asal dan objek yang dikembalikan.

Contoh

Mari kita berikan contoh praktikal untuk melihat betapa mudahnya menghimpunkan semua watak Ninja Turtles mengikut umur.

Susunan awal

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' }
];

Cara LAMA yang baik (dengan pengurangan)

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

Cara MODEN

const ninjaTurtlesCharactersByAgeNew = Object.groupBy(
  ninjaTurtlesCharacters,
  ({ age }) => age
);

Petua: gunakan Map.groupBy() jika anda mahu mengembalikan Peta dan bukannya Objek

Hasilnya

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

Demo

??? Seperti biasa, saya mencipta prject Stackblitz yang mudah untuk bermain dengan kod.

? Dokumen: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy

ℹ Sokongan penyemak imbas: https://caniuse.com/mdn-javascript_builtins_object_groupby

Atas ialah kandungan terperinci #LearnedToday: Object.groupBy(). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!