MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Array.prototype.reduce()

概述

reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。

语法

arr.reduce([callback, initialValue])

参数

callback
执行数组中每个值的函数,包含四个参数:
previousValue
上一次调用回调函数返回的值,或者是提供的初始值(initialValue
currentValue
数组中当前被处理的元素
currentIndex
当前被处理元素在数组中的索引, 即currentValue的索引.如果有initialValue初始值, 从0开始.如果没有从1开始.
array
调用 reduce 的数组
initialValue
可选参数, 作为第一次调用 callback 的第一个参数。

返回值

最后一次调用回调函数返回的结果

描述

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:

  • previousValu 上一次值
  • currentValue 当前值
  • currentIndex 当前值的索引
  • array 数组

回调函数第一次执行时,previousValue 和 currentValue可能是两个不同值其中的一个,如果reduceinitialValue参数,那么 previousValue 等于 initialValue ,并且currentValue 等于数组中的第一个值;如果reduce没有 initialValue 参数,那么previousValue 等于数组中的第一个值,currentValue等于数组中的第二个值。

注意: 如果没有initialValue参数, reduce从index为1开始执行回调函数, 跳过第一个index. 如果有initialValue参数, reduce 将从index为 0 开始执行回调.

如果数组是空的并且没有initialValue参数, 将会抛出TypeError错误. 如果数组只有一个元素并且没有初始值initialValue, 或者有initialValue但数组是空的, 这个唯一的值直接被返回而不会调用回调函数.

通常来说提供一个initialValue初始值更安全一点, 因为没有的话会出现3种可能的输出结果, 如下面的例子所示.

var maxCallback = ( pre, cur ) => Math.max( pre.x, cur.x );
var maxCallback2 = ( max, cur ) => Math.max( max, cur );

// reduce() 没有初始值 initialValue
[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42        结果1
[ { x: 22 }            ].reduce( maxCallback ); // { x: 22 } 结果2
[                      ].reduce( maxCallback ); // TypeError 结果3

// map/reduce; reduce有初始值0, 更好的方法, 对于空数组也能正常工作
[ { x: 22 }, { x: 42 } ].map( el => el.x )
                        .reduce( maxCallback2 , 0 );

reduce是如何工作的

例如执行下面的代码

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

回调被执行四次,每次的参数和返回值如下表:

  previousValue currentValue index array return value
first call 0 1 1 [0,1,2,3,4] 1
second call 1 2 2 [0,1,2,3,4] 3
third call 3 3 3 [0,1,2,3,4] 6
fourth call 6 4 4 [0,1,2,3,4] 10

reduce 的返回值是回调函数最后一次被调用的返回值(10)。

你也可以使用箭头函数替代上面的函数, 下面的代码有同样的输出结果:

[0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr );

如果把初始值作为第二个参数传入 reduce,结果如下,结果如下:

[0,1,2,3,4].reduce( (previousValue, currentValue, currentIndex, array) => {
  return previousValue + currentValue;
}, 10);
  previousValue currentValue index array return value
first call 10 0 0 [0,1,2,3,4] 10
second call 10 1 1 [0,1,2,3,4] 11
third call 11 2 2 [0,1,2,3,4] 13
fourth call 13 3 3 [0,1,2,3,4] 16
fifth call 16 4 4 [0,1,2,3,4] 20

最后一次函数调用的返回值 (20) 作为reduce函数的结果被返回.

例题

将数组所有项相加

var total = [0, 1, 2, 3].reduce(function(a, b) {
    return a + b;
}, 0);
// total == 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]

兼容旧环境(Polyfill)

Array.prototype.reduce 被添加到 ECMA-262 标准第 5 版;因此可能在某些实现环境中不被支持。可以将下面的代码插入到脚本开头来允许在那些未能原生支持 reduce 的实现环境中使用它。

// Production steps of ECMA-262, Edition 5, 15.4.4.21
// Reference: http://es5.github.io/#x15.4.4.21
if (!Array.prototype.reduce) {
  Array.prototype.reduce = function(callback /*, initialValue*/) {
    'use strict';
    if (this == null) {
      throw new TypeError('Array.prototype.reduce called on null or undefined');
    }
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }
    var t = Object(this), len = t.length >>> 0, k = 0, value;
    if (arguments.length == 2) {
      value = arguments[1];
    } else {
      while (k < len && !(k in t)) {
        k++;
      }
      if (k >= len) {
        throw new TypeError('Reduce of empty array with no initial value');
      }
      value = t[k++];
    }
    for (; k < len; k++) {
      if (k in t) {
        value = callback(value, t[k], k, t);
      }
    }
    return value;
  };
}

规范

Specification Status Comment
ECMAScript 5.1 (ECMA-262)
Array.prototype.reduce
Standard Initial definition.
Implemented in JavaScript 1.8

ECMAScript 2015 (6th Edition, ECMA-262)
Array.prototype.reduce

Standard  

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 3.0 (1.9) 9 10.5 4.0
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

相关链接

文档标签和贡献者

 此页面的贡献者: KongMac, rainyLeo, ziyunfei, 540625404@qq.com
 最后编辑者: KongMac,