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简化JavaScript开发分析
Feb 19 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 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在各种web服务器的运行模式详解
2013/06/03 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
vue实现搜索功能
2019/05/28 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
python3利用tcp实现文件夹远程传输
2018/07/28 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
Python列表list排列组合操作示例
2018/12/18 Python
python实现接口并发测试脚本
2019/06/25 Python
python中metaclass原理与用法详解
2019/06/25 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
建筑工程自我鉴定
2013/10/18 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
市场开发计划书
2014/05/07 职场文书
公司节能减排倡议书
2014/05/14 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
Spring 使用注解开发
2022/05/20 Java/Android
源码安装apache脚本部署过程详解
2022/09/23 Servers