解析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将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
javascript 定义初始化数组函数
Sep 07 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
微信小程序登录session的使用
Mar 17 Javascript
vue如何使用rem适配
Feb 06 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
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
PHP单链表的实现代码
2016/07/05 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
python简单实现基数排序算法
2015/05/16 Python
Python作用域用法实例详解
2016/03/15 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
彻底理解Python list切片原理
2017/10/27 Python
windows下python和pip安装教程
2018/05/25 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
python实现UDP协议下的文件传输
2020/03/20 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
什么是Python包的循环导入
2020/09/08 Python
Java语言程序设计测试题判断题部分
2013/01/06 面试题
计算机专业自我鉴定
2013/10/15 职场文书
2014年营销工作总结
2014/11/22 职场文书
感谢信的格式
2015/01/21 职场文书
异地恋情人节寄语
2015/02/28 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript