数组reduce()方法


很多时候需要累加数组项的得到一个值(比如说求和)。如果你碰到一个类似的问题,你想到的方法是什么呢?会不会和我一样,想到的就是使用forwhile循环,对数组进行迭代,依次将他们的值加起来。比如:

for写法

1
2
3
4
5
6
7
8
9
var arr = [1, 2, 3, 4, 5, 6, 7];
Array.prototype.sum = function () {
var sumResult = 0;
for (var i = 0; i < this.length; i++) {
sumResult += parseInt(this[i]);
}
return sumResult;
}
arr.sum();//28

while写法

1
2
3
4
5
6
7
8
9
var arr = [1, 2, 3, 4, 5, 6, 7];
Array.prototype.sum = function () {
var sumResult = 0,i = this.length;
while (i--) {
sumResult += parseInt(this[i]);
}
return sumResult;
}
arr.sum();//28

然后对比一下两种方法运行的时间

for所耗时间

1
2
3
4
5
6
7
8
9
10
11
12
13
console.time("time");
var arr = [1, 2, 3, 4, 5, 6, 7];
Array.prototype.sum = function (){
var sumResult = 0;
for (var j = 0; j < this.length; j++) {
sumResult += parseInt(this[j]);
}
return sumResult;
}
arr.sum();//28
console.timeEnd("time");
//node >> 2.877ms
//chrome >> 4.68505859375ms

while所耗时间

1
2
3
4
5
6
7
8
9
10
11
12
13
console.time("time");
var arr = [1, 2, 3, 4, 5, 6, 7];
Array.prototype.sum = function () {
var sumResult = 0;
for (var j = 0; j < this.length; j++) {
sumResult += parseInt(this[j]);
}
return sumResult;
}
arr.sum();//28
console.timeEnd("time");
//node >> 2.956ms
//chrome >> time: 4.793701171875ms

reduce()方法

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

语法
1
array.reduce(callbackfn,[initialValue])

reduce()方法接收callbackfn函数,而这个函数包含四个参数:

1
function callbackfn(preValue,curValue,index,array){}

  • preValue: 上一次调用回调返回的值,或者是提供的初始值(initialValue)
  • curValue: 数组中当前被处理的数组项
  • index: 当前数组项在数组中的索引值
  • array: 调用 reduce()方法的数组

直接上例子(这样直观看得懂):

1
2
3
4
var arr = [0, 1, 2, 3, 4];
arr.reduce(function (preValue, curValue, index, array) {
return preValue + curValue;
});//10

preValue curValue index array 返回值
第一次回调 0 1 1 [0,1,2,3,4] 1
第二次回调 1 2 2 [0,1,2,3,4] 3
第三次回调 3 3 3 [0,1,2,3,4] 6
第四次回调 6 4 4 [0,1,2,3,4] 10

上面的示例reduce()方法没有提供initialValue初始值,接下来再上面的示例中,稍作修改,提供一个初始值,这个值为5。这个时候reduce()方法会执行五次回调,每次参数和返回的值如下:

1
2
3
4
var arr = [0, 1, 2, 3, 4];
arr.reduce(function (preValue, curValue, index, array) {
return preValue + curValue;
}, 5);//15

preValue curValue index array 返回值
第一次回调 5 0 0 [0,1,2,3,4] 5
第一次回调 5 1 1 [0,1,2,3,4] 6
第二次回调 6 2 2 [0,1,2,3,4] 8
第三次回调 8 3 3 [0,1,2,3,4] 11
第四次回调 11 4 4 [0,1,2,3,4] 15

这样一来,不用多说,应该都知道,可以使用reduce()实现数组求和的功能。如:

1
2
3
4
5
6
7
8
9
var arr = [1, 2, 3, 4, 5, 6, 7];
Array.prototype.sum = function () {
var sumResult = 0;
return this.reduce(function (preValue, curValue) {
return sumResult = preValue + curValue;
});
return sumResult;
}
arr.sum();//28

回到文章的前面,来看看使用reduce()方法对数组求和,需要多少时间:

1
2
3
4
5
6
7
8
9
10
11
var arr = [1, 2, 3, 4, 5, 6];
console.time("ruduce");
Array.prototype.sum = function () {
return this.reduce(function (preValue, curValue) {
return preValue + curValue;
});
}
arr.sum();
console.timeEnd("ruduce");
//node >> 0.173ms
//chrome >> time: 0.117919921875ms

循环类型 最终值(和) 所费时间(node) 所费时间(chrome)
for 21 2.877ms 4.68505859375ms
while 21 2.956ms 4.793701171875ms
reduce 21 0.173ms 0.117919921875ms

引用:大漠
reduceRight()方法的功能和reduce()功能是一样的,不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加。

文章目录
  1. 1. reduce()方法
    1. 1.1. 语法
|