1. 什么是reduce
reduce 方法是 JavaScript 中数组的重要方法之一，用于对数组中的元素进行累积计算。它接收一个回调函数作为参数，并返回一个最终计算结果。reduce 在许多场景下都非常有用，比如求和、数组扁平化、对象计数、数据转换等。
2. reduce语法
2.1 语法
arr.reduce(callback, initialValue)
2.2 参数说明
callback(accumulator, currentValue, currentIndex, array)：回调函数，接受四个参数：
如果提供，则accumulator从initialValue开始
如果没有提供，则取数组的第一个元素
accumulator：上一次callback执行后的返回值
currentValue：当前值
currentIndex：当前元素在数组中的索引
array：原数组（正在遍历的数组）
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); // 输出 18005. 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;iaccumulator = 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
