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实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
js常见表单应用技巧
Jan 09 Javascript
javascript web对话框与弹出窗口
Feb 22 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
浅谈关于JavaScript的语言特性分析
Apr 11 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
Vue组件之Tooltip的示例代码
Oct 18 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取整数函数常用的四种方法小结
2012/07/05 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
微信小程序实现消息框弹出动画
2020/04/18 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
python实现飞机大战
2018/09/11 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
HTML5实现预览本地图片
2016/02/17 HTML / CSS
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
一套比较完整的软件测试人员面试题
2012/05/13 面试题
Weblogic和WebSphere不同特点
2012/05/09 面试题
村干部承诺书
2014/03/28 职场文书
公司授权委托书范本
2014/04/03 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
导游词之青岛崂山
2019/12/27 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
mysql sock文件存储了什么信息
2022/07/15 MySQL