Oke jadi ya kita tahu mereka berbeda mereka memiliki maksud dan tujuan yang berbeda tetap saja kita tidak mau repot untuk memahaminya
Mari kita langsung ke mereka
Kami menggunakan array. Banyak array. Kami menggunakan array untuk menampilkan daftar pencarian, item yang ditambahkan ke keranjang pengguna, Berapa kali Anda masuk ke sistem Anda, bukan?
Objek inbuilt Javascript Array menyediakan beberapa fungsi yang sangat keren dan bermanfaat untuk mengelola data kami yang disimpan dalam array. Kami akan melihat metode ini dengan sangat cepat
Mari kita mulai dengan yang mudah
1. Untuk setiapYang mudah bukan?
Foreach mengambil fungsi callback dan menjalankan fungsi callback tersebut pada setiap elemen array satu per satu
var sample = [1, 2, 3];// es5sample.forEach(function (elem, index){console.log(elem + ' comes at ' + index);
})// es6sample.forEach((elem, index) => `${elem} comes at ${index}`)/*
output1 comes at 0
2 comes at 1
3 comes at 2
*/
Untuk setiap elemen pada array, kami memanggil panggilan balik yang mendapatkan elemen dan indeksnya disediakan oleh foreach
Pada dasarnya forEach berfungsi sebagai perulangan for tradisional di atas array dan memberi Anda elemen array untuk melakukan operasi padanya
Oke. sangat jelas ?
2. SaringSetiap kali Anda harus memfilter array, metode inbuilt Javascript untuk memfilter array Anda adalah pilihan yang tepat untuk digunakan. Filter memungkinkan Anda memberikan panggilan balik untuk setiap elemen dan mengembalikan array yang difilter
Perbedaan utama antara forEach dan filter adalah forEach hanya mengulang array dan mengeksekusi callback tetapi filter mengeksekusi callback dan memeriksa nilai pengembaliannya. Jika nilainya benar elemen tetap dalam larik yang dihasilkan tetapi jika nilai yang dikembalikan salah, elemen akan dihapus untuk larik yang dihasilkan
var sample = [1, 2, 3] // yeah same array// es5var result = sample.filter(function(elem){return elem !== 2;
})console.log(result)// es6var result = sample.filter(elem => elem !== 2)/* output */[1, 3]_
Lihat betapa mudahnya itu. Kami melewati panggilan balik ke filter yang dijalankan terhadap setiap elemen dalam larik. Dalam panggilan balik kami memeriksa apakah elemennya. == 2 jika kondisi gagal (ketika elem sama dengan 1 atau 3) sertakan mereka ke dalam larik yang dihasilkan, jika tidak, jangan sertakan elemen dalam larik yang dihasilkan
Perhatikan juga filter tidak memperbarui array yang ada, itu akan mengembalikan array yang difilter baru setiap saat
3. PetaSalah satu metode array favorit dan paling banyak digunakan sepanjang masa. Sebagai pengembang ReactJS saya banyak menggunakan peta di dalam UI aplikasi saya
Peta seperti filter dan foreach mengambil panggilan balik dan menjalankannya terhadap setiap elemen pada array tetapi yang membuatnya unik adalah menghasilkan array baru berdasarkan array yang ada
Mari kita pahami peta dengan sebuah contoh
var sample = [1, 2, 3] // i am never gonna change Boo! Yeah// es5var mapped = sample.map(function(elem) {return elem * 10;
})// es6let mapped = sample.map(elem => elem * 10)console.log(mapped);/* output */[10, 20, 30]
Peta menelusuri setiap elemen array, mengalikannya menjadi 10 dan mengembalikan elemen yang akan disimpan di dalam array hasil kami
Seperti halnya filter, map juga mengembalikan sebuah array. Callback yang disediakan untuk memetakan memodifikasi elemen array dan menyimpannya ke dalam array baru setelah selesai, array tersebut dikembalikan sebagai array yang dipetakan
Dan yang tak kalah pentingnya…
4. MengurangiSeperti namanya, metode pengurangan objek array digunakan untuk mengurangi array menjadi satu nilai tunggal
Misalnya jika Anda harus menambahkan semua elemen array, Anda dapat melakukan hal seperti ini
var sample = [1, 2, 3] // here we meet again// es5var sum = sample.reduce(function(sum, elem){return sum + elem;
})// es6var sum = sample.reduce((sum, elem) => sum + elem)console.log(sum)
pengurangan membutuhkan panggilan balik (seperti setiap fungsi yang kita bicarakan). Di dalam callback ini kita mendapatkan dua argumen sum & elem. Jumlahnya adalah nilai terakhir yang dikembalikan dari fungsi pengurangan. Misalnya awalnya nilai penjumlahan akan menjadi 0 kemudian ketika panggilan balik berjalan pada elemen pertama, ia akan menambahkan elem ke penjumlahan dan mengembalikan nilai tersebut. Pada iterasi kedua nilai penjumlahan akan menjadi elemen pertama + 0, pada iterasi ketiga akan menjadi 0 + elemen pertama + elemen kedua
Jadi begitulah cara kerja pengurangan itu mengurangi array menjadi satu nilai tunggal dan mengembalikannya setelah selesai
Jika Anda bertanya-tanya mengapa saya menulis kode es6 di atas di mana-mana, itu karena saya suka es6
Bagikan artikel ini di twitter di bawah agar semua orang tahu Anda menikmatinya
Hai, Nama saya Manoj Singh Negi. Saya seorang Pengembang Javascript dan penulis mengikuti saya di Twitter atau Github
Saya tersedia untuk memberikan ceramah umum atau untuk pertemuan, hubungi saya di justanothermanoj@gmail. com jika Anda ingin bertemu dengan saya
Sangat menyukai artikel ini?Silakan berlangganan blog saya. Anda akan sering menerima artikel seperti ini langsung di Kotak Masuk Anda