JS数组方法reduce的用法实例分析


Posted in Javascript onMarch 03, 2020

本文实例讲述了JS数组方法reduce的用法。分享给大家供大家参考,具体如下:

数组方法 reduce 用来迭代一个数组,并且把它累积到一个值中。

使用 reduce 方法时,你要传入一个回调函数,这个回调函数的参数是一个 累加器 (比如例子中的 previousVal) 和当前值 (currentVal)。

reduce 方法有一个可选的第二参数,它可以被用来设置累加器的初始值。如果没有在这定义初始值,那么初始值将变成数组中的第一项,而 currentVal 将从数组的第二项开始。

使用 reduce 方法来让 array 中的所有值相加

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>reduce的使用</title>
</head>
<body>
<script>
var arr = [1, 2, 3, 4, 5];
sum = arr.reduce(function(prev, cur, index, arr) {
   //输出的是第一项的值或上一次叠加的结果,正在被处理的元素,正在被处理的元素的索引值
   console.log(prev, cur, index); 
   return prev + cur;
})
console.log(arr, sum); //输入数组本身和最后的结果
</script>
</body>
</html>

控制台输出:

JS数组方法reduce的用法实例分析 

var numbers = [15.5, 2.3, 1.1, 4.7];
 
function getSum(total, num) {
  return total + Math.round(num);
}
function myFunction(item) {
  console.log(numbers.reduce(getSum, 0));//0 传递给函数的初始值
}
myFunction()//输出24

JS数组方法reduce的用法实例分析

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript面向对象编程
Mar 02 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 Javascript
Javascript模拟实现new原理解析
Mar 03 #Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 #Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 #Javascript
序列化模块json代码实例详解
Mar 03 #Javascript
JS常用排序方法实例代码解析
Mar 03 #Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 #Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 #Javascript
You might like
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
PHP文件操作实例总结
2016/09/27 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
基于jQuery的星级评分插件
2011/08/12 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
vue生命周期的探索
2019/04/03 Javascript
python pycurl验证basic和digest认证的方法
2018/05/02 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
python中property和setter装饰器用法
2019/12/19 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
抽象类和接口的区别
2012/09/19 面试题
外贸业务员的岗位职责
2013/11/23 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
企业公益活动策划方案
2014/08/24 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
实验心得体会范文
2016/01/25 职场文书
小学教代会开幕词
2016/03/04 职场文书
进行数据处理的6个 Python 代码块分享
2022/04/06 Python