#LearnedToday: Object.groupBy()

PHPz
Lepaskan: 2024-08-26 21:39:08
asal
688 orang telah melayarinya

#LearnedToday: Object.groupBy()

? Ia akhirnya keluar! Tidak perlu lagi menulis kod hodoh untuk mengumpulkan tatasusunan 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 di mana setiap kunci adalah 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 objek lelaran asal dan objek yang dikembalikan.

Contoh

Mari kita berikan contoh praktikal untuk melihat betapa mudahnya untukmenghimpun 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' } ];
Salin selepas log masuk

Cara LAMA yang baik (dengan pengurangan)

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

Cara MODEN

const ninjaTurtlesCharactersByAgeNew = Object.groupBy( ninjaTurtlesCharacters, ({ age }) => age );
Salin selepas log masuk

Petua: gunakan Map.groupBy() jika anda ingin 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' } ] }
Salin selepas log masuk

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!