前言
reduce()方法对数组中的每一个元素执行一个由您提供的reduce函数（升序执行），将其结果汇总为单个返回值。reduce方法可做的事情很多，就是循环遍历能做的，reduce都可以做，比如数组求和、数组求积、数组中元素出现的次数、数组去重等等。
语法
arr.reduce((prev,cur,index,arr)=>{...}, init);
参数：
- prev必须。累计器累计回调的返回值；表示上一次调用回调时的返回值，或者初始值init；
- cur必须。表示当前正在处理的数组元素；
- index可选。表示当前正在处理的数组元素的索引，若提供init值，则起始索引为-0，否则起始索引为1；
- arr可选。表示原数组；
- init可选。表示初始值。
举例
- 没有设置函数的初始迭代值
const arr = [1,2,3,4,5];
const sum = arr.reduce((prev, cur, index, arr) => {
console.log('prev,cur', prev, cur);
return prev + cur;
});
console.log('arr:', arr, 'sun: ', sum);
运行结果：
分析：在这里reduce的作用就是对这个数组进行求和，迭代了4次，函数迭代的初始值是1，也就是默认值（数组的第一项），prev的值是每次计算后的值。
- 设置函数的初始迭代值
const arr = [1,2,3,4,5];
const sum = arr.reduce((prev, cur, index, arr) => {
console.log('prev,cur', prev, cur);
return prev + cur;
},5);
console.log('arr:', arr, 'sun: ', sum);
运行结果：
分析： 这里我们添加了一个初始的迭代值，也就是让prev从5开始计算（以5为初始值求和），可以看到，这里迭代了5次，结果也加上了初始值。同时，这里使用箭头函数来代替完整的函数。运行结果相同。
reduce的应用
- 数组求和
let arr = [1,2,3,4,5];
console.log(arr.reduce((a,b)=> a + b)) // 15
console.log(arr.reduce((a,b)=> a * b)) // 120
- 计算数组中的每个元素出现的次数
const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice', 'Bob', 'Bob'];
const countedNames = names.reduce((allNames, name) => {
console.log(allNames, name);
if (name in allNames) {
allNames[name]++;
} else {
allNames[name] = 1;
}
return allNames;
}, {});
console.log(countedNames);
运行结果：
分析：
- 由于设了迭代初始值，allNames的第一个值是一个空对象，此时name为Alice，然后进行判断，发现在allNames中没有Alice属性，所以就将Alice对应的属性值赋值为1
- 后面没有重复的是一样的道理，如果碰到重复值，就会将该属性值➕1，这样就能计算元素重复的次数了。
- 去除数组的重复的元素
let myArr = arr.reduce((accumulator, currentValue) => {
if (accumulator.indexOf(currentValue) === -1) {
accumulator.push(currentValue);
}
return accumulator;
}, []);
console.log(myArr); // ['a', 'b', 'c']
let result = arr.sort().reduce((init, current) => {
if (init.length === 0 || init[init.length - 1] !== current) {
init.push(current);
}
return init;
}, []);
console.log(result); // [1,2,3,4,5,6,7]
分析：这里主要是借助迭代功能实现数组的扩展，判断当前元素是否已经添加到数组中，如果不存在就从尾部添加，这两个方法在去重方法中应该是算比较简单高效的。
- 按属性对Object分类
{
name: 'xiaoming',
age: 18,
},
{
name: 'xiaohong',
age: 17,
},
{
name: 'xiaogang',
age: 17,
},
];
function groupBy(objectArray, property) {
return objectArray.reduce((acc, obj) => {
let key = obj[property];
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj);
return acc;
}, {});
}
let groupedPerson = groupBy(person, 'age');
console.log(groupedPerson);
运行结果：
- 对对象的属性求和
{ name: 'Alice', age: 21 },
{ name: 'Max', age: 20 },
{ name: 'Jane', age: 20 },
];
let result = people.reduce((a, b) => {
a = a + b.age;
return a;
}, 0);
console.log(result); // 结果为61
分析： 这里主要就是利用reduce第一个参数是迭代，可以通过初始化这个参数的数据类型，达到想实现的效果。
总结
reduce()是数组的归并方法，与forEach()、map()、filter()等迭代方法一样都会对数组每一项进行遍历，但是reduce()可同时将前面数组项遍历产生的结果与当前遍历进行运算，这一点是其他迭代方法无法企及的。
