解析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 修改URL参数(实现代码)
Jul 08 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
JS跨域问题详解
Nov 25 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
JS跨域请求的问题解析
Dec 03 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 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
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
MSN消息提示类
2006/09/05 Javascript
javascript编程起步(第四课)
2007/02/27 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
python3+PyQt5实现柱状图
2018/04/24 Python
python的继承知识点总结
2018/12/10 Python
python分数表示方式和写法
2019/06/26 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
培训师岗位职责
2015/02/14 职场文书