javascript网页特效_JavaScript中的reduce()的5个用例

作者：Dunizb

转发链接：https://mp.weixin.qq.com/s/kxo6tOmaJYdINiIOqls1LA

前言

reduce()方法对数组中的每一个元素执行一个reducer函数(由你提供)，从而得到一个单一的输出值。

reduce()的方法将一个数组中的所有元素还原成一个单一的输出值，输出值可以是数字、对象或字符串。reduce() 方法有两个参数，第一个是回调函数，第二个是初始值。

回调函数

回调函数在数组的每个元素上执行。回调函数的返回值是累加结果，并作为下一次调用回调函数的参数提供。回调函数带有四个参数。

• Accumulator(累加器)——累加器累加回调函数的返回值。
• Current Value(当前值)——处理数组的当前元素。
• Current Index(当前索引)——处理数组当前元素的索引。
• Source Array(源数组)

Current Index 和 Source Array 是可选的。

初始值

如果指定了初始值，则将累加器设置为 initialValue 作为初始元素。否则，将累加器设置为数组的第一个元素作为初始元素。

arr.reduce(callback(accumulator, currentValue[,index[,array]])[, initialValue])

在下面的代码片段中，第一个累加器(accumulator)被分配了初始值0。currentValue 是正在处理的 numbersArr 数组的元素。在这里，currentValue 被添加到累加器，在下次调用回调函数时，会将返回值作为参数提供。

const numbersArr = [67, 90, 100, 37, 60];const total = numbersArr.reduce(function(accumulator, currentValue){    console.log("accumulator is " + accumulator + " current value is " + currentValue);    return accumulator + currentValue;}, 0);console.log("total : "+ total);

输出

accumulator is 0 current value is 67accumulator is 67 current value is 90accumulator is 157 current value is 100accumulator is 257 current value is 37accumulator is 294 current value is 60total : 354

JavaScript reduce用例

1.对数组的所有值求和

在下面的代码中，studentResult 数组具有5个数字。使用reduce() 方法，将数组减少为单个值，该值将 studentResult 数组的所有值和结果分配给 total。

const studentResult = [67, 90, 100, 37, 60];const total = studentResult.reduce((accumulator, currentValue) => accumulator +currentValue, 0);console.log(total); // 354

2.对象数组中的数值之和

通常，我们从后端获取数据作为对象数组，因此，reduce() 方法有助于管理我们的前端逻辑。在下面的代码中，studentResult 对象数组有三个科目，这里，currentValue.marks 取了 studentResult 对象数组中每个科目的分数。

const studentResult = [  { subject: '数学', marks: 78 },  { subject: '物理', marks: 80 },  { subject: '化学', marks: 93 }];const total = studentResult.reduce((accumulator, currentValue) => accumulator + currentValue.marks, 0);console.log(total); // 251

3.展平数组

“展平数组”是指将多维数组转换为一维。在下面的代码中，twoDArr2维数组被转换为 oneDArr 一维数组。此外，第一个 [1,2] 数组分配给累加器 accumulator，然后 twoDArr 数组的其余每个元素都连接到累加器。

const twoDArr = [ [1,2], [3,4], [5,6], [7,8] , [9,10] ];const oneDArr = 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 属性中作为对象数组。

const result = [  {subject: '物理', marks: 41},  {subject: '化学', marks: 59},  {subject: '高等数学', marks: 36},  {subject: '应用数学', marks: 90},  {subject: '英语', marks: 64},];let initialValue = {  pass: [],  fail: []}const groupedResult = result.reduce((accumulator, current) => {  (current.marks >= 50) ? accumulator.pass.push(current) : accumulator.fail.push(current);  return accumulator;}, 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() 将其添加。

const duplicatedsArr = [1, 5, 6, 5, 7, 1, 6, 8, 9, 7];const removeDuplicatedArr = duplicatedsArr.reduce((accumulator, currentValue) => {  if(!accumulator.includes(currentValue)){    accumulator.push(currentValue);  }  return accumulator;}, []);console.log(removeDuplicatedArr);// [ 1, 5, 6, 7, 8, 9 ]

总结

在本文中，我们讨论了数组 reduce() 方法。首先介绍 reduce() 方法，然后，使用一个简单的示例讨论其行为。最后，通过示例讨论了reduce() 方法最常见的五个用例。如果你是JavaScript的初学者，那么本文将对你有所帮助。

推荐JavaScript学习相关文章

《HTML5拍照、摄像机功能实践 》

《JavaScript位运算最强指南 》

《JS正则表达式完整教程(一)「值得收藏」 》

《JS正则表达式完整教程(二)「值得收藏」 》

《用 80 行 Javascript 代码构建自己的语音助手 》

《玩转前端 Video 播放器 》

《纯JavaScript实现HTML5 Canvas 6种特效滤镜 》

《使用reveal.js制作精美的网页版PPT 》

《15个简单的JS编码标准让你的代码更整洁》

《Node 中的全链路式日志标记及处理》

《使用 Node 开发服务器项目时如何高效地打日志？》

《一文带你搞懂前端如何玩转 Word 文档》

《高频面试题：JavaScript事件循环机制解析》

《手写一个Promise/A+ 完美通过官方872个测试用例》

《你不知道的前端图片处理(上)》

《你不知道的前端图片处理(下)》

《钉钉前端-如何设计前端实时分析及报警系统》

《前端实现最佳截图方案(上)》

《前端实现最佳截图方案(下)》

《Node.js 实现抢票小工具&短信通知提醒(上)「干货」》

《Node.js 实现抢票小工具&短信通知提醒(下)「干货」》

《那些不常见，但却非常实用的JS知识点(上)》

《那些不常见，但却非常实用的JS知识点(下)》

《如何为团队定制自己的 Node.js 框架？》

《细品原生JS从初级到高级知识点汇总(一)》

《细品原生JS从初级到高级知识点汇总(二)》

《细品原生JS从初级到高级知识点汇总(三)》

《细品原生JS从初级到高级知识点汇总(四)》

《学习 jQuery 源码整体架构，打造属于自己的 js 类库》

《细说RTSP实现前端直播流探索记「干货」》

《一文带你搞懂前端登陆设计》

《使用 Node.js 将图片中的苹果变成橘子「实践」》

《基于Canvas实现的高斯模糊(上)「JS篇」》

《基于Canvas实现的高斯模糊(下)「JS篇」》

《由浅入深，66条JavaScript面试知识点(一)》

《由浅入深，66条JavaScript面试知识点(二)》

《由浅入深，66条JavaScript面试知识点(三)》

《由浅入深，66条JavaScript面试知识点(四)》

《由浅入深，66条JavaScript面试知识点(五)》

《由浅入深，66条JavaScript面试知识点(六)》

《由浅入深，66条JavaScript面试知识点(七)》

作者：Dunizb

转发链接：https://mp.weixin.qq.com/s/kxo6tOmaJYdINiIOqls1LA