Kaedah Tatasusunan JavaScript: `forEach`, `map`, `filter` dan `reduce`

Kaedah Tatasusunan JavaScript: untukSetiap, petakan, tapis dan kurangkan

JavaScript menyediakan beberapa kaedah yang berkuasa untuk berfungsi dengan tatasusunan. Kaedah ini—untukSetiap, memetakan, menapis dan mengurangkan—boleh menjadikan kod anda lebih cekap dan lebih mudah dibaca. Mari teroka kaedah ini menggunakan analogi dan contoh mudah.

untukSetiap

Analogi: Bermain dengan setiap mainan di dalam kotak

Bayangkan anda mempunyai kotak mainan, dan anda mahu bermain dengan setiap mainan satu demi satu. Anda mengeluarkan setiap mainan daripada kotak, bermain dengannya dan kemudian meletakkannya semula.

Contoh:

let toys = ['car', 'doll', 'ball'];

toys.forEach(toy => {
  console.log('Playing with', toy);
});

Penjelasan:
Anda melihat setiap mainan di dalam kotak dan bermain dengannya.

peta

Analogi: Menukar setiap mainan kepada sesuatu yang baharu

Andaikan anda mempunyai kotak mainan dan anda ingin menukar setiap mainan menjadi sesuatu yang lain. Contohnya, anda menukar setiap kereta menjadi kereta lumba, setiap anak patung menjadi adiwira dan setiap bola menjadi bola keranjang.

Contoh:

let toys = ['car', 'doll', 'ball'];

let newToys = toys.map(toy => {
  return toy + ' (new version)';
});

console.log(newToys);

Penjelasan:
Anda mengubah setiap mainan kepada versi baharu dan meletakkan mainan baharu itu ke dalam kotak baharu.

penapis

Analogi: Memilih mainan tertentu sahaja untuk dimainkan

Anda mempunyai kotak mainan, tetapi hari ini anda hanya mahu bermain dengan mainan yang berwarna merah. Jadi, anda melihat melalui kotak dan mengeluarkan hanya mainan merah.

Contoh:

let toys = ['red car', 'blue doll', 'red ball'];

let redToys = toys.filter(toy => toy.includes('red'));

console.log(redToys);

Penjelasan:
Anda hanya memilih mainan yang sepadan dengan keadaan tertentu (dalam kes ini, berwarna merah).

kurangkan

Analogi: Menggabungkan semua mainan menjadi satu mainan mega

Bayangkan anda ingin mencipta satu mainan besar dengan menggabungkan semua mainan bersama-sama. Anda mengambil setiap mainan dan menambahnya pada mainan mega itu satu persatu.

Contoh:

let toys = ['car', 'doll', 'ball'];

let megaToy = toys.reduce((combinedToys, toy) => {
  return combinedToys + ' ' + toy;
}, '');

console.log(megaToy);

Penjelasan:
Anda bermula dengan mainan mega kosong dan terus menambah setiap mainan padanya sehingga anda mempunyai satu mainan besar.

Menyatukan semuanya

Katakan anda mempunyai kotak mainan yang berbeza, dan anda mahu:

1. Lihat setiap mainan dan lihat apakah itu (untukSetiap).
2. Ubah setiap mainan kepada versi baharu (peta).
3. Pilih hanya mainan yang berwarna biru (penapis).
4. Gabungkan semua mainan terpilih menjadi satu mainan mega (kurangkan).

let toys = ['blue car', 'red doll', 'blue ball'];

toys.forEach(toy => {
  console.log('Toy:', toy);
});

let newToys = toys.map(toy => {
  return toy + ' (new version)';
});

let blueToys = newToys.filter(toy => toy.includes('blue'));

let megaToy = blueToys.reduce((combinedToys, toy) => {
  return combinedToys + ' ' + toy;
}, '');

console.log(megaToy);

Penjelasan:

1. Lihat setiap mainan.
2. Tukar setiap mainan kepada versi baharu.
3. Pilih hanya mainan biru.
4. Gabungkan mereka menjadi satu mainan besar.

---

Pilihan dan Teknik Lanjutan

untukSetiap

• Melepaskan forEach: Anda tidak boleh keluar dari gelung forEach. Jika anda memerlukan fungsi ini, pertimbangkan untuk menggunakan gelung for atau for...of.
• Menggunakan thisArg: Anda boleh menyediakan thisArg untuk digunakan seperti ini di dalam panggilan balik.

  toys.forEach(function(toy) {
    console.log(this.prefix + toy);
  }, { prefix: 'Toy: ' });

peta

• Menggunakan thisArg: Sama seperti forEach, anda boleh menyediakan thisArg untuk digunakan seperti ini di dalam panggilan balik.

  let newToys = toys.map(function(toy) {
    return this.prefix + toy;
  }, { prefix: 'New: ' });

• Mengembalikan jenis yang berbeza: peta boleh mengembalikan tatasusunan jenis yang berbeza.

  let toyLengths = toys.map(toy => toy.length);

penapis

• Keadaan kompleks: Gunakan keadaan kompleks untuk penapisan.

  let complexFilter = toys.filter(toy => toy.includes('blue') && toy.length > 4);

kurangkan

• Nilai awal: Sentiasa berikan nilai awal untuk mengelakkan hasil yang tidak dijangka.

  let sum = [1, 2, 3].reduce((total, num) => total + num, 0);

• Kurangkan kepada objek: Anda boleh menggunakan pengurangan untuk mencipta objek.

  let toyCounts = toys.reduce((counts, toy) => {
    counts[toy] = (counts[toy] || 0) + 1;
    return counts;
  }, {});

---

Dengan memahami kaedah ini dan pilihan lanjutannya, anda boleh menulis kod JavaScript yang lebih cekap dan boleh dibaca. Selamat mengekod!

Atas ialah kandungan terperinci Kaedah Tatasusunan JavaScript: `forEach`, `map`, `filter` dan `reduce`. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!