ES6中的数组reduce()方法详解

拼搏现实的明天。 2023-02-19 07:29 3阅读 0赞

**目录**

1. 语法reduce说明

2. 一些用途

3. 极力避免的情况

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

> reduce() 方法对数组中的每个元素执行一个由我们提供的**reducer**函数(升序执行)，将其结果汇总为单个返回值。

### 1. 语法reduce说明 ###

>     arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

**`第一个参数： callback函数`**

执行数组中每个值 (如果没有提供 `initialValue则第一个值除外`)的函数，包含四个参数：

*  **`   accumulator`**

累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或`initialValue`（见于下方）。

*  `   currentValue`

数组中正在处理的元素。

*  `   index` 可选

数组中正在处理的当前元素的索引。 如果提供了`initialValue`，则起始索引号为0，否则从索引1起始。

*  `   array`可选

调用`reduce()`的原数组

**`第二个参数： initialValue`可选**

作为第一次调用 `callback`函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

这个看下来都有点蒙，其实就是两种情况，一种情况是给了初始值，一种是没提供也就是reduce的第二个参数**`initialValue`**。

`reduce`为数组中的每一个元素依次执行`callback`函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：

*  `accumulator 累计器`
 *  `currentValue 当前值`
 *  `currentIndex 当前索引`
 *  `array 数组`

回调函数第一次执行时，`accumulator` 和`currentValue`的取值有两种情况：如果调用`reduce()`时提供了`initialValue`，`accumulator`取值为`initialValue`，`currentValue`取数组中的第一个值；如果没有提供 `initialValue`，那么`accumulator`取数组中的第一个值，`currentValue`取数组中的第二个值。

**如果没有提供`initialValue`，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供`initialValue`，从索引0开始。**

为了理解透举个栗子：

展示：

1.  无初始值

假如运行下段`reduce()`代码：

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
      return accumulator + currentValue;
    });

callback 被调用四次，每次调用的参数和返回值如下表：

<table> 
 <thead> 
  <tr> 
   <th><code>callback</code></th> 
   <th><code>accumulator</code></th> 
   <th><code>currentValue</code></th> 
   <th><code>currentIndex</code></th> 
   <th><code>array</code></th> 
   <th>return value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <th>first call</th> 
   <td><code>0</code></td> 
   <td><code>1</code></td> 
   <td><code>1</code></td> 
   <td><code>[0, 1, 2, 3, 4]</code></td> 
   <td><code>1</code></td> 
  </tr> 
  <tr> 
   <th>second call</th> 
   <td><code>1</code></td> 
   <td><code>2</code></td> 
   <td><code>2</code></td> 
   <td><code>[0, 1, 2, 3, 4]</code></td> 
   <td><code>3</code></td> 
  </tr> 
  <tr> 
   <th>third call</th> 
   <td><code>3</code></td> 
   <td><code>3</code></td> 
   <td><code>3</code></td> 
   <td><code>[0, 1, 2, 3, 4]</code></td> 
   <td><code>6</code></td> 
  </tr> 
  <tr> 
   <th>fourth call</th> 
   <td><code>6</code></td> 
   <td><code>4</code></td> 
   <td><code>4</code></td> 
   <td><code>[0, 1, 2, 3, 4]</code></td> 
   <td><code>10</code></td> 
  </tr> 
 </tbody> 
</table>

由`reduce`返回的值将是最后一次回调返回值（10）。

2.  添加初始值，这样子

提供一个初始值作为`reduce()`方法的第二个参数，以下是运行过程及结果：

[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => { return accumulator + currentValue; }, 10 );
    // 提供初始值为 10

<table> 
 <thead> 
  <tr> 
   <th><code>callback</code></th> 
   <th><code>accumulator</code></th> 
   <th><code>currentValue</code></th> 
   <th><code>currentIndex</code></th> 
   <th><code>array</code></th> 
   <th>return value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <th>first call</th> 
   <td><code>10</code></td> 
   <td><code>0</code></td> 
   <td><code>0</code></td> 
   <td><code>[0, 1, 2, 3, 4]</code></td> 
   <td><code>10</code></td> 
  </tr> 
  <tr> 
   <th>second call</th> 
   <td><code>10</code></td> 
   <td><code>1</code></td> 
   <td><code>1</code></td> 
   <td><code>[0, 1, 2, 3, 4]</code></td> 
   <td><code>11</code></td> 
  </tr> 
  <tr> 
   <th>third call</th> 
   <td><code>11</code></td> 
   <td><code>2</code></td> 
   <td><code>2</code></td> 
   <td><code>[0, 1, 2, 3, 4]</code></td> 
   <td><code>13</code></td> 
  </tr> 
  <tr> 
   <th>fourth call</th> 
   <td><code>13</code></td> 
   <td><code>3</code></td> 
   <td><code>3</code></td> 
   <td><code>[0, 1, 2, 3, 4]</code></td> 
   <td><code>16</code></td> 
  </tr> 
  <tr> 
   <th>fifth call</th> 
   <td><code>16</code></td> 
   <td><code>4</code></td> 
   <td><code>4</code></td> 
   <td><code>[0, 1, 2, 3, 4]</code></td> 
   <td><code>20</code></td> 
  </tr> 
 </tbody> 
</table>

这种情况下`reduce()`返回的值是`20`。

这个之后就理解透了。

### 2. 一些用途 ###

求和

var total = [ 0, 1, 2, 3 ].reduce(
      ( acc, cur ) => acc + cur,
      0
    );
    
    // total  6

累加对象里的值

let sum = [{x: 1}, {x:2}, {x:3}].reduce(
        (accumulator, currentValue) => accumulator + currentValue.x
        ,0
    );
    
    console.log(sum) // logs 6

二维数组变一维

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
     ( acc, cur ) => acc.concat(cur),
     []
    );
    // [0, 1, 2, 3, 4, 5]

计算数组中每个元素出现的次数

按属性对object分类

### 3. 极力避免的情况 ###

未设置初始化值时