当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript `reduce()` 方法综合指南与现实生活中的例子

JavaScript `reduce()` 方法综合指南与现实生活中的例子

来源：dev.to 2024-12-19 18:04:01 0浏览收藏

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《JavaScript `reduce()` 方法综合指南与现实生活中的例子》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

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' }
}
*/