概述
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
可能是两个不同值其中的一个,如果reduce有
initialValue参数
,那么 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: https://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) |
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) |