Perbedaan antara for loop dan map dalam javascript

Question

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()

Table of Contents Show

1. Nilai pengembalian
2. Kemampuan untuk merangkai metode lain
3. Mutabilitas
4. Kecepatan Kinerja
Apakah peta lebih baik daripada untuk loop JavaScript?
Apakah filter peta lebih cepat daripada for loop?
Apakah peta adalah loop JS?
Apa perbedaan antara map dan set di JavaScript?

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
//                    Mass

1

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
//                    Mass

2 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
//                    Mass

1 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
//                    Mass

2 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
//                    Mass

2 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
//                    Mass

9,

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
//                    Mass

2 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
//                    Mass

1

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: 55

3. 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
//                    Mass

2 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
//                    Mass

2 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
//                    Mass

1, 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 Terakhir

Seperti 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
//                    Mass

2, 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
//                    Mass

2 - 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

Ibrahima Ndaw

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

Apakah peta lebih baik daripada untuk loop JavaScript?

Kesimpulan Pertama. Peta lebih cepat daripada loop ?. Dalam hal ini ya. Tapi kita berada dalam konteks milidetik. Tetapi ketika kita membutuhkan manajemen data dalam jumlah besar, milidetik sangat penting.

Apakah filter peta lebih cepat daripada for loop?

Dalam keadaan khusus ini, jika Anda membutuhkan keuntungan sekitar setengah detik dari kinerja per 10.000.000 elemen di Chrome, Anda mungkin lebih baik menggunakan for loop untuk saat ini. Namun, pada platform / lingkungan lain atau keadaan lain, peta mungkin masih lebih cepat, dan bahkan mungkin lebih cepat di masa mendatang

Apakah peta adalah loop JS?

map() adalah metode larik bawaan untuk mengulangi elemen di dalam kumpulan larik di JavaScript . Pikirkan perulangan sebagai cara untuk maju dari satu elemen ke elemen lainnya dalam daftar, sambil tetap mempertahankan urutan dan posisi setiap elemen.

Apa perbedaan antara map dan set di JavaScript?

Set adalah larik satu dimensi dengan kunci unik, sedangkan Peta adalah larik dua dimensi dengan pasangan nilai kunci, di mana setiap kunci harus unik . Untuk Map(), kami mengizinkan penggunaan tipe primitif lainnya (termasuk NaN). Akibatnya, pengembang dapat menautkan ke jenis data lain.

kode javascript