(共566篇)
全部分类

reduce和reduceRight统计元素
[ JS基础 ] 

reduce 和 reduceRight 统计元素

arr.reduce(fn(totalValue, currentValue,currentIndex, arr),[initialValue])会使用fn函数把数组中所有的元素都统计一遍。

先看看简单的用法:

 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>

案例代码

可以看出,设置了initialValuereduce函数,很明显它的处理过程,比没有设置多了一次

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设置一个初始值