解析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 event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
微信小程序工具函数封装
Oct 28 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 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
自己动手做一个SQL解释器
2006/10/09 PHP
PHP 一个随机字符串生成代码
2010/05/26 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
php中序列化与反序列化详解
2017/02/13 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
django+js+ajax实现刷新页面的方法
2017/05/22 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
wxPython色环电阻计算器
2019/11/18 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
python中什么是面向对象
2020/06/11 Python
django使用channels实现通信的示例
2020/10/19 Python
Python远程linux执行命令实现
2020/11/11 Python
python压包的概念及实例详解
2021/02/17 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
戴森英国官网:Dyson英国
2019/05/07 全球购物
小车司机岗位职责
2013/11/25 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
活动策划求职信模板
2014/04/21 职场文书
班委竞选演讲稿
2014/04/28 职场文书
重阳节座谈会主持词
2015/07/03 职场文书