reduce()的使用

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：扁平化二維數組

//傳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)