解析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三元运算符的多种使用技巧
Apr 16 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
jQuery实现高级检索功能
May 28 jQuery
layui自定义工具栏的方法
Sep 19 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 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
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
子页向父页传值示例
2013/11/27 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
布同 统计英文单词的个数的python代码
2011/03/13 Python
用Python编写web API的教程
2015/04/30 Python
Python用threading实现多线程详解
2017/02/03 Python
Python分治法定义与应用实例详解
2017/07/28 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
python3图片文件批量重命名处理
2019/10/31 Python
Opencv求取连通区域重心实例
2020/06/04 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
类的核心特性有哪些
2014/01/01 面试题
产品工艺师的岗位职责
2013/11/15 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
公司合作意向书
2014/04/01 职场文书
电子商务求职信
2014/06/15 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
导游词欢迎词
2015/02/02 职场文书
python异常中else的实例用法
2021/06/15 Python