JavaScript reduce()

reduce() 方法具有累積計算的功能，具體規則下面會具體介紹，ES5新增。

更多 Array 陣列內容可以參閱 JavaScript Array 陣列 一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
array.reduce(callbackfn[, initial])

引數解析：

（1）.callbackfn(previousValue, currentValue, currentIndex, array)：

         必需，回撥函式，以索引升序方式對陣列每一個元素執行一次此回撥函式。

         具有四個引數：

         （1）.前一次回撥函式的返回值。

         （2）.當前陣列元素的值。

         （3）.當前陣列元素的索引。

         （4）.當前陣列物件。

（2）.initial：可選，如果指定此引數，將用作初始積累值。

特別說明：回撥函式第一次呼叫時，是否為 reduce() 提供 initial 引數有重要影響。

提供 initial 引數：

（1）.previousValue 引數值為 initial 值。

（2）.currentValue 引數是陣列中的第一個元素值。

未提供 initial引數：

（1）.previousValue 引數值是陣列中的第一個元素值。

（2）.currentValue 引數值是陣列中的第二個元素的值。

reduce() 方法返回值是回撥函式最後一次執行返回的累積結果。

瀏覽器相容：

（1）.IE9+ 瀏覽器支援此方法。

（2）.edge 瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.火狐瀏覽器支援此方法。

（5）.opera 瀏覽器支援此方法。

（6）.safari 瀏覽器支援此方法。

程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let num=0;
function appendCurrent (previousValue,currentValue){
  num++;
  return previousValue + ":" + currentValue;
}
let elements=["antzone", "softwhy.com", 3, "青島市南區"];
let result=elements.reduce(appendCurrent);
console.log(num);
console.log(result);

程式碼執行效果截圖如下：

對上述程式碼分析如下：

（1）.沒有為 reduce() 方法提供第二個引數。

（2）.那麼回撥函式初次呼叫時 previousValue 引數值就是陣列第一個元素值，currentValue 是第二個元素值。

（3）.初次呼叫，函式內部實現陣列第一個元素和第二個元素拼接效果，生成 "antzone:softwhy.com" 。

（4）.第二個呼叫回撥函式，previousValue 引數值是上一次回撥函式的返回值 "antzone:softwhy.com" ，第二個引數值是陣列第三個元素值。

（5）.最後 reduce() 方法的返回值就是回撥函式最後一次執行的返回值。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let num=0;
function addRounded(previousValue, currentValue){
  num++;
  return previousValue + Math.round(currentValue);
}
let numbers=[10.9,15.4,0.5];
let result=numbers.reduce(addRounded,0);
console.log(num);
console.log(result);

程式碼執行效果截圖如下：

對上述程式碼分析如下：

（1）.對 reduce() 方法提供了兩個引數。

（2）.第二個引數 initial 規定累積起始值。

（3）.reduce() 方法規定引數 initial，回撥函式第一個引數是 initial，回撥函式第二個引數是陣列第一個元素值。

（4）.回撥函式第一次執行完畢，它的返回值作為回撥函式第二次執行的第一個引數值，第二個引數是陣列的第二個元素值，以此類推。

（5）.最後 reduce() 方法的返回值就是回撥函式最後一次執行的返回值。