Untuk loop di dalam map javascript

Question

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 membuat larik baru yang diisi dengan hasil pemanggilan fungsi yang disediakan pada setiap elemen dalam larik pemanggil

Table of Contents Show

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?

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

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]

_4

Elemen saat ini sedang diproses dalam larik

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]

5

Indeks elemen saat ini sedang diproses dalam larik

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]

_6

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

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]

8 Opsional

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?

Ringkasan .

Untuk mengulangi Peta, kita dapat menggunakan for. konstruksi perulangan of dan forEach()

Peta menyediakan tiga metode yang mengembalikan iterable. peta. kunci(), peta. nilai() dan peta. entri()

Iterasi atas Peta selalu dalam urutan penyisipan

Bisakah Anda menggunakan peta dalam for loop?

Gunakan map() alih-alih loop for() . Jika Anda hanya memiliki pengetahuan tentang for() loop dalam JavaScript, artikel ini akan meminta Anda untuk memahami sintaks Ekspresi Fungsi Panah (a. k. a. fungsi "panah gemuk"). map() function works. If you only have knowledge of for() loops in JavaScript, this article will require you to understand the Arrow Function Expression syntax (a.k.a. “fat arrow” functions).

Bisakah Anda memiliki for loop di dalam suatu fungsi?

Saat kita mencatat ekspresi pemanggilan fungsi, hasilnya adalah nilai kembalian dari fungsi tersebut. Kami mencatat nilai kembalian dari ekspresi fungsi anonim yang memohon sendiri (yang disebutnya sendiri). Ini membuktikan bahwa kita dapat menjalankan fungsi di dalam loop .

Apakah peta lebih cepat daripada untuk loop JavaScript?

Pertama, lihat ini. Anda dapat melihat bahwa for loop 3 kali lebih cepat daripada metode array seperti forEach map and reduce . Setelah menerima elemen array, metode array menjalankan fungsi callback untuk setiap elemen.

kode javascript