Memulai dengan metode array JavaScript .map (), .filter () dan .reduce ()

Ketika saya menemukan cara menggunakan metode array JS .map() , .filter() dan .reduce() , semua yang saya baca, lihat dan dengarkan tampak sangat rumit. Konsep-konsep ini dianggap sebagai beberapa mekanisme independen yang tidak ada hubungannya dengan hal lain. Sulit bagi saya untuk memahami esensi mereka dan memahaminya.



Saya mendengar bahwa ini adalah hal-hal mendasar, pengertiannya adalah seperti perbatasan antara "inisiat" dan "yang belum tahu". Saya ingin kemudian diberi tahu yang sebenarnya tentang mereka. Terdiri dari fakta bahwa ketiga metode ini melambangkan fakta bahwa alasan untuk memilah-milah beberapa objek yang dapat diubah sering masuk ke dalam satu dari tiga kategori fungsional.

Melihat melalui kode yang saya tulis sebelumnya, saya menyadari bahwa dalam 95% kasus ketika saya mengulangi elemen string atau array, saya melakukan salah satu dari yang berikut:

• Menerapkan urutan instruksi tertentu untuk setiap nilai (analog dengan metode .map() ).
• Memfilter nilai yang cocok dengan kriteria yang diberikan (sama dengan .filter() tidak).
• Pengurangan kumpulan data ke nilai agregat tunggal (analog .reduce() ).

Itu adalah momen kebenaran. Saat itulah saya memahami esensi dari metode ini dan melihat hubungan mereka dengan apa yang telah lama saya ketahui.

Untuk berlatih, saya mengambil kode lama saya dan refactored menggunakan metode ini. Ini ternyata sangat berguna.

Dan sekarang, tanpa basa-basi lagi, mari kita bicara tentang metode ini, dan, khususnya, lihat bagaimana menggunakannya bukan skema luas untuk menggunakan loop.

Metode .Map ()

Metode .map() digunakan jika Anda perlu melakukan hal berikut:

1. Hal ini diperlukan untuk melakukan urutan tindakan tertentu pada setiap elemen dari objek iterable.
2. Penting untuk mengembalikan nilai, yang, mungkin, telah berubah.

Pertimbangkan contoh sederhana di mana untuk setiap elemen array yang berisi harga, Anda perlu menemukan jumlah baru yang mencakup harga asli dan pajak penjualan:

 const prices = [19.99, 4.95, 25, 3.50]; let new_prices = []; for(let i=0; i < prices.length; i++) {   new_prices.push(prices[i] * 1.06); } 

Berikut cara melakukan hal yang sama dengan .map() :

 const prices = [19.99, 4.95, 25, 3.50]; let new_prices = prices.map(price => price * 1.06); 

Ini menggunakan konstruksi sintaksis yang cukup ringkas. Jadi mari kita lihat contoh ini. Metode .map() menerima panggilan balik. Ini adalah fungsi yang akan diterapkan pada elemen-elemen array. Dalam hal ini, ini adalah fungsi panah, yang dideklarasikan langsung dalam tanda kurung setelah deklarasi metode.

Nama parameter price adalah nama yang akan digunakan saat bekerja dengan elemen array. Karena fungsi panah kami hanya memiliki satu parameter, kita dapat melakukannya tanpa tanda kurung ketika mendeklarasikannya.

Ekspresi setelah panah ( => ) adalah badan dari panggilan balik. Karena hanya ada satu ekspresi di tubuh fungsi, kita dapat melakukannya tanpa kurung kurawal dan tanpa kata kunci return .

Jika Anda menemukan entri ini tidak dapat dipahami, berikut adalah versi yang sedikit diperluas dari contoh ini:

 const prices = [19.99, 4.95, 25, 3.50]; let new_prices = prices.map((price) => {   return price * 1.06 }); 

Metode .Filter ()

Metode .filter() digunakan dalam kasus ketika beberapa elemen perlu dipilih dari objek iterable. Saat menggunakan metode ini, Anda harus ingat bahwa nilai yang sesuai dengan filter termasuk dalam hasil akhir, dan tidak dikecualikan darinya. Artinya - segala sesuatu yang dilewati oleh fungsi .filter() akan mengembalikan true , akan ditinggalkan.

Pertimbangkan contoh di mana hanya elemen aneh yang harus dipilih dari array bilangan bulat. Di sini kita menggunakan operator untuk mengambil sisa pembagian dan mencari tahu apakah ada sisa dari membagi setiap elemen array dengan 2. Jika sisanya adalah 1, ini memberitahu kita bahwa angka yang sesuai adalah ganjil. Pertama, mari kita lihat cara untuk menyelesaikan masalah ini menggunakan loop reguler:

 const numbers = [1,2,3,4,5,6,7,8]; let odds = []; for(let i=0; i < numbers.length; i++) {   if(numbers[i] % 2 == 1) {      odds.push(numbers[i]);   } } 

Metode .filter() , seperti .map() , menerima satu panggilan balik, ke mana elemen objek iterated akan diteruskan secara bergantian:

 const numbers = [1,2,3,4,5,6,7,8]; let odds = numbers.filter(num => num % 2); 

Di sini pekerjaan disusun dengan cara yang sama seperti pada contoh dengan .map() . Fungsi panah dilewatkan ke .filter() hanya menggunakan satu parameter, jadi kami melakukannya tanpa tanda kurung. Tubuhnya hanya berisi satu ekspresi, sehingga dapat dihilangkan dari kurung keriting dan dapat diterima untuk melakukannya tanpa return .

Metode .Reduce ()

Dan sekarang kami akhirnya sampai ke metode .reduce() . Dia, saya percaya, adalah yang paling sulit dipahami dari tiga metode yang dipertimbangkan saat ini. Nama metode ini mengisyaratkan bahwa itu digunakan untuk mengurangi beberapa nilai menjadi satu. Namun, bagi saya tampaknya lebih mudah untuk menganggapnya sebagai metode yang memungkinkan Anda untuk mengumpulkan nilai-nilai tertentu dari bagian-bagian, dan bukan sebagai metode yang memungkinkan Anda untuk "runtuh" ​​atau "mengurangi" sesuatu.

Ketika membangun kode di mana metode ini dipanggil, nilai awal tertentu ditetapkan pertama kali. Ketika metode ini mengulangi nilai array, nilai awal ini dimodifikasi dan, dalam bentuk yang dimodifikasi, diteruskan ke iterasi berikutnya.

Ini adalah masalah klasik, untuk menyelesaikannya Anda perlu menghitung jumlah elemen array. Dalam kasus kami, ini terdiri dari menemukan jumlah sumbangan untuk proyek amal tertentu:

 const donations = [5, 20, 100, 80, 75]; let total = 0; for(let i=0; i < donations.length; i++) {   total += donations[i]; } 

Berbeda dengan metode .map() dan .filter() , metode .reduce() membutuhkan panggilan balik yang menggunakan dua parameter. Ini adalah baterai dan nilai saat ini. Baterai adalah parameter pertama. Dialah yang dimodifikasi pada setiap iterasi dan diteruskan ke yang berikut:

 const donations = [5, 20, 100, 80, 75]; let total = donations.reduce((total,donation) => {   return total + donation; }); 

.reduce() juga bisa memberikan argumen kedua ke metode .reduce() . Inilah yang akan memainkan peran nilai awal untuk baterai. Misalkan kita ingin mengetahui jumlah total donasi dalam dua hari, mengingat kemarin jumlah ini adalah $ 450, dan informasi tentang donasi hari ini disimpan dalam array:

 const donations = [5, 20, 100, 80, 75]; let total = donations.reduce((total,donation) => {   return total + donation; }, 450); 

Ringkasan

Semoga sekarang Anda sudah menemukan metode .filter() array .map() , .filter() dan .reduce() . Anggap saja sebagai mekanisme yang meningkatkan keterbacaan kode Anda. Mereka memungkinkan Anda untuk menulis lebih banyak program yang ringkas daripada yang diperoleh menggunakan loop konvensional. Tetapi kekuatan utama mereka adalah bahwa mereka memungkinkan Anda untuk secara jelas menyatakan niat yang mendasari kode.

Berkat metode ini, kode yang telah ditulis selama beberapa waktu akan lebih mudah dibaca. Alih-alih mempelajari konstruksi yang ditempatkan di dalam for loop, melakukan ini hanya untuk memahami tujuan akhir mereka, Anda hanya dapat membentuk gagasan umum tentang alasan adanya potongan kode tertentu dengan melihat nama salah satu metode ini.

Pembaca yang budiman! Apakah Anda menggunakan metode array .map (), .filter (), dan .reduce () JS?