2024-08-07 JavaScript 的 reduce 方法

發表於 分類於 閱讀次數：
2024-08-07 JavaScript 的 reduce 方法

JavaScript 的 Array.prototype.reduce 方法。

reduce 方法接受一個回調函數和一個可選的初始值，用於將數組中的每個元素匯總成一個單一的值。這裡我們一步一步解析這段程式碼： 
1
2
const totalPie = data_pie.reduce((acc, row) => acc + row.CO2e_percentage, 0);

reduce 方法

reduce 方法用於對數組中的所有元素執行一個累加器函數，從而將數組簡化為一個單一的值。語法如下： 
1
2
array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

.callback 是一個回調函數，對數組中的每個值（從左到右）依次執行該函數，最後匯總為一個單一的值。這個回調函數接受四個參數：

.accumulator（acc）：累加器，它累積回調函數的返回值，是上一次調用回調函數的結果。
.currentValue（row）：數組中正在處理的當前元素。
.currentIndex（可選）：數組中正在處理的當前元素的索引。
.array（可選）：調用 reduce 的數組。
.initialValue（0）：作為第一次調用回調函數時 accumulator 的初始值。如果未提供初始值，則 reduce 會將數組中的第一個元素作為初始值，從第二個元素開始執行回調函數。

解析這段程式碼

1. data_pie 是一個數組，其中每個元素都是一個對象，包含 CO2e_percentage 屬性。 2. reduce 方法的回調函數 (acc, row) => acc + row.CO2e_percentage 被調用來計算所有 CO2e_percentage 值的總和。 3. acc 是累加器，初始值為 0。 4. row 是數組中的當前元素。

當 reduce 方法執行時，它會這樣運作：

  1. 第一輪：acc 是初始值 0，row 是 data_pie 的第一個元素。計算 0 + row.CO2e_percentage 並將結果儲存在 acc 中。
  2. 第二輪：acc 是第一輪的結果，row 是 data_pie 的第二個元素。計算 acc + row.CO2e_percentage 並將結果儲存在 acc 中。
  3. 如此重複，直到遍歷完整個數組。
    最後，reduce 方法返回累加的總和，並將其賦值給 totalPie。

範例

假設 data_pie 的數據如下： 
1
2
3
4
5
const data_pie = [
  { CO2e_percentage: 10 },
  { CO2e_percentage: 20 },
  { CO2e_percentage: 30 },
];

運行這段程式碼會如下所示：

  1. 初始值：acc = 0
  2. 第一輪：acc = 0 + 10 = 10
  3. 第二輪：acc = 10 + 20 = 30
  4. 第三輪：acc = 30 + 30 = 60
    最後，totalPie 的值為 60。