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 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
小程序实现多列选择器
Feb 15 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
webpack 处理CSS资源的实现
Sep 27 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 连接mssql数据库 初学php笔记
2010/03/01 PHP
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
php post换行的方法
2020/02/03 PHP
一些不错的js函数ajax
2008/08/20 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
Bootstrap Table使用整理(三)
2017/06/09 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
Python迭代器与生成器基本用法分析
2018/07/26 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
django跳转页面传参的实现
2020/09/17 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
成功的酒店创业计划书
2013/12/27 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
主持稿开场白
2015/06/01 职场文书
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python
HTML中的表格元素介绍
2022/02/28 HTML / CSS