Untuk loop di dalam map javascript

// Arrow function map((element) => { /* … */ }) map((element, index) => { /* … */ }) map((element, index, array) => { /* … */ }) // Callback function map(callbackFn) map(callbackFn, thisArg) // Inline callback function map(function (element) { /* … */ }) map(function (element, index) { /* … */ }) map(function (element, index, array) { /* … */ }) map(function (element, index, array) { /* … */ }, thisArg) _

const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] _3

Fungsi untuk mengeksekusi setiap elemen dalam array. Nilai pengembaliannya ditambahkan sebagai elemen tunggal dalam larik baru

Fungsi tersebut dipanggil dengan argumen berikut

Elemen saat ini sedang diproses dalam larik

Indeks elemen saat ini sedang diproses dalam larik

Array const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] _2 dipanggil

Nilai untuk digunakan sebagai const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] _9 saat menjalankan const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] 3. Lihat

Array baru dengan setiap elemen merupakan hasil dari fungsi callback

Metode const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] 2 adalah sebuah. Itu memanggil fungsi const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] 3 yang disediakan satu kali untuk setiap elemen dalam array dan membuat array baru dari hasilnya

const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] 3 dipanggil hanya untuk indeks array yang telah menetapkan nilai. Itu tidak dipanggil untuk slot kosong

Metode const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] 2 adalah a. Itu tidak mengubah const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] _9. Namun, fungsi yang disediakan sebagai const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] _3 dapat mengubah array. Perhatikan, bagaimanapun, bahwa panjang array disimpan sebelum pemanggilan pertama dari const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] 3. Karena itu

• const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] 3 tidak akan mengunjungi elemen apa pun yang ditambahkan melebihi panjang awal array saat panggilan ke const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] 2 dimulai
• Perubahan pada indeks yang sudah dikunjungi tidak menyebabkan const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] 3 dipanggil lagi
• Jika elemen array yang sudah ada dan belum dikunjungi diubah oleh const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] 3, nilainya diteruskan ke const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] 3 akan menjadi nilai pada saat elemen tersebut dikunjungi. Elemen yang dihapus tidak dikunjungi

Peringatan. Modifikasi bersamaan dari jenis yang dijelaskan di atas sering menyebabkan kode yang sulit dipahami dan umumnya harus dihindari (kecuali dalam kasus khusus)

Metode const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] 2 adalah. Itu hanya mengharapkan nilai const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] _9 memiliki properti const numbers = [1, 4, 9]; const doubles = numbers.map((num) => num * 2); console.log(doubles); // [2, 8, 18] console.log(numbers); // [1, 4, 9] 5 dan properti dengan kunci bilangan bulat

Karena const numbers = [1, 4, 9]; const doubles = numbers.map((num) => num * 2); console.log(doubles); // [2, 8, 18] console.log(numbers); // [1, 4, 9] _6 membuat array baru, memanggilnya tanpa menggunakan array yang dikembalikan adalah anti-pola;

Kode berikut mengambil larik angka dan membuat larik baru yang berisi akar kuadrat dari angka dalam larik pertama

const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9]

Kode berikut mengambil larik objek dan membuat larik baru yang berisi objek yang baru diformat ulang

const kvArray = [ { key: 1, value: 10 }, { key: 2, value: 20 }, { key: 3, value: 30 }, ]; const reformattedArray = kvArray.map(({ key, value }) => ({ [key]: value })); console.log(reformattedArray); // [{ 1: 10 }, { 2: 20 }, { 3: 30 }] console.log(kvArray); // [ // { key: 1, value: 10 }, // { key: 2, value: 20 }, // { key: 3, value: 30 } // ]

Kode berikut menunjukkan bagaimana const numbers = [1, 4, 9]; const doubles = numbers.map((num) => num * 2); console.log(doubles); // [2, 8, 18] console.log(numbers); // [1, 4, 9] 6 bekerja ketika sebuah fungsi yang membutuhkan satu argumen digunakan dengannya. Argumen akan secara otomatis ditugaskan dari setiap elemen array sebagai const numbers = [1, 4, 9]; const doubles = numbers.map((num) => num * 2); console.log(doubles); // [2, 8, 18] console.log(numbers); // [1, 4, 9] 6 loop melalui array asli

const numbers = [1, 4, 9]; const doubles = numbers.map((num) => num * 2); console.log(doubles); // [2, 8, 18] console.log(numbers); // [1, 4, 9]

Metode const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] 2 membaca properti const numbers = [1, 4, 9]; const doubles = numbers.map((num) => num * 2); console.log(doubles); // [2, 8, 18] console.log(numbers); // [1, 4, 9] 5 dari const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] 9 dan kemudian mengakses setiap indeks bilangan bulat

const arrayLike = { length: 3, 0: 2, 1: 3, 2: 4, }; console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2)); // [ 4, 9, 16 ]

Contoh ini menunjukkan cara mengulang melalui kumpulan objek yang dikumpulkan oleh const arrayLike = { length: 3, 0: 2, 1: 3, 2: 4, }; console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2)); // [ 4, 9, 16 ] 4. Ini karena const arrayLike = { length: 3, 0: 2, 1: 3, 2: 4, }; console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2)); // [ 4, 9, 16 ] 4 mengembalikan const arrayLike = { length: 3, 0: 2, 1: 3, 2: 4, }; console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2)); // [ 4, 9, 16 ] 6 (yang merupakan kumpulan objek)

Dalam hal ini, kami mengembalikan semua nilai const arrayLike = { length: 3, 0: 2, 1: 3, 2: 4, }; console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2)); // [ 4, 9, 16 ] 7 yang dipilih di layar

const elems = document.querySelectorAll("select option:checked"); const values = Array.prototype.map.call(elems, ({ value }) => value);

Cara yang lebih mudah adalah metode const arrayLike = { length: 3, 0: 2, 1: 3, 2: 4, }; console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2)); // [ 4, 9, 16 ] _8

Array renggang tetap renggang setelah const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] 2. Indeks slot kosong masih kosong di array yang dikembalikan, dan fungsi panggilan balik tidak akan dipanggil

console.log( [1, , 3].map((x, index) => { console.log(`Visit ${index}`); return x * 2; }), ); // Visit 0 // Visit 2 // [2, empty, 6]

(terinspirasi oleh posting blog ini)

Adalah umum untuk menggunakan panggilan balik dengan satu argumen (elemen yang sedang dilalui). Fungsi tertentu juga biasa digunakan dengan satu argumen, meskipun mereka menggunakan argumen opsional tambahan. Kebiasaan ini dapat menyebabkan perilaku yang membingungkan

Mempertimbangkan

["1", "2", "3"].map(parseInt);

Meskipun orang mungkin mengharapkan const elems = document.querySelectorAll("select option:checked"); const values = Array.prototype.map.call(elems, ({ value }) => value); _0, hasil sebenarnya adalah const elems = document.querySelectorAll("select option:checked"); const values = Array.prototype.map.call(elems, ({ value }) => value); 1

const elems = document.querySelectorAll("select option:checked"); const values = Array.prototype.map.call(elems, ({ value }) => value); _2 sering digunakan dengan satu argumen, tetapi membutuhkan dua argumen. Yang pertama adalah ekspresi dan yang kedua adalah radix ke fungsi callback, const elems = document.querySelectorAll("select option:checked"); const values = Array.prototype.map.call(elems, ({ value }) => value); 3 meneruskan 3 argumen

• elemen
• Indeks
• array

Argumen ketiga diabaikan oleh const elems = document.querySelectorAll("select option:checked"); const values = Array.prototype.map.call(elems, ({ value }) => value); 2—tetapi bukan argumen kedua. Ini adalah sumber kemungkinan kebingungan

Berikut adalah contoh singkat dari langkah-langkah iterasi

// parseInt(string, radix) -> map(parseInt(value, index)) /* first iteration (index is 0): */ parseInt("1", 0); // 1 /* second iteration (index is 1): */ parseInt("2", 1); // NaN /* third iteration (index is 2): */ parseInt("3", 2); // NaN

Lalu mari kita bicara tentang solusi

const returnInt = (element) => parseInt(element, 10); ["1", "2", "3"].map(returnInt); // [1, 2, 3] // Actual result is an array of numbers (as expected) // Same as above, but using the concise arrow function syntax ["1", "2", "3"].map((str) => parseInt(str)); // [1, 2, 3] // A simpler way to achieve the above, while avoiding the "gotcha": ["1", "2", "3"].map(Number); // [1, 2, 3] // But unlike parseInt(), Number() will also return a float or (resolved) exponential notation: ["1.1", "2.2e2", "3e300"].map(Number); // [1.1, 220, 3e+300] // For comparison, if we use parseInt() on the array above: ["1.1", "2.2e2", "3e300"].map((str) => parseInt(str)); // [1, 2, 3]

Salah satu keluaran alternatif dari metode peta yang dipanggil dengan const elems = document.querySelectorAll("select option:checked"); const values = Array.prototype.map.call(elems, ({ value }) => value); 2 sebagai parameter berjalan sebagai berikut

Bagaimana cara mengulang peta dalam JavaScript?

Bisakah Anda menggunakan peta dalam for loop?

Bisakah Anda memiliki for loop di dalam suatu fungsi?

Apakah peta lebih cepat daripada untuk loop JavaScript?