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 switch case 另类写法
Mar 14 Javascript
Dom 结点创建 基础知识
Oct 01 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
详解JS函数防抖
Jun 05 Javascript
JavaScript实现筛选数组
Mar 02 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
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
玩转python爬虫之URLError异常处理
2016/02/17 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
Python最小二乘法矩阵
2019/01/02 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
python中reload重载实例用法
2020/12/15 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
运动会演讲稿
2014/05/07 职场文书
环保建议书400字
2014/05/14 职场文书
企业文化标语口号
2014/06/09 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang