Rumah >hujung hadapan web >tutorial js >Menguasai Kaedah Tatasusunan dalam JavaScript: peta, tapis dan kurangkan

Menguasai Kaedah Tatasusunan dalam JavaScript: peta, tapis dan kurangkan

DDD
DDDasal
2024-12-18 07:59:13581semak imbas

Mastering Array Methods in JavaScript: map, filter, and reduce

Kaedah Tatasusunan dalam JavaScript: peta, tapis dan kurangkan

JavaScript menyediakan kaedah tatasusunan berkuasa yang memudahkan operasi pada tatasusunan. Antaranya, memetakan, menapis dan mengurangkan ialah tiga fungsi tertib tinggi yang penting yang harus difahami oleh setiap pembangun.


1. Kaedah peta

Kaedah peta mencipta tatasusunan baharu dengan mengubah setiap elemen tatasusunan sedia ada menggunakan fungsi panggil balik.

Sintaks

array.map(callback(currentValue[, index[, array]])[, thisArg]);

Contoh: Mengubah Elemen

const numbers = [1, 2, 3, 4];
const squared = numbers.map(function(number) {
  return number * number;
});
console.log(squared); // Output: [1, 4, 9, 16]

Kes Penggunaan

  • Menggunakan transformasi pada tatasusunan (cth., menukar unit, memformat data).

2. Kaedah penapis

Kaedah penapis mencipta tatasusunan baharu yang mengandungi hanya elemen yang lulus ujian yang dilaksanakan oleh fungsi panggil balik yang disediakan.

Sintaks

array.filter(callback(element[, index[, array]])[, thisArg]);

Contoh: Elemen Penapisan

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers); // Output: [2, 4]

Kes Penggunaan

  • Menapis tatasusunan berdasarkan keadaan tertentu (cth., menapis nilai nol, mencari pengguna aktif).

3. Kaedah mengurangkan

Kaedah pengurangan menggunakan fungsi pada penumpuk dan setiap elemen tatasusunan (dari kiri ke kanan), mengurangkannya kepada satu nilai.

Sintaks

array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]);

Contoh: Menjumlahkan Elemen Tatasusunan

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum); // Output: 10

Kes Penggunaan

  • Mengira jumlah (mis., jumlah, purata).
  • Meratakan tatasusunan bersarang.

4. Menggabungkan peta, menapis dan mengurangkan

Kaedah ini boleh digabungkan untuk melaksanakan operasi yang kompleks.

Contoh: Jumlah Nombor Genap Kuasa Dua

const numbers = [1, 2, 3, 4, 5];

const total = numbers
  .filter(function(number) {
    return number % 2 === 0; // Keep even numbers
  })
  .map(function(number) {
    return number * number; // Square the numbers
  })
  .reduce(function(accumulator, currentValue) {
    return accumulator + currentValue; // Sum the squares
  }, 0);

console.log(total); // Output: 20

5. Perbezaan Utama

Method Purpose Return Value
map Transforms each element A new array of the same length
filter Filters elements A new array with fewer or equal items
reduce Reduces array to a single value A single accumulated result

6. Kebaikan Menggunakan Kaedah Ini

  1. Kebolehbacaan: Kod yang lebih bersih dan lebih deklaratif.
  2. Kebolehgunaan semula: Memodulatkan operasi pada tatasusunan.
  3. Prestasi: Permudahkan operasi biasa dengan kaedah yang dioptimumkan.

7. Ringkasan

  • peta mengubah tatasusunan dengan menggunakan fungsi pada setiap elemen.
  • penapis memilih elemen berdasarkan keadaan.
  • kurangkan agregat elemen tatasusunan menjadi satu nilai.
  • Kaedah ini menggalakkan pengaturcaraan berfungsi dan memudahkan pemprosesan tatasusunan.

Menguasai peta, menapis dan mengurangkan akan meningkatkan kemahiran JavaScript anda dan menjadikan kod anda lebih bersih dan cekap.

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun tindanan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

Atas ialah kandungan terperinci Menguasai Kaedah Tatasusunan dalam JavaScript: peta, tapis dan kurangkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn