很多時候需要累加數組項的得到一個值(比如說求和)。如果你碰到一個類似的問題，你想到的方法是什么呢？會不會和我一樣，想到的就是使用for或while循環，對數組進行迭代，依次將他們的值加起來。比如：

var arr = [1,2,3,4,5,6]; Array.prototype.sum = function (){ var sumResult = 0; for (var i = 0; i < this.length; i++) { sumResult += parseInt(this[i]); } return sumResult; } arr.sum(); // 21

或者

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

那他們是不是最好的方案呢？先來看看他們所耗時間。

// 測試for和while循環實現數組求和的性能var arr = [1,2,3,4,5,6]; // for循環 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()); // 21 console.timeEnd("forLoop"); // 54.965ms

再來看看while循環所用時間：

var arry = [1,2,3,4,5,6]; console.time("whileLoop"); Array.prototype.whileLoop = 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; } arry.whileLoop(); console.log('最終的值：' + arry.whileLoop()); // 21 console.timeEnd("whileLoop"); // 53.056ms

看看對比結果

循環類型最終值(和)所費時間

for	21	54.965ms
while	21	53.056ms

備注：數組[1,2,3,4,5,6]做了10000次循環的累加。

雖然上面使用for和while都能實現需要的效果，但在JavaScript中有沒有更好的方案呢？回答是肯定的，在JavaScript中(ESMAScript 5)提供了另外兩個數組的方法reduce()和reduceRight()，這兩個數組會迭代數組的所有數組項，然后返回一個最終值。接下來的內容，主要來學習這兩種方法。

reduce()方法

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

語法

array.reduce(callbackfn,[initialValue])

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

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

• preValue: 上一次調用回調返回的值，或者是提供的初始值（initialValue）
• curValue: 數組中當前被處理的數組項
• index: 當前數組項在數組中的索引值
• array: 調用?reduce()方法的數組

而initialValue作為第一次調用?callbackfn函數的第一個參數。

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

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

來看一個示例：

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

示例中的回調函數被執行四次，每次參數和返回的值如下：

?preValuecurValueindexarray返回值

第一次回調	0	1	1	[0,1,2,3,4]	1
第二次回調	1	2	2	[0,1,2,3,4]	3
第三次回調	3	3	3	[0,1,2,3,4]	6
第四次回調	6	4	4	[0,1,2,3,4]	10

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

var arr = [0,1,2,3,4]; arr.reduce(function (preValue,curValue,index,array) { return preValue + curValue; }, 5); //15 ?preValuecurValueindexarray返回值

第一次回調	5	0	0	[0,1,2,3,4]	5
第二次回調	5	1	1	[0,1,2,3,4]	6
第三次回調	6	2	2	[0,1,2,3,4]	8
第四次回調	8	3	3	[0,1,2,3,4]	11
第五次回調	11	4	4	[0,1,2,3,4]	15

這樣一來，不用多說，應該都知道，可以使用reduce()實現數組求和的功能。如：

var arr = [1,2,3,4,5,6]; Array.prototype.sum = function (){ var sumResult = 0; return this.reduce(function (preValue, curValue) { return sumResult = preValue + curValue; }); return sumResult; } arr.sum(); // 21

回到文章的前面，來看看使用reduce()方法對數組求和，需要多少時間：

var arr = [1,2,3,4,5,6]; console.time("ruduce"); Array.prototype.ruduceSum = function (){ for (var i = 0; i < 10000; i++) { return this.reduce (function (preValue, curValue) { return preValue + curValue; }); } } arr.ruduceSum(); console.log('最終的值：' + arr.ruduceSum()); // 21 console.timeEnd("ruduce"); // 0.417ms

同時看看所費時間的對比：

循環類型最終值(和)所費時間

for	21	54.965ms
while	21	53.056ms
reduce	21	0.417ms

在Chrome瀏覽器下，每次執行的數據都會略有不同，但可以明顯的看出reduce()對數組項求和所費時間是最短的。

reduceRight()方法

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

reduceRight()首次調用回調函數callbackfn時，prevValue?和?curValue?可以是兩個值之一。如果調用?reduceRight()?時提供了?initialValue?參數，則?prevValue?等于?initialValue，curValue?等于數組中的最后一個值。如果沒有提供?initialValue?參數，則?prevValue?等于數組最后一個值，?curValue?等于數組中倒數第二個值。

來看實例：

var arr = [0,1,2,3,4]; arr.reduceRight(function (preValue,curValue,index,array) { return preValue + curValue; }); // 10

回調將會被調用四次，每次調用的參數及返回值如下：

?preValuecurValueindexarray返回值

第一次回調	4	3	3	[0,1,2,3,4]	7
第二次回調	7	2	2	[0,1,2,3,4]	9
第三次回調	9	1	1	[0,1,2,3,4]	10
第四次回調	10	0	0	[0,1,2,3,4]	10

如果提供一個初始值initialValue為5:

var arr = [0,1,2,3,4]; arr.reduceRight(function (preValue,curValue,index,array) { return preValue + curValue; }, 5); // 15

回調將會被調用五次，每次調用的參數及返回的值如下：

?preValuecurValueindexarray返回值

第一次回調	5	4	4	[0,1,2,3,4]	9
第二次回調	9	3	3	[0,1,2,3,4]	12
第三次回調	12	2	2	[0,1,2,3,4]	14
第四次回調	14	1	1	[0,1,2,3,4]	15
第五次回調	15	0	0	[0,1,2,3,4]	15

同樣的，可以對一個數組求和，也可以使用reduceRight()方法:

var arr = [1,2,3,4,5,6]; console.time("ruduceRight"); Array.prototype.ruduceRightSum = function (){ for (var i = 0; i < 10000; i++) { return this.reduceRight (function (preValue, curValue) { return preValue + curValue; }); } } arr.ruduceRightSum(); console.log('最終的值：' + arr.ruduceSum()); // 21 console.timeEnd("ruduceRight"); // 5.725ms

總結

reduce()和reduceRight()兩個方法功能都是類似的，可以讓數組調用一個回調函數callbackfn作為累加器。實際上根據這個回調函數，可以實現不同的功能，比如說，對數組項求合；將多個數組合并到一個數組等等。甚至配合數組其他的方法你還可以做更多功能的處理。如果感興趣的話不仿嘗試一二。

初學者學習筆記，如有不對，還希望高手指點。如有造成誤解，還希望多多諒解。

大漠

常用昵稱“大漠”，W3CPlus創始人，目前就職于手淘。中國Drupal社區核心成員之一。對HTML5、CSS3和Sass等前端腳本語言有非常深入的認識和豐富的實踐經驗，尤其專注對CSS3的研究，是國內最早研究和使用CSS3技術的一批人。CSS3、Sass和Drupal中國布道者。2014年出版《圖解CSS3：核心技術與案例實戰》。

如需轉載，煩請注明出處：http://www.w3cplus.com/javascript/array-part-8.html

轉載于:https://www.cnblogs.com/huenchao/p/6091313.html

總結

以上是生活随笔為你收集整理的JavaScript学习笔记：数组reduce()和reduceRight()方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。