Panduan Komprehensif untuk Kaedah `reduce()` JavaScript dengan Contoh Kehidupan Nyata

Kaedah reduce() ialah kaedah tatasusunan yang berkuasa dalam JavaScript, digunakan untuk melelaran melalui tatasusunan dan mengurangkannya kepada satu nilai. Kaedah ini serba boleh dan boleh mengendalikan operasi seperti menjumlahkan nombor, meratakan tatasusunan, mencipta objek dan banyak lagi.

---

Sintaks mengurangkan()

array.reduce(callback, initialValue);

• panggilan balik: Fungsi untuk melaksanakan pada setiap elemen dalam tatasusunan.
  • penumpuk: Hasil terkumpul daripada pelaksanaan panggil balik sebelumnya.
  • currentValue: Elemen semasa sedang diproses.
  • currentIndex (pilihan): Indeks elemen semasa.
  • tatasusunan (pilihan): Pengurangan tatasusunan telah dipanggil.
• initialValue (pilihan): Nilai untuk digunakan sebagai argumen pertama untuk panggilan pertama panggilan balik.

---

Bagaimana reduce() Berfungsi Langkah demi Langkah

1. Mulakan dengan nilai permulaan atau elemen pertama tatasusunan jika tiada nilai permulaan disediakan.
2. Lepaskan penumpuk dan Nilai semasa kepada fungsi panggil balik.
3. Kemas kini penumpuk dengan nilai yang dikembalikan daripada panggilan balik.
4. Ulang sehingga semua elemen diproses.
5. Kembalikan nilai terkumpul akhir.

---

Contoh 1: Mengira Jumlah Susunan (Kehidupan Sebenar: Troli Beli-belah)

Andaikan anda mempunyai troli beli-belah, dan anda ingin mengira jumlah harga barang tersebut.

const cart = [
    { item: "Laptop", price: 1200 },
    { item: "Phone", price: 800 },
    { item: "Headphones", price: 150 }
];

const totalPrice = cart.reduce((acc, curr) => acc + curr.price, 0);

console.log(`Total Price: $${totalPrice}`); // Total Price: 50

---

Contoh 2: Mengumpulkan Item mengikut Kategori (Kehidupan Sebenar: Mengatur Inventori)

Anda mahu mengumpulkan item mengikut kategorinya.

const inventory = [
    { name: "Apple", category: "Fruits" },
    { name: "Carrot", category: "Vegetables" },
    { name: "Banana", category: "Fruits" },
    { name: "Spinach", category: "Vegetables" }
];

const groupedItems = inventory.reduce((acc, curr) => {
    if (!acc[curr.category]) {
        acc[curr.category] = [];
    }
    acc[curr.category].push(curr.name);
    return acc;
}, {});

console.log(groupedItems);
/*
{
    Fruits: ['Apple', 'Banana'],
    Vegetables: ['Carrot', 'Spinach']
}
*/

---

Contoh 3: Meratakan Susunan Bersarang (Kehidupan Sebenar: Menggabungkan Data Jabatan)

Anda menerima data daripada jabatan yang berbeza sebagai tatasusunan bersarang dan perlu menggabungkannya menjadi satu.

const departmentData = [
    ["John", "Doe"],
    ["Jane", "Smith"],
    ["Emily", "Davis"]
];

const flattenedData = departmentData.reduce((acc, curr) => acc.concat(curr), []);

console.log(flattenedData); // ['John', 'Doe', 'Jane', 'Smith', 'Emily', 'Davis']

---

Contoh 4: Mengira Kejadian (Kehidupan Sebenar: Analitis)

Anda mempunyai pelbagai paparan halaman tapak web dan ingin mengira berapa kali setiap halaman dilawati.

const pageViews = ["home", "about", "home", "contact", "home", "about"];

const viewCounts = pageViews.reduce((acc, page) => {
    acc[page] = (acc[page] || 0) + 1;
    return acc;
}, {});

console.log(viewCounts);
/*
{
    home: 3,
    about: 2,
    contact: 1
}
*/

---

Contoh 5: Melaksanakan Peta Tersuai menggunakan reduce()

Kaedah reduce() boleh meniru kefungsian map().

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

const doubled = numbers.reduce((acc, curr) => {
    acc.push(curr * 2);
    return acc;
}, []);

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

---

Contoh 6: Mencari Nilai Maksimum (Kehidupan Sebenar: Mencari Jualan Teratas)

Anda ingin mencari angka jualan tertinggi daripada set data.

const sales = [500, 1200, 300, 800];

const highestSale = sales.reduce((max, curr) => (curr > max ? curr : max), 0);

console.log(`Highest Sale: $${highestSale}`); // Highest Sale: 00

---

Contoh 7: Mengubah Data (Kehidupan Sebenar: Transformasi Data API)

Anda menerima tatasusunan data pengguna dan perlu menukarnya menjadi objek yang dikunci oleh ID pengguna.

array.reduce(callback, initialValue);

---

Petua dan Amalan Terbaik

1. Gunakan initialValue: Sentiasa berikan initialValue untuk mengelakkan tingkah laku yang tidak dijangka apabila berurusan dengan tatasusunan kosong.
2. Pastikan ia Ringkas: Tulis fungsi pengurang yang ringkas dan jelas.
3. Kemas Kini Tidak Boleh Ubah: Apabila bekerja dengan objek atau tatasusunan, elakkan mengubahnya secara langsung di dalam pengurang.

---

Kesimpulan

Kaedah reduce() adalah sangat serba boleh dan boleh disesuaikan untuk pelbagai tugas, daripada menjumlahkan nilai kepada mengubah struktur data. Berlatih dengan contoh kehidupan sebenar seperti ini untuk memperdalam pemahaman anda dan membuka kunci potensi penuh reduce() dalam projek JavaScript anda.

Atas ialah kandungan terperinci Panduan Komprehensif untuk Kaedah `reduce()` JavaScript dengan Contoh Kehidupan Nyata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!