数组reduce()和reduceRight()方法

桃扇骨 2022-06-01 05:36 182阅读 0赞

原文地址：[https://www.w3cplus.com/javascript/array-part-8.html][https_www.w3cplus.com_javascript_array-part-8.html]

很多时候需要累加数组项的得到一个值(比如说求和)。如果你碰到一个类似的问题，你想到的方法是什么呢？会不会和我一样，想到的就是使用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;
        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循环所用时间：

看看对比结果

<table> 
 <thead> 
  <tr> 
   <th>循环类型</th> 
   <th>最终值(和)</th> 
   <th>所费时间</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>for</td> 
   <td>21</td> 
   <td>54.965ms</td> 
  </tr> 
  <tr> 
   <td>while</td> 
   <td>21</td> 
   <td>53.056ms</td> 
  </tr> 
 </tbody> 
</table>

备注：数组\[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

示例中的回调函数被执行四次，每次参数和返回的值如下：

<table> 
 <thead> 
  <tr> 
   <th>回调次数</th> 
   <th>preValue</th> 
   <th>curValue</th> 
   <th>index</th> 
   <th>array</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>第一次回调</td> 
   <td>0</td> 
   <td>1</td> 
   <td>1</td> 
   <td>[0,1,2,3,4]</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>第二次回调</td> 
   <td>1</td> 
   <td>2</td> 
   <td>2</td> 
   <td>[0,1,2,3,4]</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>第三次回调</td> 
   <td>3</td> 
   <td>3</td> 
   <td>3</td> 
   <td>[0,1,2,3,4]</td> 
   <td>6</td> 
  </tr> 
  <tr> 
   <td>第四次回调</td> 
   <td>6</td> 
   <td>4</td> 
   <td>4</td> 
   <td>[0,1,2,3,4]</td> 
   <td>10</td> 
  </tr> 
 </tbody> 
</table>

上面的示例reduce()方法没有提供initialValue初始值，接下来再上面的示例中，稍作修改，提供一个初始值，这个值为5。这个时候reduce()方法会执行五次回调，每次参数和返回的值如下：

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

<table> 
 <thead> 
  <tr> 
   <th>回调次数</th> 
   <th>preValue</th> 
   <th>curValue</th> 
   <th>index</th> 
   <th>array</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>第一次回调</td> 
   <td>5</td> 
   <td>0</td> 
   <td>0</td> 
   <td>[0,1,2,3,4]</td> 
   <td>5</td> 
  </tr> 
  <tr> 
   <td>第二次回调</td> 
   <td>5</td> 
   <td>1</td> 
   <td>1</td> 
   <td>[0,1,2,3,4]</td> 
   <td>6</td> 
  </tr> 
  <tr> 
   <td>第三次回调</td> 
   <td>6</td> 
   <td>2</td> 
   <td>2</td> 
   <td>[0,1,2,3,4]</td> 
   <td>8</td> 
  </tr> 
  <tr> 
   <td>第四次回调</td> 
   <td>8</td> 
   <td>3</td> 
   <td>3</td> 
   <td>[0,1,2,3,4]</td> 
   <td>11</td> 
  </tr> 
  <tr> 
   <td>第五次回调</td> 
   <td>11</td> 
   <td>4</td> 
   <td>4</td> 
   <td>[0,1,2,3,4]</td> 
   <td>15</td> 
  </tr> 
 </tbody> 
</table>

这样一来，不用多说，应该都知道，可以使用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;
        });
    } arr.sum(); // 21

回到文章的前面，来看看使用reduce()方法对数组求和，需要多少时间：

同时看看所费时间的对比：

在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

回调将会被调用四次，每次调用的参数及返回值如下：

<table> 
 <thead> 
  <tr> 
   <th>回调次数</th> 
   <th>preValue</th> 
   <th>curValue</th> 
   <th>index</th> 
   <th>array</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>第一次回调</td> 
   <td>4</td> 
   <td>3</td> 
   <td>3</td> 
   <td>[0,1,2,3,4]</td> 
   <td>7</td> 
  </tr> 
  <tr> 
   <td>第二次回调</td> 
   <td>7</td> 
   <td>2</td> 
   <td>2</td> 
   <td>[0,1,2,3,4]</td> 
   <td>9</td> 
  </tr> 
  <tr> 
   <td>第三次回调</td> 
   <td>9</td> 
   <td>1</td> 
   <td>1</td> 
   <td>[0,1,2,3,4]</td> 
   <td>10</td> 
  </tr> 
  <tr> 
   <td>第四次回调</td> 
   <td>10</td> 
   <td>0</td> 
   <td>0</td> 
   <td>[0,1,2,3,4]</td> 
   <td>10</td> 
  </tr> 
 </tbody> 
</table>

如果提供一个初始值initialValue为5:

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

回调将会被调用五次，每次调用的参数及返回的值如下：

<table> 
 <thead> 
  <tr> 
   <th>回调次数</th> 
   <th>preValue</th> 
   <th>curValue</th> 
   <th>index</th> 
   <th>array</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>第一次回调</td> 
   <td>5</td> 
   <td>4</td> 
   <td>4</td> 
   <td>[0,1,2,3,4]</td> 
   <td>9</td> 
  </tr> 
  <tr> 
   <td>第二次回调</td> 
   <td>9</td> 
   <td>3</td> 
   <td>3</td> 
   <td>[0,1,2,3,4]</td> 
   <td>12</td> 
  </tr> 
  <tr> 
   <td>第三次回调</td> 
   <td>12</td> 
   <td>2</td> 
   <td>2</td> 
   <td>[0,1,2,3,4]</td> 
   <td>14</td> 
  </tr> 
  <tr> 
   <td>第四次回调</td> 
   <td>14</td> 
   <td>1</td> 
   <td>1</td> 
   <td>[0,1,2,3,4]</td> 
   <td>15</td> 
  </tr> 
  <tr> 
   <td>第五次回调</td> 
   <td>15</td> 
   <td>0</td> 
   <td>0</td> 
   <td>[0,1,2,3,4]</td> 
   <td>15</td> 
  </tr> 
 </tbody> 
</table>

同样的，可以对一个数组求和，也可以使用reduceRight()方法:

**总结**

--------------------

reduce()和reduceRight()两个方法功能都是类似的，可以让数组调用一个回调函数callbackfn作为累加器。实际上根据这个回调函数，可以实现不同的功能，比如说，对数组项求合；将多个数组合并到一个数组等等。甚至配合数组其他的方法你还可以做更多功能的处理。如果感兴趣的话不仿尝试一二。

[https_www.w3cplus.com_javascript_array-part-8.html]: https://www.w3cplus.com/javascript/array-part-8.html