本文網址: https://mike.coderbridge.io/2023/10/19/how-to-use-reduce-in-javascript-1/
在JS中,reduce函數是個非常強大的工具,不只能用於計算總和,還可以用於各種複雜的數據轉換和處理任務,但由於其原理相對複雜,所以研究記錄下來。
1. reduce 的原理
- JavaScript 的 Array.prototype.reduce() 方法接收一個回呼函數和一個初始值作為參數。這個回呼函數又會接收四個參數:
◆ 累積器 (accumulator):這是在每次迭代中回傳的值,並在下一次迭代中被重新使用。初始時,它的值等於 reduce 方法中提供的初始值。
◆ 當前值 (currentValue):這是當前正在處理的陣列元素。
◆ 當前索引 (currentIndex):這是當前正在處理的陣列元素的索引。
◆ 原始陣列 (sourceArray):這是呼叫 reduce 的原始陣列。
3. reduce 的工作方式
- 它從陣列的第一個元素開始,對每個元素調用回呼函數,並將回呼函數的結果作為累積器的值傳遞給下一次的呼叫。最後,reduce 返回累積器的值。
如果在 reduce 調用時有提供初始值,則第一次呼叫回呼函數時,累積器的值將為該初始值,且當前值會是陣列的第一個元素。如果沒有提供初始值,則累積器的初始值將是陣列的第一個元素,當前值會是第二個元素,且迭代將從索引 1 開始。
4. 範例
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15
5. 範例解釋
- 這裡的動作步驟如下:
首次呼叫:acc = 0 (我們提供的初始值), curr = 1 → 回傳 0 + 1 = 1
第二次呼叫:acc = 1, curr = 2 → 回傳 1 + 2 = 3
第三次呼叫:acc = 3, curr = 3 → 回傳 3 + 3 = 6
第四次呼叫:acc = 6, curr = 4 → 回傳 6 + 4 = 10
第五次呼叫:acc = 10, curr = 5 → 回傳 10 + 5 = 15
最後,reduce 返回 15,這是陣列中所有數字的總和。
下一章節: 直接實戰摟!! [JS] 全面解析reduce()函數(二)