此处首先介绍一下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();
执行结果如图:
不指定初始值:
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();
执行结果如图:
从上面两个示例可以看出,指定初始值的情况下,共执行了六次循环,对数组中每个元素进行了取整处理并求和。未指定初始值的情况下,共执行了五次循环,数组中第一个元素并未进行取整处理。
因此,理解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());
执行结果:
可以拓展为求对象数组中某个键所有值之和:
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());
执行结果:
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()));
执行结果:
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()));
执行结果:
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()));
执行结果: