之前在看一篇提升js性能的文章中看到數(shù)組中reduce()方法的應(yīng)用，由于我在之前的es6學(xué)習(xí)中沒有了解過這個(gè)方法，在我所看的文章中感覺這個(gè)方法挺有意思的，然后我查了點(diǎn)資料，前后看了幾篇文章，自己找了幾個(gè)例子敲了敲，瞬間感覺內(nèi)心美滋滋的，所以今天我總結(jié)了下，在這里小結(jié)一下reduce()方法的概念和幾個(gè)小例子。

1、reduce()方法
reduce()方法接收一個(gè)函數(shù)callbackfn作為累加器（accumulator），數(shù)組中的每個(gè)值（從左到右）開始合并，最終為一個(gè)值。

語法

array.reduce(callbackfn,[initialValue])

reduce()方法接收callbackfn函數(shù)，而這個(gè)函數(shù)包含四個(gè)參數(shù)：

function callbackfn(preValue,curValue,index,array){}

preValue: 上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue）
curValue: 數(shù)組中當(dāng)前被處理的數(shù)組項(xiàng)
index: 當(dāng)前數(shù)組項(xiàng)在數(shù)組中的索引值
array: 調(diào)用 reduce()方法的數(shù)組
而initialValue作為第一次調(diào)用 callbackfn函數(shù)的第一個(gè)參數(shù)。

reduce()方法為數(shù)組中的每一個(gè)元素依次執(zhí)行回調(diào)函數(shù)callbackfn，不包括數(shù)組中被刪除或從未被賦值的元素，接受四個(gè)參數(shù)：初始值（或者上一次回調(diào)函數(shù)的返回值），當(dāng)前元素值，當(dāng)前索引，調(diào)用 reduce() 的數(shù)組。

回調(diào)函數(shù)第一次執(zhí)行時(shí)，preValue 和 curValue 可以是一個(gè)值，如果 initialValue 在調(diào)用 reduce() 時(shí)被提供，那么第一個(gè) preValue 等于 initialValue ，并且curValue 等于數(shù)組中的第一個(gè)值；如果initialValue 未被提供，那么preValue 等于數(shù)組中的第一個(gè)值，`curValue等于數(shù)組中的第二個(gè)值。

來看一個(gè)示例：

var arr = [0,1,2,3,4];
arr.reduce( (preValue,curValue,index,array) =>(preValue + curValue)) // 10

示例中的回調(diào)函數(shù)被執(zhí)行四次，每次參數(shù)和返回的值如下：

image.png

上面的示例reduce()方法沒有提供initialValue初始值，接下來再上面的示例中，稍作修改，提供一個(gè)初始值，這個(gè)值為5。這個(gè)時(shí)候reduce()方法會(huì)執(zhí)行五次回調(diào)，每次參數(shù)和返回的值如下：

var arr = [0,1,2,3,4];

arr.reduce( (preValue,curValue,index,array) =>(preValue + curValue), 5); //15

image.png

上面代碼通過reduce()方法一行代碼就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的求和運(yùn)算，是不是感覺hin簡(jiǎn)潔喲~ 而且性能杠杠滴。
沒有對(duì)比就沒有傷害，我們來對(duì)比一下我們平時(shí)用的for循環(huán)和while循環(huán)的求和方法以及它們消耗的時(shí)間：

for循環(huán)

console.time("forLoop");
var arr = [0,1,2,3,4];
Array.prototype.sum = function (){
    var sumResult = 0;
    for (var i = 0; i < this.length; i++) {
        sumResult += parseInt(this[i]);
    }
    return sumResult;
}

console.log(arr.sum()); // 10
console.timeEnd("forLoop");// forLoop: 0.370849609375ms

while循環(huán)

console.time("whileLoop");
var arr = [0,1,2,3,4];

Array.prototype.sum = function () {
    var sumResult = 0;
    var i = this.length;
    while (i--) {
        sumResult += parseInt(this[i]);
    }
    return sumResult;
}

console.log(arr.sum()); // 10
console.timeEnd("whileLoop");//whileLoop: 0.97509765625ms

回頭再看看剛剛寫的reduce()方法所用時(shí)間：

console.time("reduceLoop");
var arr = [0,1,2,3,4];
arr.reduce( (preValue,curValue,index,array) =>(preValue + curValue)) // 10
console.timeEnd("reduceLoop");//reduceLoop: 0.08984375ms

從下表可以明顯的看出reduce()相較于for循環(huán)和while循環(huán)性能高了一個(gè)數(shù)量級(jí)，而且代碼十分簡(jiǎn)潔，是不是瞬間有種感覺：原來還可以這樣??！

image.png

2、幾個(gè)小案例

1）同時(shí)實(shí)現(xiàn)map和filter

   //1.同時(shí)實(shí)現(xiàn)map和filter
      var numbers = [10,20,30,40];
      var doubleAndOver50 = numbers.reduce((resultList,num)=> {
        num = num*2;
        if (num > 50){
          resultList.push(num);
        }
        return resultList;
      },[]);
      doubleAndOver50;//[60, 80]
    

2）統(tǒng)計(jì)數(shù)組中相同項(xiàng)的個(gè)數(shù)

  //2.統(tǒng)計(jì)數(shù)組中相同項(xiàng)的個(gè)數(shù)
      var cars = ["BMW","benz","benz","BMW","大眾汽車","大眾汽車","蘭博基尼"];
      var carsObj = cars.reduce(function (obj,name) {
        obj[name] = obj[name]? ++obj[name]:1;
        return obj;
      },{});
      carsObj;  //{BMW: 2, benz: 2, 大眾汽車: 2, 蘭博基尼: 1}

3）數(shù)組去重

var arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
var str = arr.sort().reduce((prev, cur)=>{
    if(prev.length===0 || prev[prev.length-1]!==cur){
        prev.push(cur);
    }
    return prev;
}, []);
str // (5) [1, 2, 3, 4, 5]

4）求階乘

var a = [1,2,3,4,5,6,7,8,9,10]
 
var str = a.reduce(function(prev,cur,index,arr){
    return prev * cur ;
})
 
str //3628800

5）將二維數(shù)組轉(zhuǎn)為一位數(shù)組

var a= [[0,1],[2,3],[4,5],[6,7],[8,9]];
 
var str = a.reduce(function(prev,cur){
    return prev.concat(cur)
})
 
str    //(10) [0,1, 2, 3, 4, 5, 6, 7, 8, 9]

3、reduceRight()方法
reduceRight()方法的功能和reduce()功能是一樣的，不同的是reduceRight()從數(shù)組的末尾向前將數(shù)組中的數(shù)組項(xiàng)做累加，參數(shù)和上面是一樣的。結(jié)果都是一樣的我就不寫代碼了。

小生乃牛犢一枚，如有不對(duì)，歡迎各路大佬下方評(píng)論指教~~