JavaScript memiliki beberapa metode praktis yang membantu kita melakukan iterasi melalui array kita. Dua yang paling umum digunakan untuk iterasi adalah Array.prototype.map() dan Array.prototype.forEach()
Tapi saya pikir mereka masih sedikit tidak jelas, terutama untuk pemula. Karena mereka berdua melakukan iterasi dan menghasilkan sesuatu. Jadi, apa bedanya?
Pada artikel ini, kita akan melihat berikut ini
- Definisi
- Nilai pengembalian
- Kemampuan untuk merangkai metode lain
- Mutabilitas
- Kecepatan Kinerja
- Pikiran Akhir
Definisi
Metode map menerima fungsi sebagai parameter. Kemudian itu menerapkannya pada setiap elemen dan mengembalikan array yang sama sekali baru yang diisi dengan hasil pemanggilan fungsi yang disediakan
Ini berarti mengembalikan array baru yang berisi gambar dari setiap elemen array. Itu akan selalu mengembalikan jumlah item yang sama
const myAwesomeArray = [5, 4, 3, 2, 1] myAwesomeArray.map(x => x * x) // >>>>>>>>>>>>>>>>> Output: [25, 16, 9, 4, 1]Seperti map , metode forEach() menerima fungsi sebagai argumen dan mengeksekusinya sekali untuk setiap elemen array. Namun, alih-alih mengembalikan array baru seperti map, ia mengembalikan const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass1
const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass_1. Nilai pengembalian
Perbedaan pertama antara const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass2 dan forEach() adalah nilai kembalian. Metode forEach() mengembalikan const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass1 dan const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass2 mengembalikan array baru dengan elemen yang diubah. Bahkan jika mereka melakukan pekerjaan yang sama, nilai pengembaliannya tetap berbeda
const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.forEach(x => x * x) //>>>>>>>>>>>>>return value: undefined myAwesomeArray.map(x => x * x) //>>>>>>>>>>>>>return value: [1, 4, 9, 16, 25] _2. Kemampuan untuk merangkai metode lain
Perbedaan kedua antara metode array ini adalah fakta bahwa const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass2 dapat dirantai. Ini berarti Anda dapat melampirkan const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass_8, const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass9, const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.forEach(x => x * x) //>>>>>>>>>>>>>return value: undefined myAwesomeArray.map(x => x * x) //>>>>>>>>>>>>>return value: [1, 4, 9, 16, 25] 0 dan seterusnya setelah melakukan metode const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass2 pada array
Itu adalah sesuatu yang tidak dapat Anda lakukan dengan ________32______ karena, seperti yang Anda duga, itu mengembalikan const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass1
const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.forEach(x => x * x).reduce((total, value) => total + value) //>>>>>>>>>>>>> Uncaught TypeError: Cannot read property 'reduce' of undefined myAwesomeArray.map(x => x * x).reduce((total, value) => total + value) //>>>>>>>>>>>>>return value: 553. Mutabilitas
Secara umum, kata "bermutasi" berarti mengubah, mengganti, memodifikasi atau mengubah. Dan di dunia JavaScript memiliki arti yang sama
Objek yang bisa berubah adalah objek yang statusnya dapat dimodifikasi setelah dibuat. Jadi, bagaimana dengan const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.forEach(x => x * x) //>>>>>>>>>>>>>return value: undefined myAwesomeArray.map(x => x * x) //>>>>>>>>>>>>>return value: [1, 4, 9, 16, 25] 4 dan map tentang mutabilitas?
Nah, menurut dokumentasi MDN
forEach() tidak memutasikan array tempat ia dipanggil. (Namun, const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.forEach(x => x * x) //>>>>>>>>>>>>>return value: undefined myAwesomeArray.map(x => x * x) //>>>>>>>>>>>>>return value: [1, 4, 9, 16, 25] _7 dapat melakukannya)
const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass2 tidak memutasikan array yang dipanggil (walaupun const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.forEach(x => x * x) //>>>>>>>>>>>>>return value: undefined myAwesomeArray.map(x => x * x) //>>>>>>>>>>>>>return value: [1, 4, 9, 16, 25] 7, jika dipanggil, dapat melakukannya)
JavaScript itu aneh
Di sini, kita melihat definisi yang sangat mirip, dan kita semua tahu bahwa keduanya menerima const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.forEach(x => x * x) //>>>>>>>>>>>>>return value: undefined myAwesomeArray.map(x => x * x) //>>>>>>>>>>>>>return value: [1, 4, 9, 16, 25] 7 sebagai argumen. Jadi, mana yang bergantung pada kekekalan?
Nah, menurut saya, definisi ini tidak jelas. Dan untuk mengetahui mana yang tidak mengubah array asli, pertama-tama kita harus memeriksa cara kerja kedua metode ini
Metode const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass2 mengembalikan array yang sama sekali baru dengan elemen yang diubah dan jumlah data yang sama. Dalam kasus forEach(), bahkan jika ia mengembalikan const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass1, ia akan memutasikan larik asli dengan const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.forEach(x => x * x) //>>>>>>>>>>>>>return value: undefined myAwesomeArray.map(x => x * x) //>>>>>>>>>>>>>return value: [1, 4, 9, 16, 25] 7
Oleh karena itu, kami melihat dengan jelas bahwa const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass_2 bergantung pada kekekalan dan forEach() adalah metode mutator
4. Kecepatan Kinerja
Mengenai kecepatan kinerja, mereka sedikit berbeda. Tapi, apakah itu penting?
Anda dapat memeriksanya sendiri dengan contoh di bawah ini atau dengan jsPerf untuk melihat mana yang lebih cepat
const myAwesomeArray = [1, 2, 3, 4, 5] const startForEach = performance.now() myAwesomeArray.forEach(x => (x + x) * 10000000000) const endForEach = performance.now() console.log(`Speed [forEach]: ${endForEach - startForEach} miliseconds`) const startMap = performance.now() myAwesomeArray.map(x => (x + x) * 10000000000) const endMap = performance.now() console.log(`Speed [map]: ${endMap - startMap} miliseconds`) _Pemikiran TerakhirSeperti biasa, pilihan antara const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass_2 dan forEach() akan bergantung pada kasus penggunaan Anda. Jika Anda berencana untuk mengubah, mengganti, atau menggunakan data, Anda harus memilih const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass2, karena mengembalikan larik baru dengan data yang diubah
Tapi, jika Anda tidak memerlukan array yang dikembalikan, jangan gunakan const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass2 - alih-alih gunakan forEach() atau bahkan const myAwesomeArray = [1, 2, 3, 4, 5] const startForEach = performance.now() myAwesomeArray.forEach(x => (x + x) * 10000000000) const endForEach = performance.now() console.log(`Speed [forEach]: ${endForEach - startForEach} miliseconds`) const startMap = performance.now() myAwesomeArray.map(x => (x + x) * 10000000000) const endMap = performance.now() console.log(`Speed [map]: ${endMap - startMap} miliseconds`) 2 loop
Semoga posting ini menjelaskan perbedaan antara kedua metode ini. Jika ada lebih banyak perbedaan, silakan bagikan di bagian komentar, jika tidak, terima kasih telah membacanya
Baca lebih lanjut artikel saya di blog saya
Foto oleh Franck V. di Unsplash
IKLAN
IKLAN
IKLAN
IKLAN
Penggemar JavaScript, Pengembang & blogger full-stack
Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih
Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai