reduce 方法
對數組中的所有元素調用指定的回調函數。
該回調函數的返回值為累積結果,並且此返回值在下一次調用該回調函數時作為參數提供。
語法
array1.reduce(callbackfn[, initialValue])
array1 必需。一個數組對象。
callbackfn 必需。一個接受最多四個參數的函數。
nitialValue 可選。如果指定 initialValue,則它將用作初始值來啟動累積。
返回值
通過最后一次調用回調函數獲得的累積結果。
異常
當滿足下列任一條件時,將引發 TypeError 異常:
- callbackfn 參數不是函數對象。
- 數組不包含元素,且未提供 initialValue。
備注
如果提供了 initialValue,則 reduce 方法會對數組中的每個元素調用一次 callbackfn 函數(按升序索引順序)。
如果未提供 initialValue,則 reduce 方法會對從第二個元素開始的每個元素調用 callbackfn 函數。
回調函數語法
回調函數的語法如下所示:
function callbackfn(previousValue, currentValue, currentIndex, array1)
下面來看幾個小例子,加深對該方法的理解
栗子1:將數組元素變成字符串拼接
//不傳initialValue
function lizi1(prev,curr){ return prev+'::'+curr; } var arr1=['a','b','c']; var result1= arr1.reduce(lizi1); console.info('result1',arr1.reduce(lizi1)); //輸出
箭頭函數寫法:
var rs1 = arr1.reduce((prev,cur) =>{ return prev+'::' +cur }) console.info('rs1',rs1);//是不是更簡潔了呢
栗子2:扁平化二維數組
//傳initValue
//傳initialVal,扁平化二維數組 function lizi2(prev,curr){ return prev.concat(curr) } var arr2=[[1,2],[3,4],[5,6],[7]]
// 傳initValue var result2 = arr2.reduce(lizi2,[]); console.info('result2',result2);//輸出 [1,2,3,4,5,6,7]
//不傳initValue
var result3 = arr2.reduce(lizi2);
console.info('result3',result3);//輸出 [1,2,3,4,5,6,7]
箭頭函數寫法:

var rs2 = arr2.reduce((a, b) => { return a.concat(b) },[])
栗子3:處理數據並,累加
function absolute(prev,curr){ return Math.abs(prev)+Math.abs(curr) } var arr4 = [-2]; //不傳initVal,觀察差別 var result4 = arr4.reduce(absolute); //傳initVal, var result5 = arr4.reduce(absolute,0); console.info('result4',result4) //-2 console.info('result5',result5) //2
栗子4:取數組中大於1並小於10的元素
function process(prevArray,curr){ var arr = null; if(curr >1 &&curr < 10){ arr = prevArray.concat(curr) }else{ arr = prevArray } return arr; } var arr5 = [100,20,3,4,-5,10,2,-3,9]; var result6 = arr5.reduce(process,[]); console.info('result6',result6) //[3,4,2,9]
箭頭函數寫法:

var rs6 = arr5.reduce((prev,cur) => { var newArr; if(cur>1&&cur<10){ newArr = prev.concat(cur) }else{ newArr = prev } return newArr },[])
栗子5:將[1,3,1,4]轉為數字1314

function addDigitValue(prev,curr,curIndex,array){ var exponent = (array.length -1) -curIndex; var digitValue = curr*Math.pow(10,exponent); return prev + digitValue; } var arr6 = [1,3,1,4]; var result7 = arr6.reduce(addDigitValue,0) console.info('result7',result7)
在工作學習的過程中,經常看到關於reduce()的應用,特地地找資料學習了一下,如果對您又幫助,那真是再好不過了!