reduce() 方法是 JavaScript 中一个强大的数组方法，用于迭代数组并将其减少为单个值。该方法用途广泛，可以处理数字求和、展平数组、创建对象等操作。
减少（）的语法
Array.reduce(callback, initialvalue);
- callback：对数组中每个元素执行的函数。
- 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() 的全部潜力。
