你是不是还在为处理数组头疼？那你一定要试试JavaScript的reduce方法！这个方法真的超强大，能把数组里的每个元素都“串”起来，最后得到一个你想要的结果。不管你是要计算总和，还是想把数据转换成另一种形式，reduce都能轻松帮你搞定。而且，用好了它，你会发现自己写的代码更简洁、更优雅！对初学者来说，掌握这个方法绝对是提升编程能力的关键一步，快来试试吧！
reduce介绍
基本语法
先来看看reduce的基本用法，语法其实很简单：
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)array：你要操作的数组。
function：用来处理数组每个元素的回调函数。
initialValue：可选的初始值，可以不写。
具体点说，回调函数里有这些参数：
total：累计值。第一次是初始值，之后是上一次循环的结果。
currentValue：当前处理的数组元素。
currentIndex：当前元素的索引，通常用不到，可以忽略。
arr：当前正在处理的整个数组，也可以忽略。
工作流程
理解这些参数后，我们来看reduce是怎么工作的：
设置初始值：如果你给了
initialValue，它会作为total的初始值；如果没给，数组的第一个元素会作为初始值。迭代处理：
reduce从初始值开始（或者数组的第一个/第二个元素），逐个处理每个currentValue，并把结果累加到total。完成迭代：数组处理完了，
reduce就会返回累加后的最终结果。
举个简单的例子
假设你有一个数组[1, 2, 3, 4]，你想算出这个数组中所有数字的和：
const sum = [1, 2, 3, 4].reduce(function(total, currentValue) {
return total + currentValue;
}, 0);
console.log(sum); // 输出：10看，这段代码就是在做加法，reduce从0开始，每次把当前数字加到total上，最后得到10。
基础示例
reduce方法在JavaScript中就像一个万能的工具箱，可以帮你轻松完成各种任务。
场景1：计算数组的总和
想象一下，你是一名超市收银员，顾客买了一堆东西，现在需要计算总价。你拿着收银机（reduce方法），每扫描一个商品的价格（数组中的每个数字），就把它累加到总金额中。最后，你告诉顾客一共需要多少钱。
代码如下：
const prices = [5, 12, 3, 7, 10];
const totalAmount = prices.reduce((total, price) => total + price, 0);
console.log(totalAmount); // 输出：37这里reduce就是在帮你“算账”，它从0开始，每次加上一个商品的价格，最后得到总金额37。
场景2：数组元素的拼接
假设你在写一首歌的歌词，每个词就像一颗珍珠，你需要把它们串成一句完整的话。reduce在这里就像一根线，把这些珍珠一个一个串起来，最终形成了一串美丽的项链。
代码如下：
const lyrics = ["I", "love", "coding", "with", "JavaScript"];
const sentence = lyrics.reduce((total, word) => total + " " + word);
console.log(sentence); // 输出："I love coding with JavaScript"在这个例子中，reduce把每个词拼接在一起，最终形成了这句优美的话："I love coding with JavaScript"。
场景3：找到数组中的最大值
想象你在组织一次班级选拔赛，想找出谁是班里的“最强王者”。每当有一个新同学（currentValue）登场时，你都要和现任“王者”（total）比一比，看谁更强，最终挑出那个真正的“王者”。
代码如下：
const scores = [45, 85, 72, 93, 66];
const highestScore = scores.reduce((max, score) => Math.max(max, score), -Infinity);
console.log(highestScore); // 输出：93在这个比喻中，reduce方法帮你把所有同学的分数都比了一遍，最后选出分数最高的那个，成为“最强王者”。
进阶用法
JavaScript的reduce方法不仅能处理基础的数组操作，在实际业务场景中，它还能帮你解决很多复杂的问题。接下来，我们将通过具体的业务场景，结合一些代码示例，来帮助你更好地理解这些高级用法。
1. 扁平化数组
想象你有一个装满了小盒子的大盒子，而这些小盒子里又装着更小的盒子。你的任务是把所有的小盒子里的物品全部倒出来，放到一个平面上，这样你可以一眼看到所有物品。这就是我们要做的“扁平化”操作。
function Flat(arr = []) {
return arr.reduce((total, currentValue) => total.concat(Array.isArray(currentValue) ? Flat(currentValue) : currentValue), []);
}
const nestedFiles = [0, 1, [2, 3], [4, 5, [6, 7]], [8, [9, 10, [11, 12]]]];
console.log(Flat(nestedFiles)); // 输出：[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]reduce：就像把大盒子一层层打开。
Array.isArray(currentValue)：检查当前拿到的是否还是一个小盒子（数组）。
Flat(currentValue)：如果是小盒子，再递归地把它打开，直到拿出所有物品（非数组元素）。
concat：把这些物品一个个放到我们铺开的平面上（结果数组）。
2. 分割数组——分页显示商品列表
想象你在打包一批商品，每个包裹只能装固定数量的商品。当一个包裹装满时，你就开始打包下一个包裹。最终，你会得到一系列整齐的包裹，每个包裹里都有固定数量的商品。这就是我们要做的“分页显示”。
function Chunk(arr, size) {
return arr.length ? arr.reduce((total, currentValue) => (total[total.length - 1].length === size ? total.push([currentValue]) : total[total.length - 1].push(currentValue), total), [[]]) : [];
}
const products = [1, 2, 3, 4, 5];
console.log(Chunk(products, 2)); // 输出：[[1, 2], [3, 4], [5]]reduce：就像在打包商品。
total[total.length - 1]：这是当前正在打包的包裹。
total[total.length - 1].length === size：检查当前包裹是否装满。
push：如果满了，开始一个新的包裹；如果没满，把商品继续装入当前包裹。
3. 统计出现次数
想象你在统计每个用户点击了多少次按钮，就像在记录每个用户按下不同按钮的次数。每次用户点击按钮，你就在一个记录本上对应的按钮旁边记下一笔，最后你就可以知道每个按钮被点击了多少次。
function Counting(arr) {
return arr.reduce((total, currentValue) => {
total[currentValue] = (total[currentValue] || 0) + 1;
return total;
}, {});
}
const userActions = ['click', 'scroll', 'click', 'hover', 'click'];
console.log(Counting(userActions));
// 输出：{ 'click': 3, 'scroll': 1, 'hover': 1 }reduce：就像在帮你统计每个事件的发生次数。
total[currentValue]：这是记录本上对应事件的计数。
total[currentValue] || 0：如果这个事件还没被记录过，就初始化为0。
+1：每次事件发生，就在对应的计数上加1。
4. 查找元素位置
想象你在一堆订单中寻找那些出了问题的订单（比如状态为“异常”），就像在一份名单中标记出所有异常订单的位置，以便后续处理。
function Position(arr, val) {
return arr.reduce((total, currentValue, currentIndex) => {
if (currentValue.status === val) {
total.push(currentIndex);
}
return total;
}, []);
}
const orders = [
{ id: 1, status: 'completed' },
{ id: 2, status: 'pending' },
{ id: 3, status: 'exception' },
{ id: 4, status: 'exception' }
];
console.log(Position(orders, 'exception')); // 输出：[2, 3]reduce：就像在浏览订单列表，每找到一个符合条件的订单，就记下它的位置。
currentValue.status === val：检查当前订单是否是“异常”状态。
push(currentIndex)：如果是异常订单，就把它的位置（索引）记录下来。
5. 组合函数——订单折扣计算
想象你在为用户计算订单总价，这个过程就像在制作一道美味的菜肴，需要按顺序添加各种配料（折扣、会员优惠、税费）。每一步都对最终的味道（价格）有影响，最后得到的是用户需要支付的总价。
const addDiscount = (x) => x - 5;
const applyMemberDiscount = (x) => x * 0.9;
const addTax = (x) => x + (x * 0.08);
const composedFunctions = [addDiscount, applyMemberDiscount, addTax];
const finalPrice = composedFunctions.reduce((total, currentValue) => currentValue(total), 100);
console.log(finalPrice);composedFunctions：这里的数组就像一系列步骤，每一步都对订单总价进行处理。
reduce：依次执行每个步骤，把当前的价格传给下一个处理函数。
100：初始的订单价格。
finalPrice：经过所有处理后的最终订单价格。
6. 数组去重——数据清洗中的重复项去除
想象你在整理一堆文件（数据），不小心有些文件重复了。为了确保每个文件只保留一份，你需要把重复的文件清理掉。reduce方法就像一个过滤器，帮你把这些重复项去掉，只留下唯一的文件。
function Uniq(arr) {
return arr.reduce((total, currentValue) => total.includes(currentValue) ? total : [...total, currentValue], []);
}
const rawData = [2, 1, 0, 3, 2, 1, 2];
console.log(Uniq(rawData)); // 输出：[2, 1, 0, 3]reduce：就像一个过滤器，遍历数组中的每个元素。
total.includes(currentValue)：检查当前元素是否已经存在于结果数组中。
total：如果当前元素已经存在，就跳过；否则，把它加到结果数组中。
7. 计算平均值——用户评分系统
想象你在收集用户对某个产品的评分，现在你需要计算出这个产品的平均评分，就像把所有评分加起来，然后平分给每个用户，得到一个平均分。reduce方法可以帮你快速完成这个计算。
function Average(arr) {
return arr.reduce((total, currentValue, currentIndex, array) => {
total += currentValue;
if (currentIndex === array.length - 1) {
return total / array.length;
}
return total;
}, 0);
}
const ratings = [4, 5, 3, 4, 5];
console.log(Average(ratings)); // 输出：4.2reduce：就像一个评分收集器，遍历每个用户的评分。
total += currentValue：把每个评分累加到总分里。
if (currentIndex === array.length - 1)：在最后一个评分加完后，计算平均值。
total / array.length：总分除以评分人数，得到平均分。 • reduce：就像一个评分收集器，遍历每个用户的评分。
total += currentValue：把每个评分累加到总分里。
if (currentIndex === array.length - 1)：在最后一个评分加完后，计算平均值。
total / array.length：总分除以评分人数，得到平均分。
8. 找最大值和最小值——商品价格筛选
想象你在逛一个电商平台，正在寻找一件最便宜或者最贵的商品。你可能会逐个查看商品的价格，然后记住当前看到的最低价或最高价。reduce方法就像你的记忆助手，帮你快速找出列表中最高或最低的价格。
function Max(arr = []) {
return arr.reduce((total, currentValue) => total > currentValue ? total : currentValue);
}
function Min(arr = []) {
return arr.reduce((total, currentValue) => total < currentValue ? total : currentValue);
}
const prices = [120, 450, 210, 650, 380];
console.log(Max(prices)); // 输出：650
console.log(Min(prices)); // 输出：120Max函数：通过遍历数组，记住当前看到的最大价格。
Min函数：同样遍历数组，记住当前看到的最小价格。
reduce：在遍历过程中比较每个商品的价格，并更新最大值或最小值。
9. URL 参数解析——处理用户请求中的查询参数
想象你在开发一个搜索功能，当用户在搜索框中输入条件并提交时，URL会包含这些查询参数。你需要把这些参数拆解开，放到一个对象里，这样你就可以用它们来执行搜索查询。reduce方法可以帮你轻松完成这一步。
function ParseUrlSearch(str) {
return str.replace(/(^\?)|(&$)/g, "").split("&").reduce((total, currentValue) => {
const [key, val] = currentValue.split("=");
total[key] = decodeURIComponent(val);
return total;
}, {});
}
const url = 'key1=value1&key2=value2&key3=value3';
console.log(ParseUrlSearch(url));
// 输出：{ key1: 'value1', key2: 'value2', key3: 'value3' }replace(/(^?)|(&$)/g, "")：去掉URL中的问号或其他特殊符号，留下纯参数部分。
split("&")：将参数字符串按“&”分隔成一个数组，每个元素是一个“key=value”的形式。
reduce：遍历这个数组，把每个“key=value”解析成键值对，存入一个对象中。
decodeURIComponent(val)：对参数值进行解码，以防止URL编码问题。
10. URL 参数序列化——生成API请求参数
想象你在准备向后端发送一个API请求，你手里有一张列着参数的清单（对象），但后端要求你把这些参数按一定格式（查询字符串）打包发送。reduce方法就像一个打包工具，把这些参数按照规定的格式整理好，方便你发送请求。
function StringifyUrlSearch(search) {
return Object.entries(search).reduce(
(total, currentValue) => `${total}${currentValue[0]}=${encodeURIComponent(currentValue[1])}&`,
Object.keys(search).length ? "?" : ""
).replace(/&$/, "");
}
const params = { foo: "bar", baz: 42 };
console.log(StringifyUrlSearch(params)); // 输出："?foo=bar&baz=42"Object.entries(search)：将对象转换为一个二维数组，每个元素是一个[key, value]对，方便遍历。
reduce：遍历每个参数对，将它们拼接成“key=value”的形式，并用“&”连接。
encodeURIComponent(currentValue[1])：对参数值进行编码，确保特殊字符在URL中合法。
replace(/&$/, "")：去掉最后一个多余的“&”符号，使查询字符串格式正确。
11. 对象分组——按属性分组用户数据
想象你在管理一个大型的用户数据库，你需要根据用户的某个属性（比如年龄）将他们分组，这样可以更方便地进行统计和分析。reduce方法就像一个分类器，帮你把用户按照指定的属性归类到不同的组里。
function Grouping(arr, key) {
return arr.reduce((total, currentValue) => {
if (!total[currentValue[key]]) {
total[currentValue[key]] = [];
}
total[currentValue[key]].push(currentValue);
return total;
}, {});
}
const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 25 },
{ name: 'Dave', age: 30 }
];
console.log(Grouping(users, 'age'));
/*
输出：
{
'25': [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 25 }],
'30': [{ name: 'Bob', age: 30 }, { name: 'Dave', age: 30 }]
}
*/reduce：就像在整理用户数据，根据指定的属性（比如年龄）将用户归类。
total[currentValue[key]]：检查当前分类组是否已经存在，如果不存在，就创建一个新的数组来存放这一组用户。
push(currentValue)：将用户添加到对应的分组中。
12. 创建查找表——快速查找产品信息
想象你在管理一个电商平台，需要快速找到某个产品的详细信息。如果有一个查找表（类似目录），你只需根据产品ID就能快速找到对应的产品信息。reduce方法可以帮你把产品数组转换为这样的查找表。
function arrayToMap(arr, key) {
return arr.reduce((total, currentValue) => {
total[currentValue[key]] = currentValue;
return total;
}, {});
}
const products = [
{ id: 1, name: 'Laptop', price: 999 },
{ id: 2, name: 'Phone', price: 699 },
{ id: 3, name: 'Tablet', price: 499 },
];
const productMap = arrayToMap(products, 'id');
console.log(productMap);
/*
输出：
{
'1': { id: 1, name: 'Laptop', price: 999 },
'2': { id: 2, name: 'Phone', price: 699 },
'3': { id: 3, name: 'Tablet', price: 499 }
}
*/reduce：遍历产品数组，逐一处理每个产品。
total[currentValue[key]] = currentValue：将产品的ID作为查找表的键，产品的详细信息作为对应的值，存入查找表。
total：最终形成一个以产品ID为键，产品信息为值的对象，方便快速查找。
13. 合并数组为对象——将表单字段与值配对
想象你在处理一份表单，表单上有多个字段（比如姓名、年龄、性别），用户填写了相应的值。现在你需要把这些字段名和用户输入的值配对，形成一个对象，以便提交给后端处理。reduce方法可以帮你将这两个数组合并成一个对象。
function Merge(arr1, arr2) {
return arr1.reduce((total, currentValue, index) => {
total[currentValue] = arr2[index];
return total;
}, {});
}
const fields = ['name', 'age', 'gender'];
const values = ['Alice', 25, 'female'];
console.log(Merge(fields, values)); // 输出：{ name: 'Alice', age: 25, gender: 'female' }reduce：遍历字段数组arr1，逐一处理每个字段。
total[currentValue] = arr2[index]：将字段名作为对象的键，将对应的用户输入值作为值，添加到对象中。
index：通过索引匹配字段名和对应的输入值。
14. 检查字符串是否为回文——验证用户输入
想象你在开发一个系统，需要验证用户输入的字符串是否是回文。回文指的是正着读和倒着读都一样的字符串，比如“racecar”。reduce方法可以帮你快速检查这个字符串是否符合回文的要求。
function isPalindrome(str) {
return str.split('').reduce((total, currentValue, index, array) => {
return total && currentValue === array[array.length - index - 1];
}, true);
}
const input = 'racecar';
console.log(isPalindrome(input)); // 输出：truesplit('')：将字符串分割成单个字符的数组。
reduce：遍历字符数组，逐个比较字符是否对称。
total && currentValue === array[array.length - index - 1]：检查当前字符是否与对应位置的字符相同，如果全部匹配，则为回文。
总结
看完今天的内容，你是否对JavaScript的reduce方法有了新的认识？无论你是刚入门的小白，还是经验丰富的开发者，相信你都能从这些实际场景中找到一些灵感，让自己的代码更简洁、更高效。
在实际项目中，reduce究竟能帮你解决哪些棘手的问题？或者你还有哪些有趣的用法想要分享？欢迎在评论区留言讨论！如果你已经在项目中使用了这些技巧，不妨也来和大家分享你的经验。
如果你觉得今天的内容对你有帮助，别忘了点赞、收藏和分享给更多的朋友哦！让我们一起在前端的世界里不断探索，成为更强的开发者！
期待在评论区看到你的精彩观点！我们下期再见！
322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
