解析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 相关文章推荐
也说JavaScript中String类的replace函数
Sep 22 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
vue基于mint-ui的城市选择3级联动的示例
Oct 25 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
vue-router重定向不刷新问题的解决
Jun 25 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
js实现录音上传功能
Nov 22 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 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
openflashchart 2.0 简单案例php版
2012/05/21 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
python开发之for循环操作实例详解
2015/11/12 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
基于python实现KNN分类算法
2020/04/23 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
python 实现性别识别
2020/11/21 Python
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
入党推优材料
2014/06/02 职场文书
工作求职自荐信
2014/06/13 职场文书
洗手间标语
2014/06/23 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
教师师德师风整改措施
2014/10/24 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
python tkinter实现定时关机
2021/04/21 Python
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers