Kata mengurangi secara harfiah berarti "untuk membuat sesuatu yang lebih kecil". Ini adalah konsep pemrograman fungsional yang menerapkan fungsi terhadap akumulator dan setiap elemen dalam array untuk menguranginya menjadi satu nilai. Ini adalah konsep yang sangat kuat dan digunakan dalam pengembangan perpustakaan dan kerangka kerja yang rumit seperti Redux atau Ramda .

Dalam pengurangan JavaScript tersedia sebagai metode array. Saya telah menggunakan metode pengurangan dalam pekerjaan saya sejak lama. Namun, saya menyadari bahwa banyak teman dan kolega saya kesulitan untuk memahami dan menggunakan metode ini secara efektif. Oleh karena itu, saya memutuskan untuk menulis artikel ini untuk menjelaskan metode pengurangan dalam istilah yang lebih sederhana. Konsep yang kuat ini dapat membantu mengoptimalkan kode dan mengimplementasikan sistem dan logika yang kompleks. Mudah-mudahan, ini akan membantu lebih banyak orang memahaminya dengan benar.

Mari lupakan tentang reducemetode Array untuk saat ini. Kami akan membuat reducefungsi kami sendiri dari awal untuk mendapatkan pemahaman yang lebih baik tentang apa yang sebenarnya dilakukannya.

Menghancurkan banyak hal

Untuk memulai, mari uraikan berbagai komponen dalam fungsi pengurangan .

• Akumulator — Ini adalah variabel yang menyimpan hasil setelah setiap langkah pengurangan. Ini juga akan menjadi input untuk langkah selanjutnya.
• Reducer — Ini adalah fungsi yang mengambil akumulator dan setiap elemen array. Itu harus mengembalikan nilai akumulator untuk langkah selanjutnya. Ini mendefinisikan setiap langkah dalam pengurangan.
• Nilai Awal — Ini adalah nilai Akumulator untuk langkah pengurangan pertama. Anda dapat menganggap ini sebagai semacam nilai benih. Hasil akhir pengurangan hanya bergantung pada nilai awal dan peredam .
• Larik Input — Tidak perlu penjelasan lagi dengan yang ini .

Saya akan menggunakan TypeScript untuk membangun fungsi dalam artikel ini. Ini akan memungkinkan saya menggunakan tipe statis untuk mendefinisikan fungsi dengan lebih baik dan membantu pembaca mendapatkan pemahaman yang lebih baik.

type Reducer<TEle, TAcc> = (acc: TAcc, ele: TEle) => TAcc;

function reduce<TEle, TAcc>(
 arr: TEle[],
 reducer: Reducer<TEle, TAcc>,
 initialValue: TAcc
) {
// TODO: Implement
}

Pertimbangkan contoh pengurangan sederhana - "Jumlah elemen dalam array" . Seharusnya cukup mudah untuk mengimplementasikan logika untuk ini. Ayo lakukan:

const arr = [1,2,3,4,5,6,7,8,9,10];

let sum = 0;

for (let num of arr) {
    sum = sum + num;
}

console.log(sum);

Kami sekarang dapat dengan mudah menulis ulang kode yang sama sebagai kombinasi dari berbagai komponen pengurangan.

const arr = [1,2,3,4,5,6,7,8,9,10];
const initialValue = 0;
const reducer = (acc: number, ele: number) => acc + ele;

let acc = 0;

for (let ele of arr) {
    acc = reducer(acc, ele);
}

Sekarang, kita dapat menggunakan informasi di atas untuk menyelesaikan reducefungsi kita.

type Reducer<TEle, TAcc> = (acc: TAcc, ele: TEle) => TAcc;

function reduce<TEle, TAcc>(
 arr: TEle[],
 reducer: Reducer<TEle, TAcc>,
 initialValue: TAcc
) {
    let acc = initialValue;
    for (let ele of arr) {
        acc = reducer(acc, ele);
    }
    return acc;
}

Parameter peredam dalam metode pengurangan juga menggunakan indeks dan larik input sebagai argumen, tetapi pada dasarnya ini diterapkan dengan cara yang sama seperti fungsi pengurangan yang baru saja kita buat.

Apa selanjutnya?

Sekarang, ada sesuatu yang dapat Anda lakukan lebih banyak untuk menjadi benar-benar mahir menggunakan pengurangan adalah berlatih dan mencoba dan menerapkan logika reduksi kompleks. Beberapa item yang dapat Anda coba adalah:

1. Tulis fungsi yang mengambil larik angka dan mengembalikan produk dari semua angka.
2. Tulis fungsi yang mengambil larik string dan mengembalikan jumlah total karakter dalam semua gabungan string.
3. Tulis fungsi yang mengambil larik angka dan mengembalikan rata-rata (rata-rata) angka tersebut.
4. Tulis fungsi yang mengambil larik objek dengan valueproperti numerik dan mengembalikan jumlah semua valueproperti.
5. Tulis fungsi yang mengambil larik string dan mengembalikan string terpanjang dalam larik.
6. Tulis fungsi yang mengambil larik angka dan mengembalikan angka maksimum dalam larik.
7. Tulis fungsi yang mengambil larik angka dan mengembalikan angka minimum dalam larik.
8. Tulis fungsi yang mengambil larik objek dengan valueproperti numerik dan mengembalikan rata-rata semua valueproperti.
9. Tulis fungsi yang mengambil larik objek dengan nameproperti dan mengembalikan string tunggal yang menggabungkan semua nameproperti, dipisahkan dengan koma.
10. Tulis fungsi yang mengambil larik angka dan mengembalikan larik baru hanya dengan bilangan genap dari larik asli.