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 相关文章推荐
js调用flash的效果代码
Apr 26 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 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 文件类型判断代码
2009/03/13 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
Python数据操作方法封装类实例
2017/06/23 Python
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
详解flask入门模板引擎
2018/07/18 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
优秀大学生职业生涯规划书
2014/02/27 职场文书
化工工艺设计求职信
2014/06/25 职场文书
小学教师师德整改措施
2014/09/29 职场文书
干部年终考核评语
2015/01/04 职场文书