reduce 方法
reduce() 是 JavaScript 数组对象的一个内置方法，用于对数组的每个元素执行一个指定的回调函数，并将结果累积到一个最终值中。reduce() 方法接受两个参数：一个回调函数和一个初始值。
回调函数可以接受四个参数：
- 累积器（accumulator）：累积器是一个累积过程中保持累积结果的变量。
- 当前值（current value）：当前正在处理的数组元素的值。
- 当前索引（current index）：当前正在处理的数组元素的索引（可选）。
- 原始数组（array）：调用
reduce()方法的数组。
reduce() 方法的语法如下：
javascriptCopy code
array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)
-
流程：
- 以 acc 作为累计结果的初始值，不设置 acc 则以数组第一个元素为初始值
- 开始遍历，使用累计器处理 cur，将 cur 的映射结果累计到 acc 上，结束此次循环，返回 acc
- 进入下一次循环，直至数组最后一个元素
- 结束遍历，返回最终的 acc
应用场景一：统计数组中每一项出现的次数
js
复制代码
const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
//此处累计器为 pre， 当前元素为 cur
const nameNum = names.reduce((pre,cur)=>{
if(cur in pre){
pre[cur]++
}else{
pre[cur] = 1
}
return pre
//初始值 initialValue 为 {}
},{})
console.log(nameNum) //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
应用场景二：对象数组去重，并统计每一项重复的次数
javaScript
复制代码
const list = [
{ name: 'A', width: 20 },
{ name: 'B', width: 70 },
{ name: 'B', width: 70 },
{ name: 'C', width: 10 },
{ name: 'A', width: 20 },
{ name: 'A', width: 20 },
];
//初始化空对象，存放重复出现的次数
const repeatTime = {};
//此处累计器为 array， 当前元素为 item
const result = list.reduce((array, item) => {
//如果 repeatTime 已经有 item.name 这个变量
//这里repeatTime[item.name] 的值可以为'A'/'B'/'C'
if (repeatTime[item.name]) {
//已存在作为 repeatTime 的 key 对应的 value 值自增 1
repeatTime[item.name]++;
return array;
}
// repeatTime 中不存在的key 的 value 计数为 1
repeatTime[item.name] = 1;
return [...array, item];
//初始值 initialValue 为 []
}, []);
//输出
//repeatTime:{A: 3, B: 2, C: 1}
//result: [
// {name: 'A', width: 20}
// {name: 'B', width: 10}
// {name: 'C', width: 10}
//]
应用场景三：对象数组里属性求和
js
复制代码
const result = [
{
subject: 'math',
score: 10
},
{
subject: 'chinese',
score: 20
},
{
subject: 'english',
score: 30
}
];
//此处累计器为 prev，当前元素为 cur
const sum = result.reduce((prev, cur) => {
return cur.score + prev;
//初始值 initialValue 为 0
}, 0);
console.log(sum) //60
