Peta javascript vs mengurangi kinerja

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

Yang 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 ?

Setiap 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

Salah 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…

Seperti 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

Silakan berlangganan blog saya. Anda akan sering menerima artikel seperti ini langsung di Kotak Masuk Anda

Apakah peta lebih cepat daripada pengurangan?

Apakah peta JavaScript lambat?

Apa yang lebih cepat dari peta di JavaScript?

Apakah peta lebih cepat daripada untuk loop JavaScript?