Memahami Kaedah map() untuk Tatasusunan JavaScript: Panduan Mudah

Kaedah map() mencipta tatasusunan baharu dengan menggunakan fungsi yang disediakan (callbackFn) pada setiap elemen tatasusunan asal. Ia sesuai untuk menukar data tanpa mengubah suai tatasusunan asal.

---

Sintaks

array.map(callbackFn, thisArg)

• callbackFn: Fungsi yang berjalan pada setiap elemen tatasusunan, dengan argumen berikut:
  • unsur: Unsur semasa.
  • indeks: Indeks semasa.
  • tatasusunan: Tatasusunan sedang dilalui.
• thisArg (pilihan): Nilai untuk digunakan seperti ini dalam fungsi panggil balik.

---

Ciri Utama

1. Mengembalikan Tatasusunan Baharu: Tatasusunan asal kekal tidak berubah.
2. Melangkau Slot Kosong: Panggilan balik tidak dipanggil untuk elemen yang tidak ditetapkan dalam tatasusunan jarang.
3. Penggunaan Generik: Berfungsi dengan objek seperti tatasusunan (cth., NodeLists).

---

Contoh

1. Contoh Asas: Transform Numbers

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

2. Format semula Objek

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

3. Menggunakan parseInt dengan peta

// Common mistake:
console.log(["1", "2", "3"].map(parseInt)); // [1, NaN, NaN]

// Correct approach:
console.log(["1", "2", "3"].map((str) => parseInt(str, 10))); // [1, 2, 3]

// Alternative:
console.log(["1", "2", "3"].map(Number)); // [1, 2, 3]

4. Elakkan Keputusan Tidak Ditakrifkan

Tidak mengembalikan apa-apa daripada panggilan balik membawa kepada tidak ditentukan dalam tatasusunan baharu:

const numbers = [1, 2, 3, 4];
const result = numbers.map((num, index) => (index < 3 ? num : undefined));
console.log(result); // [1, 2, 3, undefined]

Gunakan penapis() atau flatMap() untuk mengalih keluar elemen yang tidak diingini.

5. Kesan Sampingan (Anti-Corak)

Elakkan menggunakan map() untuk operasi dengan kesan sampingan, seperti mengemas kini pembolehubah:

const cart = [5, 15, 25];
let total = 0;

// Avoid this:
const withTax = cart.map((cost) => {
  total += cost;
  return cost * 1.2;
});

// Instead, use separate methods:
const total = cart.reduce((sum, cost) => sum + cost, 0);
const withTax = cart.map((cost) => cost * 1.2);

6. Mengakses Elemen Tatasusunan Lain

Argumen ketiga (tatasusunan) membenarkan mengakses jiran semasa transformasi:

const numbers = [3, -1, 1, 4];
const averaged = numbers.map((num, idx, arr) => {
  const prev = arr[idx - 1] || 0;
  const next = arr[idx + 1] || 0;
  return (prev + num + next) / 3;
});
console.log(averaged);

---

Kes Penggunaan Biasa

1. Ubah Data: Gunakan fungsi pada setiap elemen.
2. Format Semula Objek: Tukar struktur data.
3. Map NodeLists: Ubah elemen DOM seperti NodeList kepada tatasusunan:

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

---

Bila Perlu Mengelakkan peta()

• Tiada Nilai Pulangan Diperlukan: Gunakan forEach() atau untuk...sebaliknya.
• Memutasi Data: Cipta objek baharu dan bukannya mengubah objek asal:

   const products = [{ name: "phone" }];
   const updated = products.map((p) => ({ ...p, price: 100 }));

---

Petua Akhir

• Fungsi Tulen Sahaja: Pastikan panggilan balik tidak mempunyai kesan sampingan.
• Fahami Argumen: Ketahui bahawa map() menghantar elemen, indeks dan tatasusunan kepada panggilan balik.
• Elakkan Tatasusunan Jarang: Slot kosong akan kekal kosong.

Gunakan map() untuk memudahkan kod anda apabila menukar tatasusunan dengan cekap!

Atas ialah kandungan terperinci Memahami Kaedah map() untuk Tatasusunan JavaScript: Panduan Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!