JS reduce()方法详解

192 阅读2分钟

此处首先介绍一下reduce()方法中的常用几个参数的含义。以如下代码为例:
arr.reduce((total, current) => {return total + current}, initalValue)
total是初始值或计算结束后的返回值。
首次循环时,如果指定初始值initalValue,则total为initalValue;current为数组第一个元素。
否则,total默认为数组中的第一个元素;current为数组第二个元素。

后者较前者少执行一次循环,是否指定初始值有时候会影响计算的结果。

指定初始值为0:

calcTotal = () => {
    const arr = [1.1, 2.6, 7.8, 19.9, 3.3,8.6];
    arr.reduce((a, b) =>  {
        console.log(a + Math.round(b));
        return a + Math.round(b);
    },0 );
}
calcTotal();

执行结果如图: image.png

不指定初始值:

calcTotal = () => {
    const arr = [1.1, 2.6, 7.8, 19.9, 3.3,8.6];
    arr.reduce((a, b) =>  {
        console.log(a + Math.round(b));
        return a + Math.round(b);
    } );
}
calcTotal();

执行结果如图: image.png 从上面两个示例可以看出,指定初始值的情况下,共执行了六次循环,对数组中每个元素进行了取整处理并求和。未指定初始值的情况下,共执行了五次循环,数组中第一个元素并未进行取整处理。
因此,理解reduce()方法各参数的含义及正确使用,对我们实际使用很有指导意义。

接下来介绍一些reduce()方法的一些应用场景:

1.数组求和

calcTotal = () => {
    const arr = [1.1, 2.6, 7.8, 19.9, 3.3,8.6];
    return arr.reduce((a, b) =>  {
        return a + b;
    } );
}
console.log(calcTotal());

执行结果: image.png

可以拓展为求对象数组中某个键所有值之和:

calcTotal = () => {
    const arr = [{point:1.1}, {point:2.6}, {point:7.8}, {point:19.9}, {point:3.3},{point:8.6}];
    return arr.reduce((a, b) =>  {
        return a + b.point;
    },0);
}
console.log(calcTotal());

执行结果: image.png

2.计算数组中每个元素出现次数

calcArray = () => {
    const arr = ['cat', 'dog', 'cow', 'pig', 'cat', 'cow', 'cat'];
    return arr.reduce((animalObj, animal) =>  {
        if(animal in animalObj){
            animalObj[animal] ++
        } else {
            animalObj[animal] = 1;
        }
        return animalObj;
    },{});
}
console.log(JSON.stringify(calcArray()));

执行结果:

image.png

3.数组去重

calcArray = () => {
    const arr = [0, 1, 6, 9, 3, 0, 4, 3, 1, 6];
    return arr.reduce((a, b) =>  {
        return a.includes(b)? a : [...a, b];
    },[]);
}
console.log(JSON.stringify(calcArray()));

执行结果: image.png

4.将二维数组转换为一维数组

calcArray = () => {
    const arr = [[0, 1, 6],[9, 3, 0], [4, 3, 1, 6]];
    return arr.reduce((a, b) =>  {
        return a.concat(b);
    },[]);
}
console.log(JSON.stringify(calcArray()));

执行结果:

image.png