[JS] 全面解析reduce()函數(一)


Posted by mike-hsieh on 2023-10-19

本文網址: 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()函數(二)


#reduce #javascript







Related Posts

Javascript - slice vs splice

Javascript - slice vs splice

Vue.js 學習旅程Mile 7 – 資料屬性綁定篇:v-bind

Vue.js 學習旅程Mile 7 – 資料屬性綁定篇:v-bind

Linkedin Java 技術認證題庫  日期/ 建構子

Linkedin Java 技術認證題庫 日期/ 建構子


Comments