We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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  

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,