JavaScript中reduce()的5个基本用法示例
前言
reduce()方法可以搞定的东西，for循环，或者forEach方法有时候也可以搞定，那为啥要用reduce()？这个问题，之前我也想过，要说原因还真找不到，唯一能找到的是：通往成功的道路有很多，但是总有一条路是最捷径的，亦或许reduce()逼格更高...
语法
arr.reduce(callback,[initialValue])
reduce()方法对数组中的每一个元素执行一个reducer函数(由你提供)，从而得到一个单一的输出值。
reduce()方法将一个数组中的所有元素还原成一个单一的输出值，输出值可以是数字、对象或字符串。reduce()方法有两个参数，第一个是回调函数，第二个是初始值。
回调函数
回调函数在数组的每个元素上执行。回调函数的返回值是累加结果，并作为下一次调用回调函数的参数提供。回调函数带有四个参数。
- Accumulator（累加器）——累加器累加回调函数的返回值。
- CurrentValue（当前值）——处理数组的当前元素。
- CurrentIndex（当前索引）——处理数组当前元素的索引。
- SourceArray（源数组）
CurrentIndex和SourceArray是可选的。
初始值
如果指定了初始值，则将累加器设置为initialValue作为初始元素。否则，将累加器设置为数组的第一个元素作为初始元素。
arr.reduce(callback(accumulator,currentValue[,index[,array]])[,initialValue])
在下面的代码片段中，第一个累加器(accumulator)被分配了初始值0。currentValue是正在处理的numbersArr数组的元素。在这里，currentValue被添加到累加器，在下次调用回调函数时，会将返回值作为参数提供。
constnumbersArr=[67,90,100,37,60];
consttotal=numbersArr.reduce(function(accumulator,currentValue){
console.log("accumulatoris"+accumulator+"currentvalueis"+currentValue);
returnaccumulator+currentValue;
},0);
console.log("total:"+total);
输出
accumulatoris0currentvalueis67
accumulatoris67currentvalueis90
accumulatoris157currentvalueis100
accumulatoris257currentvalueis37
accumulatoris294currentvalueis60
total:354
JavaScriptreduce用例
1.对数组的所有值求和
在下面的代码中，studentResult数组具有5个数字。使用reduce()方法，将数组减少为单个值，该值将studentResult数组的所有值和结果分配给total。
conststudentResult=[67,90,100,37,60]; consttotal=studentResult.reduce((accumulator,currentValue)=>accumulator+currentValue,0); console.log(total);//354
2.对象数组中的数值之和
通常，我们从后端获取数据作为对象数组，因此，reduce()方法有助于管理我们的前端逻辑。在下面的代码中，studentResult对象数组有三个科目，这里，currentValue.marks取了studentResult对象数组中每个科目的分数。
conststudentResult=[
{subject:'数学',marks:78},
{subject:'物理',marks:80},
{subject:'化学',marks:93}
];
consttotal=studentResult.reduce((accumulator,currentValue)=>accumulator+currentValue.marks,0);
console.log(total);//251
3.展平数组
“展平数组”是指将多维数组转换为一维。在下面的代码中，twoDArr2维数组被转换为oneDArr一维数组。此处，第一个[1,2]数组分配给累加器accumulator，然后twoDArr数组的其余每个元素都连接到累加器。
consttwoDArr=[[1,2],[3,4],[5,6],[7,8],[9,10]]; constoneDArr=twoDArr.reduce((accumulator,currentValue)=>accumulator.concat(currentValue)); console.log(oneDArr); //[1,2,3,4,5,6,7,8,9,10]
4.按属性分组对象
根据对象的属性，我们可以使用reduce()方法将对象数组分为几组。通过下面的代码片段，你可以清楚地理解这个概念。这里，result对象数组有五个对象，每个对象都有subject和marks属性。如果分数大于或等于50，则该主题通过，否则，主题失败。reduce()用于将结果分组为通过和失败。首先，将initialValue分配给累加器，然后push()方法在检查条件之后将当前对象添加到pass和fail属性中作为对象数组。
constresult=[
{subject:'物理',marks:41},
{subject:'化学',marks:59},
{subject:'高等数学',marks:36},
{subject:'应用数学',marks:90},
{subject:'英语',marks:64},
];
letinitialValue={
pass:[],
fail:[]
}
constgroupedResult=result.reduce((accumulator,current)=>{
(current.marks>=50)?accumulator.pass.push(current):accumulator.fail.push(current);
returnaccumulator;
},initialValue);
console.log(groupedResult);
输出
{
pass:[
{subject:‘化学',marks:59},
{subject:‘应用数学',marks:90},
{subject:‘英语',marks:64}
],
fail:[
{subject:‘物理',marks:41},
{subject:‘高等数学',marks:36}
]
}
5.删除数组中的重复项
在下面的代码片段中，删除了plicatedArr数组中的重复项。首先，将一个空数组分配给累加器作为初始值。
accumulator.includes()检查duplicatedArr数组的每个元素是否已经在累加器中可用。如果currentValue在累加器中不可用，则使用push()将其添加。
constduplicatedsArr=[1,5,6,5,7,1,6,8,9,7];
constremoveDuplicatedArr=duplicatedsArr.reduce((accumulator,currentValue)=>{
if(!accumulator.includes(currentValue)){
accumulator.push(currentValue);
}
returnaccumulator;
},[]);
console.log(removeDuplicatedArr);
//[1,5,6,7,8,9]
总结
在本文中，我们讨论了数组reduce()方法。首先介绍reduce()方法，然后，使用一个简单的示例讨论其行为。最后，通过示例讨论了reduce()方法最常见的五个用例。如果你是JavaScript的初学者，那么本文将对你有所帮助。
到此这篇关于JavaScript中reduce()的5个基本用法示例的文章就介绍到这了,更多相关JavaScriptreduce()用例内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！