前端 | JavaScript中的reduce方法
1. 什么是reduce
reduce 方法是 JavaScript 中数组的重要方法之一，用于对数组中的元素进行累积计算。它接收一个回调函数作为参数，并返回一个最终计算结果。reduce 在许多场景下都非常有用，比如求和、数组扁平化、对象计数、数据转换等。
2. reduce语法
2.1 语法
arr.reduce(callback, initialValue)
2.2 参数说明
callback(accumulator, currentValue, currentIndex, array)：回调函数，接受四个参数：accumulator：上一次callback执行后的返回值currentValue：当前值currentIndex：当前元素在数组中的索引array：原数组（正在遍历的数组）
initialValue（可选）：累加器的初始值- 如果提供，则accumulator从initialValue开始
- 如果没有提供，则取数组的第一个元素
3. reduce执行过程
3.1 执行过程
reduce 方法会遍历数组的每个元素，并对其应用回调函数。其执行流程如下：
- 初始化
accumulator：如果提供了initialValue，则accumulator取initialValue，否则取数组的第一个元素，并跳过该元素。 - 遍历数组：从索引 0（如果有
initialValue）或 1（如果没有initialValue）开始，依次执行 callback，并更新accumulator。 - 返回最终的
accumulator值。
3.2 示例
const numbers = [1, 2, 3, 4];
const result = numbers.reduce((acc, cur, index) => {
console.log(`累加器: ${acc}, 当前值: ${cur}, 索引: ${index}`);
return acc + cur;
}, 0);
console.log('最终结果:', result);
执行结果如下：
累加器: 0, 当前值: 1, 索引: 0
累加器: 1, 当前值: 2, 索引: 1
累加器: 3, 当前值: 3, 索引: 2
累加器: 6, 当前值: 4, 索引: 3
最终结果: 10
4. reduce使用场景
4.1 数组求和
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 输出 15
4.2 统计数组中元素出现的次数
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const count = fruits.reduce((acc, fruit) => {
acc[fruit] = (acc[fruit] || 0) + 1;
return acc;
}, {});
console.log(count); // { apple: 3, banana: 2, orange: 1 }
4.3 计算数组中对象的某个属性总和
const products = [
{ name: 'Laptop', price: 1000 },
{ name: 'Phone', price: 500 },
{ name: 'Tablet', price: 300 }
];
const totalPrice = products.reduce((acc, product) => acc + product.price, 0);
console.log(totalPrice); // 输出 1800
5. reduce进阶用法
5.1 按属性分组数据
const people = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 25 },
{ name: 'David', age: 30 }
];
const groupedByAge = people.reduce((acc, person) => {
(acc[person.age] = acc[person.age] || []).push(person);
return acc;
}, {});
console.log(groupedByAge);
// 输出：
// {
// 25: [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 25 }],
// 30: [{ name: 'Bob', age: 30 }, { name: 'David', age: 30 }]
// }
5.2 计算嵌套对象的总和
const orders = [
{ customer: 'Alice', total: 50 },
{ customer: 'Bob', total: 30 },
{ customer: 'Alice', total: 20 }
];
const customerTotals = orders.reduce((acc, order) => {
acc[order.customer] = (acc[order.customer] || 0) + order.total;
return acc;
}, {});
console.log(customerTotals);
// 输出：{ Alice: 70, Bob: 30 }
5.3 组合多个reduce进行复杂计算
const data = [
{ category: 'A', value: 10 },
{ category: 'B', value: 20 },
{ category: 'A', value: 15 },
{ category: 'B', value: 25 }
];
const aggregatedData = data.reduce((acc, item) => {
acc[item.category] = (acc[item.category] || []).concat(item.value);
return acc;
}, {});
const summedData = Object.keys(aggregatedData).reduce((acc, key) => {
acc[key] = aggregatedData[key].reduce((sum, num) => sum + num, 0);
return acc;
}, {});
console.log(summedData); // 输出：{ A: 25, B: 45 }
6. 手写reduce实现
Array.prototype.myReduce = function(callback,initialValue){
const arr = this; // 获取调用reduce的数组
if(typeof callback !== "function"){ // 验证回调函数是否传入
throw new TypeError(`${callback} is not a function`);
}
let accumulator; // 累加器
let startIndex; // 数组遍历起始位置
if(initialValue!==undefined){ // 判断是否传递了初始值
accumulator = initialValue;
startIndex = 0;
}else{
// 如果没有提供初始值，则将第一个数组元素作为累加器的初始值
if(arr.length===0){
throw new TypeError(`Reduce of empty array with on initial value`);
}
accumulator = arr[0];
startIndex = 1;
}
// 遍历数组并应用回调函数
for(let i=startIndex;i<arr.length;i++){
accumulator = callback(accumulator,arr[i],i,arr);
}
// 返回累加结果
return accumulator
}
const numbers = [1,2,3,4,5];
const sum = numbers.myReduce((acc,curr)=>acc+curr,0) // 15
const product = numbers.myReduce((acc,curr)=>acc*curr) // 120