reduce方法和reduceRight方法

什麼是reduce方法？

先來看一下用用法：

var arr = [1, 2, 3, 4]
var sum = (a, b) => a + b
arr.reduce(sum, 0) // 10

由上面代碼能夠看出，reduce對數組arr的每個成員執行了sum函數。sum的參數a是累積變量，參數b是當前的數組成員。每次執行時，b會回到a,最後輸出a。

累積變量必須有一個初始值，上例是reduce函數的第二個參數0，若是省略該參數，那麼初始值默認是數組的第一個成員。

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

var sum = function(a, b) {
    console.log(a, b);
    return a + b
}

arr.reduce(sum) // => 10

// 1 2
// 3 3
// 6 4

reduce省略了初始值，經過sum函數裏面的打印語句，能夠看到累積變量每一次的變化。reduce方法提供了一種遍歷手段，對數組全部成員進行‘累積’處理。

既然是遍歷，那它跟 for 、 while有什麼不一樣呢？

for :

var arr = [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;
}

arr.sum(); // 10

while 

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

arr.sum() // 10

以上代碼都能實現reduce的功能，那爲什麼還要搞這玩意呢？ 

通常來講相似的方法比較都會是性能方面的比較，來看看各自的耗時

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

console.time('forLoop');

Array.prototype.forLoop = function() {
    for (var i = 0; i < 10000; i++) {
        var sumResult = 0;
        for (var j = 0; j < this.length; j++) {
            sumResult += parseInt(this[j]);
        }
    return sumResult;
}

arr.forLoop();
console.log('最終的值：' + arr.forLoop()) // 10
console.timeEnd('forLoop')

   

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

console.time('whileLoop')

Array.prototype.whileLoop = function() {
    var _this = this
    for(var i = 0; i < 10000; i++) {
        var sumResult = 0;
        var len = _this.length;
        while(len--) {
            sumResult += parseInt(_this[len]);
        }
    }
    return sumResult;
}

arr.whileLoop()
console.log('最終的值：' + arr.whileLoop())
console.timeEnd('whileLoop')

  

經屢次運行測試發現 10000次運行使用for循環 和while的時間大體至關，大概須要 4 - 7ms 不等！

那reduce呢？ 

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

console.time('reduce')

Array.prototype.reduceSum = function() {
    for (var i = 0; i < 10000; i++) {
        return this.reduce(function(preValue, curValue) {
            return preValue + curValue;
        });
    }
}

arr.reduceSum();
console.log('最終的值：' + arr.reduceSum()) // 10
console.timeEnd('reduce')

  

可見，時間大概在1-3ms之間，耗時狀況一目瞭然！

 

reduceRight（）方法

reduceRight() 方法的功能和reduce()功能是同樣的，不一樣的是reduceRight() 從數組的末尾向前將數組中的數組項作累加。

reduceRight() 首次調用回調函數callbackfn 時，preValue 和 curValue 能夠是兩個值之一。若是調用reduceRight()時提供了第二個參數，則preValue等於該參數，curValue等於數組中的最後一個值。若是沒有提供，則preValue等於數組最後一個值，curValue等於數組中倒數第二個值。

 

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

arr.reduceRight(function(preValue, curValue, index, array) {
    console.log(preValue, curValue)
   return preValue + curValue; 
}); // 10

// 4 3
// 7 2
// 9 1
// 10 0


arr.reduceRight(function(preValue, curValue, index, array) {
   console.log(preValue, curValue)
   return preValue + curValue; 
}, 5) // 15

// 5 4
// 9 3
// 12 2
// 14 1
// 15 0

 

 

相關文章： https://www.w3cplus.com/javascript/array-part-8.html 、 http://www.ruanyifeng.com/blog/2017/03/reduce_transduce.html