解析JavaScript数组方法reduce


Posted in Javascript onDecember 12, 2016

Array.prototype.reduce()

概述

reduce()方法是数组的一个实例方法(共有方法),可以被数组的实例对象调用。reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。

语法

arr.reduce(callback[, initialValue]) {}

参数

回调函数中可以传递四个参数。

previousValue:上一次调用回调函数返回的值,或者是提供的初始值(initialValue)

currentValue:数组中当前被处理的元素

currentIndex:当前被处理元素在数组中的索引, 即currentValue的索引.如果有initialValue初始值, 从0开始.如果没有从1开始

array:调用 reduce 的数组

initialValue:可选参数, 作为第一次调用 callback 的第一个参数

返回值

reduce()返回值是最后一次调用回调函数返回的结果

描述

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:

  1. previousValu 上一次值
  2. currentValue 当前值
  3. currentIndex 当前值的索引
  4. array 数组

回调函数第一次执行时,previousValue 和 currentValue可能是两个不同值其中的一个,如果reduce有initialValue参数,那么 previousValue 等于 initialValue ,并且currentValue 等于数组中的第一个值;如果reduce没有 initialValue 参数,那么previousValue 等于数组中的第一个值,currentValue等于数组中的第二个值。

注意: 如果没有initialValue参数, reduce从index为1开始执行回调函数, 跳过第一个index。 如果有initialValue参数, reduce 将从index为 0 开始执行回调

如果数组是空的并且没有initialValue参数, 将会抛出TypeError错误. 如果数组只有一个元素并且没有初始值initialValue, 或者有initialValue但数组是空的, 这个唯一的值直接被返回而不会调用回调函数。

通常来说提供一个initialValue初始值更安全一点, 因为没有的话会出现如下输出结果。

//没有提供initialValue
function foo(){
 return [1,2,3,4,5].reduce((x, y) => x + y); //15
};
console.log(foo.call(this));
function foo(){
 return [].reduce((x, y) => x + y); //TypeError
};
console.log(foo.call(this));
//提供initialValue
function foo(){
 return [].reduce((x, y) => x + y, 0); //0
};
console.log(foo.call(this));

reduce()是如何工作的

[0, 1, 2, 3, 4].reduce((previousValue, currentValue, index, array) => previousValue + currentValue);

回调被执行四次,每次的参数和返回值如下表:

解析JavaScript数组方法reduce

reduce 的返回值是回调函数最后一次被调用的返回值(10)。

如果把初始值作为第二个参数传入 reduce,结果如下,结果如下:

[0, 1, 2, 3, 4].reduce((previousValue, currentValue, index, array) => previousValue + currentValue, 10);

解析JavaScript数组方法reduce

最后一次函数调用的返回值 (20) 作为reduce函数的结果被返回

注意:添加了initialValue参数会多调用一次回调函数

例题

将数组所有项相加

let sum = [0, 1, 2, 3, 4].reduce((x, y) => x + y, 0); 
// 10

扁平化一个二维数组

let arr = [[1, 2], [3, 4], [5, 6]].reduce((x, y) => x.concat(y), []);
// [1, 2, 3, 4, 5, 6]

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
对new functionName()定义一个函数的理解
May 22 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 #Javascript
JS双击变input框批量修改内容
Dec 12 #Javascript
jQuery中animate的几种用法与注意事项
Dec 12 #Javascript
Websocket协议详解及简单实例代码
Dec 12 #Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 #Javascript
jQuery实现字符串全部替换的方法
Dec 12 #Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 #Javascript
You might like
php中mysql操作buffer用法详解
2015/03/19 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
javascript读取RSS数据
2007/01/20 Javascript
window.location和document.location的区别分析
2008/12/23 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
Python3写入文件常用方法实例分析
2015/05/22 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
对Python中的@classmethod用法详解
2018/04/21 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
高三毕业典礼主持词
2014/03/27 职场文书
小学生期末评语
2014/04/21 职场文书
模具专业求职信
2014/06/26 职场文书
一份文言文检讨书
2014/09/13 职场文书