reduce 和 reduceRight 统计元素
arr.reduce(fn(totalValue, currentValue,currentIndex, arr),[initialValue])会使用fn函数把数组中所有的元素都统计一遍。
initialValue 可选参数，表示第一次调用 fn 函数时 total 的值，如果设置了该参数，第一次执行 fn 函数时 total 参数会使用这个值，如果没有设置，参数total会使用数组中第一个元素的值total 表示fn上一次执行后的返回值currentValue 表示当前正在处理的元素，如果设置了 initialValue，该值从第 1 个元素开始，如果没有设置，该值从第 2 个元素开始currentIndex 表示当前正在处理的元素下标，如果设置了initialValue，该值从0开始计算，如果没有设置，该值从1开始计算arr 表示原数组
先看看简单的用法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<script>
var arr = [1, 3, 5, 7, 9];
var res = arr.reduce(function(total, currentValue, currentIndex, arr) {
console.log(
"total=" + total,
"currentValue=" + currentValue,
"currentIndex=" + currentIndex,
"arr=",
arr,
);
return total + currentValue;
});
console.log("res：", res);
</script>
|
案例代码
上面案例中reduce函数执行之后，返回了所有元素的和。
下面我们试试传入一个初始值initialValue:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<script>
var arr = [1, 3, 5, 7, 9];
var res = arr.reduce(function(total, currentValue, currentIndex, arr) {
console.log(
"total=" + total,
"currentValue=" + currentValue,
"currentIndex=" + currentIndex,
"arr=",
arr,
);
return total + currentValue;
}, 10);
console.log("res：", res);
</script>
|
案例代码
可以看出，设置了initialValue的reduce函数，很明显它的处理过程，比没有设置多了一次
reduceRight
arr.reduceRight(fn(totalValue, currentValue,currentIndex, arr),[initialValue])方法与reduce不同之处在于：reduce是从左往右处理元素，reduceRight是从右往左处理元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<script>
var arr = [1, 3, 5, 7, 9];
var res = arr.reduceRight(function(total, currentValue, currentIndex, arr) {
console.log(
"total=" + total,
"currentValue=" + currentValue,
"currentIndex=" + currentIndex,
"arr=",
arr,
);
return total + currentValue;
});
console.log("res：", res);
</script>
|
案例代码
reduce 的实用性
使用 reduce 函数，我们可以方便的实现元素去重的功能；
1
2
3
4
5
6
7
8
9
10
|
<script>
var arr = [1, 3, 5, 3, 9, 2, 1, 7, 9];
var res = arr.reduceRight(function(total, currentValue, currentIndex, arr) {
if (!total.includes(currentValue)) {
total.push(currentValue);
}
return total;
}, []);
console.log("res：", res);
</script>
|
案例代码
上面的案例中，先给第一次fn函数执行时的total传入一个初始值：[]；处理每个元素时，如果在total中没有找到该元素，则把元素放进total中去。最终就返回的是一个没有重复元素的数组。
但是我们知道数组中的元素不可能只是数字，万一数组的元素是对象形式呢？比如像统计以下学生的分数之和：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<script>
var arr = [
{
name: "zhangsan",
score: 18,
},
{
name: "lisi",
score: 20,
},
{
name: "wangwu",
score: 13,
},
{
name: "zhaoliu",
score: 14,
},
{
name: "zengqi",
score: 10,
},
];
var res = arr.reduce(function(total, currentValue, currentIndex, arr) {
console.log(
"total=" + total,
"currentValue=",
currentValue,
"currentIndex=" + currentIndex,
"arr=",
arr,
);
return total + currentValue.score;
}, 0);
console.log("返回值：", res);
</script>
|
案例代码
在元素是对象的时候，最好给initialValue设置一个初始值