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 相关文章推荐
require.js深入了解 require.js特性介绍
Sep 04 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
微信小程序自定义弹出层效果
May 26 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
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
搭建vue开发环境
2018/07/19 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
跟老齐学Python之再深点,更懂list
2014/09/20 Python
跟老齐学Python之类的细节
2014/10/13 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
python3中eval函数用法使用简介
2019/08/02 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
工作调动申请报告
2015/05/18 职场文书
装修公司管理制度
2015/08/05 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle