JavaScript Array reduce()教學 – 簡化你的迭代程式碼

前言

今天整理著桌面的檔案時，突然看到一個 txt 記錄著以前的筆記

看了看，發現好像蠻適合介紹的

之前介紹過JS的 some 以及every function了，今天要介紹的也是 JavaScript Array的function – reduce

reduce

reduce這個語法會將陣列中的物件迭代執行設定的函數

其實簡單來說，就是迴圈執行的感覺

arr.reduce(callback[accumulator, currentValue, currentIndex, array], initialValue)

callback則是呼叫的函數(可能是加總、相乘…等)

accumulator 累加器，每次函數執行完後更新的值

currentValue 目前迭代執行到的元素

currentIndex 目前迭代到的索引，非必要

array 整個陣列，非必要

initialValue 累加器的初始值，非必要，若無提供則陣列中的第一個元素會被當作累加器的初始值

(*要是沒有設定初始值，則會從第二個元素開始執行函數，因為第一個被當作累加器了)

聽起來介於簡單與不簡單之間呢

下面直接進入範例的部分

加總

const arr = [2, 3, 4, 5];

const sum = arr.reduce((a, b) => {
  //console.log(a);
  return  a+b;
}); 

//也可以縮短為這樣
//const sum = arr.reduce((a, b) => a + b);

console.log(sum); 

這樣就會印出14，也就是 2+3+4+5

要是在中間加上印出a的動作，就會看到 2、5、9的結果

相乘

const arr= [2, 3, 4];

const product = arr.reduce((a, b) => {
  //console.log(a);
  return a * b;
}, 5); 

console.log(product); 

在相乘這一次，我們設定了一個初始值 5

而a也就會是 5(設定的初始值) 、10、30

這個也可以寫成一行的 ➡ const product = arr.reduce((a, b) => a * b, 5);

什麼，用在文字上也可以?

const arr= ['I', 'Like', 'Apple'];

const word = arr.reduce((a, b) => {
  console.log(a);
  return a +' '+ b;
}); 

console.log(word); 

而根據這個本次迭代的值就會是

‘I ‘、’I Like ‘，以及最後回傳的 ‘I Like Apple’

結論

reduce 在中文的意思是減少、降低的意思，那用在這裡其實也挺符合的

將Array多個元素最後變成一個也算是種減少吧，減少數量?

不過當然這個功能其實用foreach也能處理啦，好處就在於不需要另外再建立一個參數來當計數的

畢竟reduce本意就是要回傳單一值了~

參考資料

• Array.prototype.reduce() – JavaScript | MDN (mozilla.org)

🧡希望這篇文章有提供一點幫助~

🧡幫我點一個小小的廣告或留言，都是對我的支持(每天都只有詐騙跟色情留言…)

⭐如有任何疑問，歡迎透過留言或messenger讓我知道 !

筆記