详解JavaScript中数组的reduce方法


Posted in Javascript onDecember 02, 2016

介绍

我们先来看看这个方法的官方概述:reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。

你一定也和我一样看的有点迷糊,其实reduce接收的就是一个回调函数,去调用数组里的每一项,直到数组结束。

我们来举个例子大家就很明白了。

假设我有一串数组,数组里放的全是数字,我要算出这些数字的总和是多少。正常情况下我们会循环,然后一个个加,有了reduce就不用那么麻烦了,只用一行代码。

var total = [0,1,2,3,4].reduce((a, b)=>a + b); //10

这个方法是如何工作的呢?

reduce接受一个函数,函数有四个参数,分别是:

     1、上一次的值;

     2、当前值;

     3、当前值的索引;

     4、数组;

我们还是以上面那个数组为例,把这几个参数打印出来看看:

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
 return previousValue + currentValue;
});

得到的结果是:

详解JavaScript中数组的reduce方法

分析一下这个结果,这个回调函数共调用了4次,因为第一次没有previousValue,所以直接从数组的第二项开始,一只调用到数组结束。

reduce还有第二个参数,我们可以把这个参数作为第一次调用callback时的第一个参数,上面这个例子因为没有第二个参数,所以直接从数组的第二项开始,如果我们给了第二个参数为5,那么结果就是这样的:

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
 return previousValue + currentValue;
},5);

详解JavaScript中数组的reduce方法

第一次调用的previousValue的值就用传入的第二个参数代替,函数被调用了5次,也就是数组的length

reduce可以帮助我们轻松的完成很多事,除了累加,还有扁平化一个二维数组:

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
 return a.concat(b);
}, []);
// flattened == [0, 1, 2, 3, 4, 5]

总结

我暂时能想到的常用的就这两个,不过肯定还有很多地方能用到啦。以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
jQuery validata插件实现方法
Jun 25 jQuery
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
vue实现多级菜单效果
Oct 19 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 #Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 #Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 #Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 #Javascript
关于Function中的bind()示例详解
Dec 02 #Javascript
bootstrap模态框消失问题的解决方法
Dec 02 #Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 #Javascript
You might like
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
利用python修改json文件的value方法
2018/12/31 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
2014年团委工作总结
2014/11/13 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
MySQL中连接查询和子查询的问题
2021/09/04 MySQL