数组的遍历之Promise版本

这里指的遍历方法包括:map、reduce、reduceRight、forEach、filter、some、every

因为最近要进行了一些数据汇总,node版本已经是8.11.1了,所以直接写了个async/await的脚本。

但是在对数组进行一些遍历操作时,发现有些遍历方法对Promise的反馈并不是我们想要的结果。

当然,有些严格来讲并不能算是遍历,比如说some,every这些的。根据我们数组的元素来进行多次的调用传入的回调。

这些方法都是比较常见的,但是当你的回调函数是一个Promise时,一切都变了。

前言

async/await为Promise的语法糖

文中会直接使用async/await替换Promise

map

1.map可以说是对Promise最友好的一个函数了。

2.我们都知道,map接收两个参数:

对每项元素执行的回调,回调结果的返回值将作为该数组中相应下标的元素

一个可选的回调函数this指向的参数

首先使用Promise.all对数组进行包装,然后用await获取结果。

reduce/reduceRight

reduce的函数签名想必大家也很熟悉了,接收两个参数:

对每一项元素执行的回调函数,返回值将被累加到下次函数调用中,回调函数的签名:

1.accumulator累加的值

2.currentValue当前正在处理的元素

3.currentIndex当前正在处理的元素下标

4.array调用reduce的数组

可选的初始化的值,将作为accumulator的初始值

我们对accumulator调用await,然后再与当前item进行加和,在最后我们的reduce返回值也一定是一个Promise,所以我们在最外边也添加await的字样

也就是说我们每次reduce都会返回一个新的Promise对象,在对象内部都会获取上次Promise的结果。

我们调用reduce实际上得到的是类似这样的一个Promise对象:

reduceRight

这个就没什么好说的了。。跟reduce只是执行顺序相反而已

forEach

forEach,这个应该是用得最多的遍历方法了,对应的函数签名:

callback,对每一个元素进行调用的函数

currentValue,当前元素

index,当前元素下标

array,调用forEach的数组引用

thisArg,一个可选的回调函数this指向,如下操作:

普通版本我们是可以直接这么输出的,但是如果遇到了Promise

forEach并不关心回调函数的返回值,所以forEach只是执行了三个会返回Promise的函数

所以如果我们想要得到想要的效果,只能够自己进行增强对象属性了:

await会忽略非Promise值,await 0、await undefined与普通代码无异

filter

filter作为一个筛选数组用的函数,同样具有遍历的功能:

函数签名同forEach,但是callback返回值为true的元素将被放到filter函数返回值中去。

我们要进行一个奇数的筛选,所以我们这么写:

这会导致我们的筛选功能失效,因为filter的返回值匹配不是完全相等的匹配,只要是返回值能转换为true,就会被认定为通过筛选。

Promise对象必然是true的,所以筛选失效。

所以我们的处理方式与上边的forEach类似,同样需要自己进行对象增强

但我们这里直接选择一个取巧的方式:

我们可以直接在内部调用map方法,因为我们知道map会将所有的返回值返回为一个新的数组。

这也就意味着,我们map可以拿到我们对所有item进行筛选的结果,true或者false。

接下来对原数组每一项进行返回对应下标的结果即可。

some

some作为一个用来检测数组是否满足一些条件的函数存在,同样是可以用作遍历的

函数签名同forEach,有区别的是当任一callback返回值匹配为true则会直接返回true,如果所有的callback匹配均为false,则返回false

我们要判断数组中是否有元素等于2:

这个函数依然会返回true,但是却不是我们想要的,因为这个是async返回的Promise对象被认定为true。

所以,我们要进行如下处理:

因为some在匹配到第一个true之后就会终止遍历,所以我们在这里边使用forEach的话是在性能上的一种浪费。

同样是利用了await会忽略普通表达式的优势,在内部使用for-of来实现我们的需求

every

以及我们最后的一个every

函数签名同样与forEach一样,

但是callback的处理还是有一些区别的:

其实换一种角度考虑,every就是一个反向的some

some会在获取到第一个true时终止

而every会在获取到第一个false时终止,如果所有元素均为true,则返回true

我们要判定数组中元素是否全部大于3

当匹配到任意一个false时,直接返回false,终止遍历。

后记

关于数组的这几个遍历方法。

因为map和reduce的特性,所以是在使用async时改动最小的函数。

reduce的结果很像一个洋葱模型

但对于其他的遍历函数来说,目前来看就需要自己来实现了。

最后“相信有很多想学前端的小伙伴,今年年初我花了一个月整理了一份最适合2018年学习的web前端干货,从最基础的HTML+CSS+JS到移动端HTML5等都有整理,送给每一位前端小伙伴,53763,1707这里是小白聚集地,欢迎初学和进阶中的小伙伴。”

祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 异步编程对JavaScript语言太重要。Javascript语言的执行环境是“单线程”的,如果没有异步编程,根本...
    呼呼哥阅读 7,348评论 5 22
  • 含义 async函数是Generator函数的语法糖,它使得异步操作变得更加方便。 写成async函数,就是下面这...
    oWSQo阅读 2,007评论 0 2
  • 神父,我有罪。我太不主动 我总是等着通知,等着队友找我,等着事情敲上门才开始行动。这样我错过了活动,错过了比赛,错...
    灯影影影阅读 405评论 1 0
  • 我终于承认,即使再深刻的记忆,经过一段时间的酝酿也会腐坏变质。即使这段时间只是一年,只是一个月。我在这里,早已不能...
    今天天气真好阅读 238评论 0 2
  • 毕业已接近5年,进入互联网行业也已经差不多4年半了,从iOS开发做起一路不断摸索学习,也算入了开发的门。也是由于自...
    王zl阅读 185评论 0 0