Anda dapat menggunakannya untuk menyelesaikan masalah terkait data apa pun

Dengan Javascript ES6 dan seterusnya, kini Anda dapat memetakan, memfilter, mengurangi, mengurutkan, meratakan dan banyak lagi melalui array. Sangat mudah untuk berpikir, ringkas dan elegan.

Namun terkadang, hal yang paling tidak diketahui dalam daftar ini adalah pengurangan.

Anda mungkin belum menyadari kehebatan metode ini, mari kita lihat.

Mungkin Anda membayangkan bahwa satu-satunya cara untuk “mengurangi” sebuah array adalah dengan mengubahnya menjadi sesuatu yang “lebih kecil”, seperti angka, atau string. Misalnya:

  • Jika saya mempunyai array [ 1, 2, 3 ] saya dapat menguranginya dengan menjumlahkan suku-sukunya, jadi 1 + 2 + 3 = 6, atau dengan mengalikannya, jadi 1 * 2 * 3 = 6, atau cukup dengan menggabungkan angka-angka tersebut menjadi karakter, sehingga menjadi string “123”.

Namun, pada kenyataannya, pengurangan sangat efektif dan dapat menyelesaikan transformasi data apa pun. Anda dapat beralih dari Array ke Array, Array ke Number, Array ke Objek, Objek hingga Array, atau apa pun yang dapat Anda bayangkan.

Jadi, saya akan berpendapat bahwa nama “mengurangi” tidaklah adil. Namanya harus “transform” dan kemudian, dalam pikiran Anda, Anda selalu yakin bahwa fungsi ini dapat digunakan dalam lebih banyak konteks.

Jadi, kita akan melihat beberapa contoh kode sekarang, mari kita bahas!

Kumpulan Contoh 1: Jumlah, Jumlah Produk dan Maks

Cara berpikir “tradisional” tentang pengurangan diwakili oleh contoh berikut. Anda sebenarnya mengurangi array menjadi angka di setiap contoh ini:

Dan konsol itu berkata:

Nah, langsung saja penjelasan singkat dari masing-masing contohnya:

  • Jumlah: Mulai dengan 0, ambil setiap elemen dan jumlahkan ke nilai akumulasi.
  • JumlahProduk: Mulai dengan 0, ambil setiap pasangan (angka dan faktor) dan jumlahkan angka * faktor ke dalam nilai akumulasi.
  • Nomor Maks: Mulailah dengan nol dan kembalikan elemen pertama, jika tidak ada yang terakumulasi, jika tidak, kembalikan angka jika lebih besar dari akumulasi atau nilai akumulasi jika tidak.

Kumpulan Contoh 2: Peta, Filter, Filter & Peta, dan FlatMap

Sekarang, kita melangkah lebih jauh dan benar-benar mengimplementasikan fungsi map klasik, filter, filter, lalu map (urutan lain juga dimungkinkan) dan flatMap. Semuanya sebenarnya merupakan bagian dari pengurangan (“alias transformasi”).

Dan konsol itu berkata:

Penjelasan singkat dari setiap contoh:

  • Peta: Mulai dengan array kosong, ambil array dan fungsi, lalu kembalikan nilai yang terakumulasi ditambah elemen saat ini dengan fungsi yang diterapkan padanya.
  • Filter: Mulai dengan array kosong, evaluasi fungsi pada elemen saat ini dan jika salah, kembalikan saja nilai akumulasi (jadi, lewati elemen ini) dan jika tidak, kembalikan nilainya terakumulasi ditambah elemen saat ini.
  • FilterMap: Ambil array, fungsi untuk digunakan sebagai filter dan fungsi untuk memetakan, dan gabungkan dua proses sebelumnya.
  • FlatMap: Mulailah dengan array kosong, ambil array dan fungsi dan jika elemen itu sendiri adalah array, sebarkan hasilnya ke nilai akumulasi, jika tidak, kembalikan saja nilai akumulasi ditambah elemen saat ini dengan fungsi yang diterapkan padanya.

Kumpulan Contoh 3: Unik, Urutkan, dan Terbalik

Ini juga merupakan fungsi yang sangat berguna yang dapat diimplementasikan dengan pengurangan. Keuntungan besar dibandingkan fungsi asli yang disediakan oleh Array.Prototype, adalah Anda dapat menggabungkan lebih dari satu transformasi dalam satu langkah, jika Anda mau… Namun sebenarnya, tujuan dari contoh ini hanyalah untuk menunjukkan kepada Anda lebih banyak kekuatan dari fungsi pengurangan:

Dan konsol itu berkata:

Penjelasan singkat dari setiap contoh:

  • Unik: Mulailah dengan array kosong, ambil elemen dan periksa apakah elemen tersebut sudah ada dalam nilai akumulasi. Jika ada, kembalikan saja nilai akumulasi (jadi lewati saja) jika tidak, kembalikan nilai akumulasi ditambah elemen.
  • Urutkan: Mulailah dengan array kosong dan pisahkan nilai akumulasi menjadi 2 kumpulan: Kumpulan elemen “kurang atau sama dengan nilai saat ini” dan kumpulan elemen “lebih besar dari nilai saat ini”. Jadi, setelah itu, kembalikan saja kedua set dengan elemen saat ini “di tengah”.
  • Mundur: Dengan ES6, semuanya cukup mudah. Kembalikan saja nilainya dan tambahkan nilai akumulasi, sehingga elemen terakhir dari setiap iterasi akan selalu berada di posisi pertama array.

Kumpulan Contoh 4: Objek menjadi Array dan Array menjadi Objek

Jika sinonim dari pengurangan “transformasi” tidak jelas, dari sini sudah sangat jelas. Terkadang Anda perlu mengubah Array menjadi Objek atau sebaliknya. Fungsi apa yang dapat Anda gunakan? Ya! Mengurangi!

Dan konsol itu berkata:

Penjelasan singkat dari setiap contoh:

  • Objek Ke Array: Mulai dengan array kosong dan ulangi tombol Object (yang juga merupakan array). Untuk setiap kunci, ambil juga nilainya (objek[kunci]) dan kembalikan nilai akumulasi ditambah objek { kunci: nilai }. Mungkin contohnya tidak terlihat terlalu berguna tetapi berguna jika Anda membayangkan sedang merender daftar dengan React dan akan lebih mudah untuk memiliki informasi objek sebagai array.
  • Array ke Objek: Mulai dengan objek kosong dan ulangi array untuk mengembalikan objek dengan bidang id sebagai bidang objek tingkat pertama, dan bidang lainnya sebagai bidangnya isi. Hal ini terkadang berguna ketika Anda perlu mengelompokkan lebih dari satu larik yang memiliki informasi tentang suatu entitas (diwakili oleh id) dan mengembalikan semuanya dalam satu objek untuk diproses lebih lanjut.

Jadi, fungsi pengurangan dapat dilihat lebih seperti sebuah proses, dengan cara yang lebih tradisional: INPUT =› PROCESS =› OUTPUT

Bonus 1: Kurangi sebenarnya sebagai Augment!

Mengingat Anda tidak perlu memiliki angka tunggal sebagai hasilnya, atau primitif yang sama, atau bahkan jumlah elemen input yang sama, Anda bisa menggunakan reduce untuk sebenarnya menambahkan elemen baru ke data masukan Anda.

Ini adalah contoh dunia nyata (yang disederhanakan) di mana Anda memiliki daftar elemen yang dikategorikan dengan cara tertentu dan Anda ingin menyajikannya tetapi memasukkan beberapa judul yang menunjukkan kategori tersebut.

Misalnya:

Dan Konsol mengatakan:

Jadi, Anda "menghasilkan" daftar baru dengan menggabungkan data primitif yang berbeda. Dan tentu saja tidak ada batasannya. Ini bisa berupa sejumlah entitas yang dapat digabungkan menjadi satu daftar yang siap diteruskan ke DOM untuk dirender.

Bonus 2: Menggunakan pengurangan untuk memproses rantai janji (secara berurutan)

Penggunaan lain dari pengurangan yang menurut saya sangat berguna adalah untuk memastikan urutan. Saat Anda memproses rantai janji, biasanya Anda memerlukan hasil dari janji sebelumnya untuk digunakan sebagai masukan untuk janji berikutnya, dan seterusnya.

Kurangi untuk menyelamatkan!

Dan Konsol mengatakan:

Dan kita bisa berhenti di sini.

Semua contoh ada di JS Fiddle ini

Saya harap sekarang Anda memiliki lebih banyak ide untuk menggunakan reduce untuk menghasilkan kode yang mudah dibaca dan elegan dalam proyek Anda!

Sorakan dari Chili ©🇱!!