Memahami Kaedah JavaScript Array map().

Pengenalan kepada map()

Kaedah map() mencipta tatasusunan baharu yang diisi dengan hasil panggilan fungsi yang disediakan pada setiap elemen dalam tatasusunan panggilan. Ia merupakan teknik pengaturcaraan berfungsi yang membolehkan anda mengubah setiap elemen tatasusunan menjadi elemen baharu, menghasilkan tatasusunan baharu tanpa mengubah suai yang asal.

Sintaks

let newArray = array.map(function callback(currentValue, index, array) {
    // Return element for newArray
}, thisArg);

Atau, menggunakan fungsi anak panah:

let newArray = array.map((currentValue, index, array) => {
    // Return element for newArray
});

Parameter

• panggilan balik: Fungsi yang menghasilkan elemen tatasusunan baharu, mengambil tiga argumen:
  • currentValue: Elemen semasa sedang diproses.
  • indeks (pilihan): Indeks unsur semasa.
  • tatasusunan (pilihan): Peta tatasusunan telah dipanggil.
• thisArg (pilihan): Nilai untuk digunakan seperti ini semasa melaksanakan panggilan balik.

Nilai Pulangan

Susun atur baharu dengan setiap elemen adalah hasil daripada fungsi panggil balik.

Cara map() Berfungsi

• Ketidakbolehubah: map() tidak mengubah suai tatasusunan asal.
• Transformasi mengikut elemen: Menggunakan fungsi panggil balik pada setiap elemen.
• Mengembalikan Tatasusunan Baharu: Mengumpul keputusan ke dalam tatasusunan baharu.

Contoh

a. Nombor Pemetaan

Contoh: Darab setiap nombor dalam tatasusunan dengan 2.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);

console.log(doubled); // Output: [2, 4, 6, 8, 10]

b. Mengubah Rentetan

Contoh: Tukar tatasusunan rentetan kepada huruf besar.

const fruits = ['apple', 'banana', 'cherry'];
const upperFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(upperFruits); // Output: ['APPLE', 'BANANA', 'CHERRY']

c. Mengekstrak Sifat Objek

Contoh: Ekstrak sifat tertentu daripada susunan objek.

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
const names = users.map(user => user.name);

console.log(names); // Output: ['Alice', 'Bob']

d. Pemetaan Atas Tatasusunan Objek

Contoh: Ubah setiap objek dalam tatasusunan.

const products = [
  { productId: 1, price: 100 },
  { productId: 2, price: 200 },
];
const discountedProducts = products.map(product => ({
  ...product,
  price: product.price * 0.9,
}));

console.log(discountedProducts);
// Output:
// [
//   { productId: 1, price: 90 },
//   { productId: 2, price: 180 },
// ]

Perbezaan Antara map() dan forEach()

• peta():
  • Mengembalikan tatasusunan baharu.
  • Digunakan apabila anda ingin mengubah setiap elemen dan mengumpul hasilnya.
• untukSetiap():
  • Mengembalikan tidak ditentukan.
  • Digunakan apabila anda ingin melakukan kesan sampingan (cth., mengelog, mengubah suai pembolehubah luaran) dan tidak memerlukan tatasusunan baharu.

Contoh dengan forEach():

let newArray = array.map(function callback(currentValue, index, array) {
    // Return element for newArray
}, thisArg);

Menggunakan map() dengan Fungsi Anak Panah

Fungsi anak panah menyediakan sintaks ringkas untuk menulis fungsi panggil balik.

Contoh:

let newArray = array.map((currentValue, index, array) => {
    // Return element for newArray
});

peta() dalam TypeScript

TypeScript menambahkan penaipan statik pada JavaScript, yang boleh membantu menangkap ralat pada masa penyusunan.

a. Taip Anotasi

Anda boleh menentukan jenis untuk elemen dalam tatasusunan dan jenis pulangan.

Contoh:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);

console.log(doubled); // Output: [2, 4, 6, 8, 10]

b. Jenis Generik

Anda boleh menentukan fungsi generik untuk berfungsi dengan mana-mana jenis.

Contoh:

const fruits = ['apple', 'banana', 'cherry'];
const upperFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(upperFruits); // Output: ['APPLE', 'BANANA', 'CHERRY']

Kes Penggunaan Biasa

• Mengubah Data: Menukar data daripada satu bentuk ke bentuk yang lain.
• Mengekstrak Nilai: Tarik keluar medan tertentu daripada objek.
• Mengarang Data: Buat tatasusunan baharu berdasarkan data sedia ada.
• Pengiraan: Lakukan pengiraan pada setiap elemen.

Topik Lanjutan

a. Merangkai peta() dengan Kaedah Tatasusunan Lain

Anda boleh rantai map() dengan kaedah tatasusunan lain seperti penapis(), kurangkan(), dll.

Contoh:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
const names = users.map(user => user.name);

console.log(names); // Output: ['Alice', 'Bob']

b. Mengendalikan Operasi Tak Segerak

map() tidak mengendalikan operasi tak segerak di dalam panggilan balik. Jika anda perlu melakukan operasi tak segerak, pertimbangkan untuk menggunakan Promise.all() dengan map().

Contoh:

const products = [
  { productId: 1, price: 100 },
  { productId: 2, price: 200 },
];
const discountedProducts = products.map(product => ({
  ...product,
  price: product.price * 0.9,
}));

console.log(discountedProducts);
// Output:
// [
//   { productId: 1, price: 90 },
//   { productId: 2, price: 180 },
// ]

Amalan Terbaik

• Jangan Gunakan map() untuk Kesan Sampingan: Gunakan forEach() sebaliknya jika anda tidak memerlukan tatasusunan baharu.
• Elakkan Mengubah Suai Tatasusunan Asal: map() tidak seharusnya memutasi tatasusunan asal atau elemennya.
• Kembalikan Nilai: Pastikan fungsi panggil balik anda mengembalikan nilai; jika tidak, tatasusunan baharu akan mengandungi unsur yang tidak ditentukan.
• Gunakan Fungsi Anak Panah untuk Ringkas: Ia menjadikan kod anda lebih pendek dan lebih mudah dibaca.

Kesimpulan

Memahami fungsi map() adalah penting untuk manipulasi tatasusunan yang berkesan dalam JavaScript dan TypeScript. Ia adalah kaedah serba boleh yang membolehkan anda menukar data dengan bersih dan cekap. Ingat peta itu():

• Mencipta tatasusunan baharu.
• Menggunakan fungsi pada setiap elemen.
• Tidak mengubah suai tatasusunan asal.

Dengan menguasai map(), anda akan menulis kod yang lebih ringkas dan berfungsi, yang membawa kepada kebolehselenggaraan dan kebolehbacaan yang lebih baik.

Terima kasih kerana membaca. Jika anda menyukai kandungan ini, sila belikan saya kopi:
https://buymeacoffee.com/kellyblaire

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