转载:JS数组reduce()和reduceRight()方法
原文: http://www.w3cplus.com/javascript/array-part-8.html © w3cplus.com
很多时候需要累加数组项的得到一个值(比如说求和)。如果你碰到一个类似的问题,你想到的方法是什么呢?会不会和我一样,想到的就是使用for
或while
循环,对数组进行迭代,依次将他们的值加起来。比如:
var arr = [1,2,3,4,5,6]; Array.prototype.sum = function (){ var sumResult = 0; for (var i = 0; i < this.length; i++) { sumResult += parseInt(this[i]); } return sumResult; } arr.sum(); // 21
或者
var arr = [1,2,3,4,5,6]; Array.prototype.sum = function () { var sumResult = 0; var i = this.length; while (i--) { sumResult += parseInt(this[i]); } return sumResult; } arr.sum(); // 21
那他们是不是最好的方案呢?先来看看他们所耗时间。
// 测试for和while循环实现数组求和的性能var arr = [1,2,3,4,5,6]; // for循环 console.time("forLoop"); Array.prototype.forLoop = function (){ for (var i = 0; i < 10000; i++) { var sumResult = 0; for (var j = 0; j < this.length; j++) { sumResult += parseInt(this[j]); } } return sumResult; } arr.forLoop(); console.log('最终的值:' + arr.forLoop()); // 21 console.timeEnd("forLoop"); // 54.965ms
再来看看while
循环所用时间:
var arry = [1,2,3,4,5,6]; console.time("whileLoop"); Array.prototype.whileLoop = function () { for (var i = 0; i < 10000; i++) { var sumResult = 0; for (var j = 0; j < this.length; j++) { sumResult += parseInt(this[j]); } } return sumResult; } arry.whileLoop(); console.log('最终的值:' + arry.whileLoop()); // 21 console.timeEnd("whileLoop"); // 53.056ms
看看对比结果
循环类型 | 最终值(和) | 所费时间 |
---|---|---|
for | 21 | 54.965ms |
while | 21 | 53.056ms |
备注:数组[1,2,3,4,5,6]
做了10000
次循环的累加。
虽然上面使用for
和while
都能实现需要的效果,但在JavaScript中有没有更好的方案呢?回答是肯定的,在JavaScript中(ESMAScript 5)提供了另外两个数组的方法reduce()
和reduceRight()
,这两个数组会迭代数组的所有数组项,然后返回一个最终值。接下来的内容,主要来学习这两种方法。
reduce()
方法
reduce()
方法接收一个函数callbackfn
作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值。
语法
array.reduce(callbackfn,[initialValue])
reduce()
方法接收callbackfn
函数,而这个函数包含四个参数:
function callbackfn(preValue,curValue,index,array){}
preValue
: 上一次调用回调返回的值,或者是提供的初始值(initialValue)curValue
: 数组中当前被处理的数组项index
: 当前数组项在数组中的索引值array
: 调用reduce()
方法的数组
而initialValue
作为第一次调用 callbackfn
函数的第一个参数。
reduce()
方法为数组中的每一个元素依次执行回调函数callbackfn
,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce()
的数组。
回调函数第一次执行时,preValue
和 curValue
可以是一个值,如果 initialValue
在调用 reduce()
时被提供,那么第一个 preValue
等于 initialValue
,并且curValue
等于数组中的第一个值;如果initialValue
未被提供,那么preValue
等于数组中的第一个值,`curValue等于数组中的第二个值。
来看一个示例:
var arr = [0,1,2,3,4]; arr.reduce(function (preValue,curValue,index,array) { return preValue + curValue; }); // 10
示例中的回调函数被执行四次,每次参数和返回的值如下:
preValue | curValue | index | array | 返回值 | |
---|---|---|---|---|---|
第一次回调 | 0 | 1 | 1 | [0,1,2,3,4] | 1 |
第二次回调 | 1 | 2 | 2 | [0,1,2,3,4] | 3 |
第三次回调 | 3 | 3 | 3 | [0,1,2,3,4] | 6 |
第四次回调 | 6 | 4 | 4 | [0,1,2,3,4] | 10 |
上面的示例reduce()
方法没有提供initialValue
初始值,接下来再上面的示例中,稍作修改,提供一个初始值,这个值为5
。这个时候reduce()
方法会执行五次回调,每次参数和返回的值如下:
var arr = [0,1,2,3,4]; arr.reduce(function (preValue,curValue,index,array) { return preValue + curValue; }, 5); //15
preValue | curValue | index | array | 返回值 | |
---|---|---|---|---|---|
第一次回调 | 5 | 0 | 0 | [0,1,2,3,4] | 5 |
第二次回调 | 5 | 1 | 1 | [0,1,2,3,4] | 6 |
第三次回调 | 6 | 2 | 2 | [0,1,2,3,4] | 8 |
第四次回调 | 8 | 3 | 3 | [0,1,2,3,4] | 11 |
第五次回调 | 11 | 4 | 4 | [0,1,2,3,4] | 15 |
这样一来,不用多说,应该都知道,可以使用reduce()
实现数组求和的功能。如:
var arr = [1,2,3,4,5,6]; Array.prototype.sum = function (){ var sumResult = 0; return this.reduce(function (preValue, curValue) { return sumResult = preValue + curValue; }); return sumResult; } arr.sum(); // 21
回到文章的前面,来看看使用reduce()
方法对数组求和,需要多少时间:
var arr = [1,2,3,4,5,6]; console.time("ruduce"); Array.prototype.ruduceSum = function (){ for (var i = 0; i < 10000; i++) { return this.reduce (function (preValue, curValue) { return preValue + curValue; }); } } arr.ruduceSum(); console.log('最终的值:' + arr.ruduceSum()); // 21 console.timeEnd("ruduce"); // 0.417ms
同时看看所费时间的对比:
循环类型 | 最终值(和) | 所费时间 |
---|---|---|
for | 21 | 54.965ms |
while | 21 | 53.056ms |
reduce | 21 | 0.417ms |
在Chrome浏览器下,每次执行的数据都会略有不同,但可以明显的看出reduce()
对数组项求和所费时间是最短的。
reduceRight()
方法
reduceRight()
方法的功能和reduce()
功能是一样的,不同的是reduceRight()
从数组的末尾向前将数组中的数组项做累加。
reduceRight()
首次调用回调函数callbackfn
时,prevValue
和 curValue
可以是两个值之一。如果调用 reduceRight()
时提供了 initialValue
参数,则 prevValue
等于 initialValue
,curValue
等于数组中的最后一个值。如果没有提供 initialValue
参数,则 prevValue
等于数组最后一个值, curValue
等于数组中倒数第二个值。
来看实例:
var arr = [0,1,2,3,4]; arr.reduceRight(function (preValue,curValue,index,array) { return preValue + curValue; }); // 10
回调将会被调用四次,每次调用的参数及返回值如下:
preValue | curValue | index | array | 返回值 | |
---|---|---|---|---|---|
第一次回调 | 4 | 3 | 3 | [0,1,2,3,4] | 7 |
第二次回调 | 7 | 2 | 2 | [0,1,2,3,4] | 9 |
第三次回调 | 9 | 1 | 1 | [0,1,2,3,4] | 10 |
第四次回调 | 10 | 0 | 0 | [0,1,2,3,4] | 10 |
如果提供一个初始值initialValue
为5
:
var arr = [0,1,2,3,4]; arr.reduceRight(function (preValue,curValue,index,array) { return preValue + curValue; }, 5); // 15
回调将会被调用五次,每次调用的参数及返回的值如下:
preValue | curValue | index | array | 返回值 | |
---|---|---|---|---|---|
第一次回调 | 5 | 4 | 4 | [0,1,2,3,4] | 9 |
第二次回调 | 9 | 3 | 3 | [0,1,2,3,4] | 12 |
第三次回调 | 12 | 2 | 2 | [0,1,2,3,4] | 14 |
第四次回调 | 14 | 1 | 1 | [0,1,2,3,4] | 15 |
第五次回调 | 15 | 0 | 0 | [0,1,2,3,4] | 15 |
同样的,可以对一个数组求和,也可以使用reduceRight()
方法:
var arr = [1,2,3,4,5,6]; console.time("ruduceRight"); Array.prototype.ruduceRightSum = function (){ for (var i = 0; i < 10000; i++) { return this.reduceRight (function (preValue, curValue) { return preValue + curValue; }); } } arr.ruduceRightSum(); console.log('最终的值:' + arr.ruduceSum()); // 21 console.timeEnd("ruduceRight"); // 5.725ms
总结
reduce()
和reduceRight()
两个方法功能都是类似的,可以让数组调用一个回调函数callbackfn
作为累加器。实际上根据这个回调函数,可以实现不同的功能,比如说,对数组项求合;将多个数组合并到一个数组等等。甚至配合数组其他的方法你还可以做更多功能的处理。如果感兴趣的话不仿尝试一二。
转载于:https://www.cnblogs.com/zhangmingzhao/p/7696498.html
转载:JS数组reduce()和reduceRight()方法相关推荐
- JavaScript学习笔记:数组reduce()和reduceRight()方法
很多时候需要累加数组项的得到一个值(比如说求和).如果你碰到一个类似的问题,你想到的方法是什么呢?会不会和我一样,想到的就是使用for或while循环,对数组进行迭代,依次将他们的值加起来.比如: v ...
- JS数组reduce的25个高级用法
reduce作为ES5新增的常规数组方法之一,对比forEach .filter和map,在实际使用上好像有些被忽略,下面这篇文章主要给大家介绍了关于JS数组reduce你不得不知道的25个高级用法, ...
- js的数组和对象的多种复制和清空, 以及区分JS数组和对象的方法
js的数组和对象的多种"复制"和"清空", 以及区分JS数组和对象的方法 一.数组清空与复制方法 1.数组清空的方法 var a = [1,2,3]; a.le ...
- js数组删除指定数据方法
js数组删除指定数据方法 第一种:如果数据是一个一个添加进入数组中的 可以用pop来进行删除最后一个(可以用在upload上传判断是否符合等) let arrList = []; let arr = ...
- js数组的reduce与reduceRight方法
数组由众多的实例方法,下面记录下reduce的使用方法 arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initi ...
- JS进阶篇--JS数组reduce()方法详解及高级技巧
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...
- JS进阶篇--JS数组reduce()方法详解及高级技巧 1
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...
- 【数组方法大合集】原生js数组array常用工具方法大合集
var array = {/* 数组求和*/sum: arr => eval(arr.join("+")),/* 判断一个数组(支持一个字符串)里面的是否有任何一个元素被包含 ...
- js数组去重(多种方法)
1 // js数组去重 2 Array.prototype.fun1 = function(){ 3 var arr = this, 4 result = [], 5 i, 6 len = arr.l ...
最新文章
- 利用“栈”解决“出轨”问题
- thinkPHP5.0中使用header跳转没作用
- 【Ray Tracing in One Weekend 超详解】 光线追踪1-7 Dielectric 半径为负,实心球体镂空技巧...
- java中CyclicBarrier的使用
- hexo的yelee主题文章背景颜色修改
- (转)python3 urllib.request.urlopen() 错误UnicodeEncodeError: 'ascii' codec can't encode characters...
- 多项目结构_[网红项目]碳云大厦
- 山东建筑大学校内购物网(SdaiBuy.com )V1.2 Beta
- ZH奶酪:PHP中添加HTML代码的三种方法
- 某宝长x-mini-wua分析与破解
- 罗马音平假名中文可复制_怎么记也记不住? 轻松打好日文50音基础的4个方法...
- N33-Week 1-向日葵
- COMSOL吸附模拟
- win10磁盘管理_win10合并磁盘分区教程
- HSL、RGB颜色转换
- svg适配低版本android,SVG-Android开源库——SVG图片兼容及性能优化解决方案
- [Cougaar]Cougaar快速开始指导(Cougaar Quick Start Guide)
- 简单集成美团热更新RoBust
- 利用python实现微信聊天机器人(需自己设置关键字及回复内容)
- Tree Construction(四边形优化dp)
热门文章
- mysql rpm 安装6_CentOS 7.6 MySQL 8.0 RPM包方式安装及新特性介绍
- mingw c++ 命令行_Mingw-w64在win10下的安装使用
- linux sap协议ip,记录USER 登陆SAP 的IP Address
- 全球只有4个人通关的游戏_只有两人协力才能通关这款2019谷歌最佳创意游戏
- 最好的虚拟服务器,最好虚拟主机推荐给大家
- 离散数学计算机科学丛书答案,计算机《离散数学》期中试卷答案.docx
- 4位数的水仙花c语言,C语言程序设计100例之(4):水仙花数
- mysql数据绑定listview_将数据库数据用代码绑定到Listview
- 平板直撑的腰椎问题(塌腰)
- git add remote_git命令