解析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 相关文章推荐
js将json格式内容转换成对象的方法
Nov 01 Javascript
js实现的折叠导航示例
Nov 29 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
实例分析浏览器中“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重定向的3种方式
2013/03/07 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
PHP cdata 处理(详细介绍)
2013/07/05 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
PHP中SESSION过期设置
2021/03/09 PHP
使用VS开发 Node.js指南
2015/01/06 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
python二进制文件的转译详解
2019/07/03 Python
Python中函数的返回值示例浅析
2019/08/28 Python
python实现邮件循环自动发件功能
2020/09/11 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
最新的大学生找工作自我评价
2013/09/29 职场文书
优秀团员个人的自我评价
2013/10/02 职场文书
自我鉴定范文
2013/11/10 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
Nginx 匹配方式
2022/05/15 Servers
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server