reduce() 方法是 javascript 中一个强大的数组方法，用于迭代数组并将其减少为单个值。该方法用途广泛，可以处理数字求和、展平数组、创建对象等操作。
减少（）的语法
array.reduce(callback, initialvalue);
-
callback：对数组中每个元素执行的函数。
- accumulator：上次回调执行的累加结果。
- currentvalue：当前正在处理的元素。
- currentindex（可选）：当前元素的索引。
- array (可选): 调用了数组reduce。
- initialvalue（可选）：用作回调第一次调用的第一个参数的值。
reduce() 如何逐步工作
- 从初始值开始，如果没有提供初始值，则从数组的第一个元素开始。
- 将累加器和 currentvalue 传递给回调函数。
- 使用回调的返回值更新累加器。
- 重复，直到处理完所有元素。
- 返回最终的累计值。
示例 1：计算数组的总计（现实生活：购物车）
假设您有一个购物车，并且您想要计算商品的总价。
const cart = [
{ item: "laptop", price: 1200 },
{ item: "phone", price: 800 },
{ item: "headphones", price: 150 }
];
const totalprice = cart.reduce((acc, curr) => acc + curr.price, 0);
console.log(`total price: $${totalprice}`); // total price: $2150
示例 2：按类别对物品进行分组（现实生活：组织库存）
您想要按类别对项目进行分组。
const inventory = [
{ name: "apple", category: "fruits" },
{ name: "carrot", category: "vegetables" },
{ name: "banana", category: "fruits" },
{ name: "spinach", category: "vegetables" }
];
const groupeditems = inventory.reduce((acc, curr) => {
if (!acc[curr.category]) {
acc[curr.category] = [];
}
acc[curr.category].push(curr.name);
return acc;
}, {});
console.log(groupeditems);
/*
{
fruits: ['apple', 'banana'],
vegetables: ['carrot', 'spinach']
}
*/
示例 3：展平嵌套数组（现实生活：合并部门数据）
您以嵌套数组的形式接收来自不同部门的数据，需要将它们合并为一个。
const departmentdata = [
["john", "doe"],
["jane", "smith"],
["emily", "davis"]
];
const flatteneddata = departmentdata.reduce((acc, curr) => acc.concat(curr), []);
console.log(flatteneddata); // ['john', 'doe', 'jane', 'smith', 'emily', 'davis']
示例 4：计算出现次数（现实生活：分析）
您有一系列网站页面浏览量，并且想要计算每个页面的访问次数。
const pageviews = ["home", "about", "home", "contact", "home", "about"];
const viewcounts = pageviews.reduce((acc, page) => {
acc[page] = (acc[page] || 0) + 1;
return acc;
}, {});
console.log(viewcounts);
/*
{
home: 3,
about: 2,
contact: 1
}
*/
示例 5：使用reduce() 实现自定义映射
reduce()方法可以模仿map()的功能。
const numbers = [1, 2, 3, 4];
const doubled = numbers.reduce((acc, curr) => {
acc.push(curr * 2);
return acc;
}, []);
console.log(doubled); // [2, 4, 6, 8]
示例 6：查找最大值（现实生活中：查找销量最高的产品）
您想要从数据集中找到最高的销售额。
const sales = [500, 1200, 300, 800];
const highestsale = sales.reduce((max, curr) => (curr > max ? curr : max), 0);
console.log(`highest sale: $${highestsale}`); // highest sale: $1200
示例 7：转换数据（现实生活：api 数据转换）
您收到一个用户数据数组，需要将其转换为由用户 id 键入的对象。
const users = [
{ id: 1, name: "John Doe" },
{ id: 2, name: "Jane Smith" },
{ id: 3, name: "Emily Davis" }
];
const usersById = users.reduce((acc, user) => {
acc[user.id] = user;
return acc;
}, {});
console.log(usersById);
/*
{
1: { id: 1, name: 'John Doe' },
2: { id: 2, name: 'Jane Smith' },
3: { id: 3, name: 'Emily Davis' }
}
*/
提示和最佳实践
- 使用initialvalue：始终提供一个initialvalue，以避免处理空数组时出现意外行为。
- 保持简单：编写简洁明了的reducer函数。
- 不可变更新：使用对象或数组时，避免直接在减速器内改变它们。
结论
reduce() 方法非常通用，可以适应各种任务，从求和到转换数据结构。使用这些现实生活中的示例进行练习，以加深您的理解并释放您的 javascript 项目中的 reduce() 的全部潜力。
