JavaScript reduce()

reduce方法具有累積計算的功能，規則單純通過理論方式難以清晰描述。

後面會通過程式碼例項對其進行一下詳細分析。

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

ES5新增此方法。

語法結構：

[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）.safria瀏覽器支援此方法。

程式碼例項：

[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方法的返回值就是回撥函式最後一次執行的返回值。