北京创意设计协会网站,自己开发一个网站应该怎么做,wordpress 会话有效期,超办网ppt下载1. 什么是reduce
reduce 方法是 JavaScript 中数组的重要方法之一#xff0c;用于对数组中的元素进行累积计算。它接收一个回调函数作为参数#xff0c;并返回一个最终计算结果。reduce 在许多场景下都非常有用#xff0c;比如求和、数组扁平化、对象计数、数据转换等。
2…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
最终结果: 104. reduce使用场景
4.1 数组求和
const numbers [1, 2, 3, 4, 5];
const sum numbers.reduce((acc, cur) acc cur, 0);
console.log(sum); // 输出 154.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.length0){throw new TypeError(Reduce of empty array with on initial value);}accumulator arr[0];startIndex 1;}// 遍历数组并应用回调函数for(let istartIndex;iarr.length;i){accumulator callback(accumulator,arr[i],i,arr);}// 返回累加结果return accumulator
}const numbers [1,2,3,4,5];
const sum numbers.myReduce((acc,curr)acccurr,0) // 15
const product numbers.myReduce((acc,curr)acc*curr) // 120
