解析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的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
js子页面获取父页面数据示例
May 15 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
原生js的数组除重复简单实例
May 24 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
Python3 入门教程 简单但比较不错
2009/11/29 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
python取余运算符知识点详解
2019/06/27 Python
python 爬取疫情数据的源码
2020/02/09 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
银行实习的自我鉴定
2013/12/10 职场文书
高三政治教学反思
2014/02/06 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
投诉书格式范本
2015/07/02 职场文书