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 相关文章推荐
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
js列举css中所有图标的实现代码
Jul 04 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
浅析javascript中function 的 length 属性
May 27 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
php生成4位数字验证码的实现代码
2015/11/23 PHP
重定向实现代码
2006/11/20 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
Python logging模块handlers用法详解
2020/08/14 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
英语专业学生个人求职信范文
2014/01/06 职场文书
置业顾问岗位职责
2014/03/02 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
政风行风评议整改方案
2014/09/15 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
清洁工岗位职责
2015/02/13 职场文书
2015年领导班子工作总结
2015/05/23 职场文书