JavaScript 知识碎片[二] Array 数组方法之 reduce()

小鱼儿 2022-12-20 12:42 185阅读 0赞

> 业精于勤 荒于嬉

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

从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。

### 基本用法 ###

const array1Reduce = [1, 2, 3, 4];
            // 定义了回调函数函数
            const reducer = (accumulator, currentValue) => accumulator + currentValue;
    
            // 1 + 2 + 3 + 4
            console.log(array1Reduce.reduce(reducer));
            // expected output: 10
    
            // 5 + 1 + 2 + 3 + 4
            console.log(array1Reduce.reduce(reducer, 5));
            // expected output: 15

**reducer** 函数接收4个参数:

1.  Accumulator (acc) (累计器)
2.  Current Value (cur) (当前值)
3.  Current Index (idx) (当前索引)
4.  Source Array (src) (源数组)

*您的 **reducer** 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。*

> ### 语法 ###
> 
>     arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
> 
> **参数**
> 
> `callback`
> 
> 执行数组中每个值 (如果没有提供 `initialValue则第一个值除外`)的函数，包含四个参数：
> 
> **`accumulator`**
> 
> 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或`initialValue`（见于下方）。
> 
> `currentValue`
> 
> 数组中正在处理的元素。
> 
> `index` 可选
> 
> 数组中正在处理的当前元素的索引。 如果提供了`initialValue`，则起始索引号为0，否则从索引1起始。
> 
> `array`可选
> 
> 调用`reduce()`的数组
> 
> `initialValue`可选
> 
> 作为第一次调用 `callback`函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。
> 
> **返回值**
> 
> 函数累计处理的结果
> 
> ### 描述 ###
> 
> `reduce`为数组中的每一个元素依次执行`callback`函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：
> 
>  *  `accumulator 累计器`
>  *  `currentValue 当前值`
>  *  `currentIndex 当前索引`
>  *  `array 数组`
> 
> 回调函数第一次执行时，`accumulator` 和`currentValue`的取值有两种情况：如果调用`reduce()`时提供了`initialValue`，`accumulator`取值为`initialValue`，`currentValue`取数组中的第一个值；如果没有提供 `initialValue`，那么`accumulator`取数组中的第一个值，`currentValue`取数组中的第二个值。
> 
> **注意：**如果没有提供`initialValue`，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供`initialValue`，从索引0开始。
> 
> 如果数组为空且没有提供`initialValue`，会抛出[`TypeError`][TypeError] 。如果数组仅有一个元素（无论位置如何）并且没有提供`initialValue`， 或者有提供`initialValue`但是数组为空，那么此唯一值将被返回并且`callback`不会被执行。

*提供初始值通常更安全，正如下面的例子，如果没有提供`initialValue`，则可能有四种输出：*

### 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()`方法的第二个参数，以下是运行过程及结果：

<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>

### 例子 ###

***数组里所有值的和***

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
      return accumulator + currentValue;
    }, 0);
    // 和为 6
    
    
    // 使用箭头函数
    var total = [ 0, 1, 2, 3 ].reduce(
      ( acc, cur ) => acc + cur,
      0
    );

***累加对象数组里的值***

***将二维数组转化为一维 数组扁平化***

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
      function(a, b) {
        return a.concat(b);
      },
      []
    );
    // flattened is [0, 1, 2, 3, 4, 5]
    
    // 箭头函数
    var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
     ( acc, cur ) => acc.concat(cur),
     []
    );

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

***按属性对object分类***

***数组去重***

***按顺序运行Promise 如果需要不失为一个好助手***

/**
     * Runs promises from array of functions that can return promises
     * in chained manner
     *
     * @param {array} arr - promise arr
     * @return {Object} promise object
     */
    function runPromiseInSequence(arr, input) {
      return arr.reduce(
        (promiseChain, currentFunction) => promiseChain.then(currentFunction),
        Promise.resolve(input)
      );
    }
    
    // promise function 1
    function p1(a) {
      return new Promise((resolve, reject) => {
        resolve(a * 5);
      });
    }
    
    // promise function 2
    function p2(a) {
      return new Promise((resolve, reject) => {
        resolve(a * 2);
      });
    }
    
    // function 3  - will be wrapped in a resolved promise by .then()
    function f3(a) {
     return a * 3;
    }
    
    // promise function 4
    function p4(a) {
      return new Promise((resolve, reject) => {
        resolve(a * 4);
      });
    }
    
    const promiseArr = [p1, p2, f3, p4];
    runPromiseInSequence(promiseArr, 10)
      .then(console.log);   // 1200

***使用reduce 实现map***

if (!Array.prototype.mapUsingReduce) {
      Array.prototype.mapUsingReduce = function(callback, thisArg) {
        return this.reduce(function(mappedArray, currentValue, index, array) {
          mappedArray[index] = callback.call(thisArg, currentValue, index, array)
          return mappedArray
        }, [])
      }
    }
    
    [1, 2, , 3].mapUsingReduce(
      (currentValue, index, array) => currentValue + index + array.length
    ) // [5, 7, , 10]

> 想把所有的知识点都烂熟于心

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]

[TypeError]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypeError
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: /images/20221120/7da55e0debd94d8bab3968d8e7f5fc5c.png