JavaScript Array Cured: Panduan Lengkap – Codewithaden

JavaScript Array Redange () adalah salah satu fungsi perintis pemrograman fungsional. Misalnya, untuk menambahkan semua nilai array, gunakan fungsi Array Rededuksi ().

JavaScript berkurang

Itu array berkurang () adalah bawaan Javascript Metode yang digunakan untuk menerapkan fungsi ke setiap elemen dalam array untuk mengurangi array ke nilai tunggal. Metode Rededang () menerima dua parameter, total dan nilai saat ini.

Itu mirip dengan keduanya Peta javascript () dan JavaScript filter () , tetapi berbeda dalam argumen panggilan balik.

Panggilan balik sekarang menerima aki (Ini mengakumulasi semua nilai pengembalian. Nilainya mengakumulasi akumulasi yang dikembalikan sebelumnya), nilai saat ini, indeks saat ini, dan akhirnya, seluruh array.

Sintaksis

Sintaksis dari mengurangi() Fungsi adalah sebagai berikut.

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

# or

array.reduce(callback[, initialValue]);
 

Parameter

  1. Fungsi (Total, CurrentValue, Indeks, ARR): Ini adalah parameter yang diperlukan yang digunakan untuk berjalan untuk setiap elemen array. Ini berisi empat parameter yang tercantum di bawah ini:
    1. total: Ini adalah parameter yang diperlukan yang digunakan untuk menentukan nilai inisial atau nilai fungsi yang dikembalikan sebelumnya.
    2. nilai sekarang: Ini adalah parameter yang dibutuhkan dan digunakan untuk menentukan nilai elemen saat ini.
    3. CurrentIndex: Ini adalah parameter opsional yang digunakan untuk menentukan indeks array dari elemen saat ini.
    4. ARR: Ini adalah parameter opsional yang digunakan untuk menentukan objek array yang dimiliki elemen saat ini.
  2. InitialValue: Parameter opsional menentukan nilai yang akan diteruskan ke fungsi sebagai nilai awal.

Sintaks JavaScript Reduksi () sedikit berbeda dari yang telah kita lihat sebelumnya.

Di fungsi lain yang telah kita lihat, fungsi yang kita lewati secara umum kebutuhan Hanya satu argumen yang mewakili setiap elemen array.

Namun, dalam kasus fungsi pengurangan (), Kita perlu meloloskan dua argumen. Argumen pertama menunjukkan nilainya Akumulasi sejauh ini, dan yang kedua menunjukkan item saat ini.

Nilai pengembalian

Setiap kali suatu fungsi dipanggil, Nilai pengembaliannya menjadi argumen pertama Untuk waktu berikutnya disebut. Jadi jika kita harus menemukan jumlah Dari semua angka dalam array, kami dapat menggunakan fungsi JavaScript array ().

Perhatikan bahwa kita juga dapat meneruskan argumen ketiga ke dalam pengurangan. Nilai ini kemudian menjadi nilai awal untuk akumulator kami. Jadi, ini juga disebut nilai awal.

Secara default, nilai awal akumulator adalah elemen pertama dari array yang kita lewati.

Aplikasi

Katakanlah kami memiliki array yang mewakili Daftar belanja kami, dan kami ingin menemukannya Total biaya semua elemen di dalamnya. Dalam skenario ini, kita dapat menggunakan fungsi pengurangan array JS.

Mari kita ambil contoh sederhana dari memutuskan() fungsi dan lihat cara kerjanya.

// server.js

const data = [5, 10, 15, 20, 25];

const res = data.reduce((total,currentValue) => {
  return total + currentValue;
});

console.log(res); // 75 
  1. Dalam contoh ini, metode reduping () menerima dua parameter, total dan nilai saat ini.
  2. Itu mengurangi () Fungsi siklus melalui setiap nilai dalam array, seperti for-loop.
  3. Kami ingin menambahkan nilai saat ini ke nilai total dalam contoh khusus ini.
  4. Perhitungan terus diulang untuk setiap nilai dalam array, tetapi nilai saat ini berubah ke nilai berikutnya dalam array, bergerak ke kanan.
  5. Ketika tidak ada nilai lagi yang tersisa dalam array, metode () mengembalikan nilai total.

Bagaimana Fungsi Pengurangan () Bekerja Dalam JavaScript

Fungsi reduksi () menjalankan fungsi yang disediakan untuk setiap nilai array dari kiri ke kanan. Nilai pengembalian suatu fungsi disimpan dalam akumulator.

Lihat kode berikut.

data = [2, 4, 6, 8, 10]

const reducer = (accumulator, currentValue, currentIndex, array) => accumulator + currentValue

result = data.reduce(reducer)

console.log(result) 

Oke, jadi peredam fungsi kami () membutuhkan empat parameter.

Sekarang, mari kita lihat tabel deskriptif yang menunjukkan apa yang terjadi pada setiap iterasi.

callback iterationakinilai sekarangCurrentIndexHimpunannilai pengembalian
panggilan pertama[2, 4, 6, 8, 10]
panggilan kedua[2, 4, 6, 8, 10]12
panggilan ketiga12[2, 4, 6, 8, 10]20
panggilan keempat2010[2, 4, 6, 8, 10]30

Nilai yang dikembalikan oleh reduksi () adalah doa panggilan balik terakhir 30.

Tidak melewati nilai awal ke fungsi pengurangan ()

Jika Anda tidak memberikan nilai awal, peredam akan mengasumsikan item pertama di Anda Himpunan sebagai nilai awal Anda. Ini berfungsi dengan baik dalam beberapa contoh karena kami menambahkan daftar angka.

data = [11, 21, 19, 18, 46]

const reducer = (accumulator, currentValue) => accumulator + currentValue

result = data.reduce(reducer)

console.log(result) 

Keluaran

115 

Dalam contoh ini, Anda dapat melihat bahwa kami belum melewati nilai awal dalam fungsi reduksi (). Sebaliknya, ini mengambil elemen pertama sebagai nilai awal, mengurangi dan menambahkan semua elemen, dan mengembalikan nilai tunggal sebagai output.

Melewati nilai awal ke fungsi pengurangan ()

Jika kita memberikan nilai awal sebagai argumen, itu akan memposisikan dirinya sebagai nilai pertama, dan kemudian akan menguranginya.

data = [11, 21, 19, 18, 46]

const reducer = (accumulator, currentValue) => accumulator + currentValue

result = data.reduce(reducer, 29)

console.log(result) 

Keluaran

144 

Dalam contoh ini, Anda dapat melihat bahwa kami telah melewati nilai awal sebagai 29 ke fungsi pengurangan (). Itu berarti dibutuhkan 29 sebagai nilai awal, mulai berkurang, menambahkan semua elemen, termasuk 29, dan mengembalikan nilai tunggal sebagai output. Jadi jika Anda melihat di output, Anda dapat memverifikasi bahwa itu telah menambahkan 29 nilai dalam output akhir.

Itu peredam Nilai yang dikembalikan fungsi ditugaskan ke akumulator, disimpan di setiap iterasi di seluruh array, dan secara meyakinkan menjadi nilai akhir yang dihasilkan.

TypeError: Kurangi array kosong tanpa nilai awal

Jika array kosong dan tidak ada nilai awal yang disediakan, TypeError akan dilemparkan.

data = []

const reducer = (accumulator, currentValue) => accumulator + currentValue

result = data.reduce(reducer)

console.log(result) 

Keluaran

result = data.reduce(reducer)
              ^

TypeError: Reduce of empty array with no initial value
    at Array.reduce ()
    at Object. (/Users/krunal/Desktop/code/pyt/app.js:5:15)
    at Module._compile (internal/modules/cjs/loader.js:1128:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:983:32)
    at Function.Module._load (internal/modules/cjs/loader.js:891:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47 

Jika array hanya memiliki satu item (terlepas dari posisi) dan tidak ada nilai awal yang disediakan, atau jika nilai awal disediakan, tetapi array kosong, nilai solo akan dikembalikan tanpa menelepon panggilan balik.

data = []

const reducer = (accumulator, currentValue) => accumulator + currentValue

result = data.reduce(reducer, 11)

console.log(result) 

Keluaran

11 

Flating Array Menggunakan Metode Pengurangan JavaScript

Untuk meratakan array di JavaScript, gunakan metode array.reduce (). Kita dapat menggunakan fungsi pengurangan () untuk meratakan jumlah bersarang menjadi satu array. Kami menetapkan nilai awal ke array kosong dan kemudian menggabungkan nilai saat ini ke total.

// server.js

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

const flatValues = data.reduce((total, value) => {
  return total.concat(value);
}, []);

console.log(flatValues); 

Javascript

Anda harus mengembalikan sesuatu untuk fungsi pengurangan () agar berfungsi. Jadi selalu Periksa ulang dan pastikan bahwa Anda mengembalikan nilai yang Anda inginkan.

Saat fungsi peredam Anda dipanggil, nilai pengembaliannya menjadi yang baru Value sebelumnya argumen untuk lain waktu Fungsi peredam dipanggil. Itulah keajaibannya.

Setelah fungsi peredam dipanggil dan diberi objek terakhir dalam array, nilai pengembaliannya akan menjadi nilai pengembalian Fungsi mengurangi ()

Sintaks ES6 dari fungsi JavaScript ()

Lihat kode berikut.

// app.js

const pounds = [11.21, 19.21, 46.21];

const sum = pounds.reduce((total, amount) => total + amount); 

console.log(sum);
 

Lihat outputnya.

➜  es git:(master) ✗ node app
76.63
➜  es git:(master) ✗
 
  1. Dalam contoh ini, Redukir menerima dua parameter, total dan jumlah saat ini.
  2. Metode pengurangan () mengulangi setiap array, seperti halnya pada loop untuk.
  3. Ketika loop dimulai, nilai total adalah angka di paling kiri (11.21), dan jumlah saat ini adalah yang ada di sebelahnya, yaitu (19.21).
  4. Kami ingin menambahkan jumlah saat ini ke total dalam contoh khusus ini.
  5. Perhitungan diulang untuk setiap item dalam array, tetapi nilai saat ini berubah ke nomor berikutnya dalam array, bergerak tepat setiap kali.
  6. Ketika tidak ada lagi angka yang tersisa dalam array, metode ini mengembalikan nilai total.

Temukan rata -rata menggunakan pengurangan () dalam JavaScript.

Dalam contoh di atas, alih -alih mencatat jumlah, Anda dapat membagi jumlah dengan panjang array sebelum Anda mengembalikan nilai akhir.

Cara untuk melakukan ini adalah dengan mengambil pengungkitan argumen lain dalam fungsi pengurangan ().

Argumen pertama adalah indeks . Sama seperti loop untuk, indeks mengacu pada berapa kali peredam telah melingkarkan melalui array.

Argumen terakhir adalah array itu sendiri.

Lihat contoh kode berikut.

// app.js

const pounds = [11, 21, 16];

const avg = pounds.reduce((total, amount, index, array) => {
  total += amount;
  if (index === array.length - 1) {
    return total / array.length;
  } else {
    return total;
  }
});

console.log(avg);
 

Lihat outputnya.

➜  es git:(master) ✗ node app
16
➜  es git:(master) ✗
 

Menemukan elemen berulang dalam array

Katakanlah Anda memiliki koleksi barang, dan Anda ingin tahu berapa banyak dari setiap item dalam koleksi.

Dalam skenario ini, metode JavaScript Reduksi () dapat membantu kami.

// app.js

const pounds = [11, 21, 16, 19, 46, 29, 46, 19, 21];

const count = pounds.reduce( (data, pound) => {
  data[pound] = (data[pound] || 0) + 1 ;
  return data;
} , {})

console.log(count);
 

Lihat outputnya.

➜  es git:(master) ✗ node app
{ '11': 1, '16': 1, '19': 2, '21': 2, '29': 1, '46': 2 }
➜  es git:(master) ✗
 

Untuk menghitung beberapa item dalam array, nilai awal kami harus menjadi objek kosong, bukan array kosong.

Karena kita akan mengembalikan objek, kita sekarang dapat menyimpan pasangan nilai kunci secara total.

Pada pass pertama kami, kami membutuhkan nama kunci pertama untuk menjadi nilai kami saat ini, dan kami ingin memberikan nilai 1.

Ini memberi kita objek dengan semua angka sebagai kunci, masing -masing dengan nilai 1.

Kami ingin jumlah setiap angka meningkat jika mereka mengulangi.

Untuk melakukan ini, kami memeriksa apakah totalnya berisi kunci dengan jumlah reduser saat ini pada loop kedua.

Jika tidak, maka kami membuatnya. Jika ya, maka kami menambah nilainya.

Menghapus item duplikat dalam array

Array.reduce () adalah fungsi yang berguna saat melepas item duplikat dalam array. Kita bisa menggunakan array.push () dan array.indexof () Fungsi dengan fungsi array.reduce () untuk menghapus item duplikat dari array.

let data = [1, 2, 3, 1, 4, 3, 3, 5, 5, 5, 8, 9]
let myOrderedArray = data.reduce(function (accumulator, currentValue) {
  if (accumulator.indexOf(currentValue) === -1) {
    accumulator.push(currentValue)
  }
  return accumulator
}, [])

console.log(myOrderedArray) 

Keluaran

[
  1, 2, 3, 4,
  5, 8, 9
] 

Mengelompokkan objek dengan properti

Kami dapat mengelompokkan objek dengan properti mereka menggunakan metode array.reduce ().

let student = [
  { name: 'Rick', enrollment: 60 },
  { name: 'Beth', enrollment: 40 },
  { name: 'Jerry', enrollment: 40 }
];

function groupBy(objectArray, property) {
  return objectArray.reduce(function (accumulator, obj) {
    let key = obj[property]
    if (!accumulator[key]) {
      accumulator[key] = []
    }
    accumulator[key].push(obj)
    return accumulator
  }, {})
}

let groupedStudent = groupBy(student, 'enrollment')
console.log(groupedStudent) 

Keluaran

{
  '40': [
    { name: 'Beth', enrollment: 40 },
    { name: 'Jerry', enrollment: 40 }
  ],
  '60': [ { name: 'Rick', enrollment: 60 } ]
} 

Kami telah mengelompokkan objek menggunakan ‘pendaftaran’ properti dalam contoh ini . Output menunjukkan 40 pendaftaran itu memiliki dua objek, dan 60 memiliki satu objek. Objek yang dikembalikan telah mengelompokkan properti, dan nilai adalah objek sesuai dengan properti itu.

Kesimpulan

JavaScript Reduksi membutuhkan array dan Mengurangi array ke nilai tunggal berdasarkan fungsi yang kami berikan. Misalnya, mungkin membutuhkan sejumlah angka dan kurangi menjadi jumlah atau rata -rata. Jika Anda tidak memberikan nilai awal, fungsi RedICE () akan mengasumsikan item pertama dalam array Anda sebagai nilai awal Anda.

Kesalahan lain yang paling umum adalah lupa mengembalikan total. Anda harus mengembalikan sesuatu untuk fungsi pengurangan () agar berfungsi. Selalu periksa ulang dan pastikan bahwa Anda mengembalikan nilai yang Anda inginkan.

Posting yang disarankan

JavaScript Array LastIndexof ()

JavaScript Array Termasuk ()

JavaScript Array Keys ()

JavaScript Array FindIndex ()

Indeks array javascript ()

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *