数组的遍历你都会用了,那Promise版本的呢

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

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

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

当然,有些严格来讲并不能算是遍历,比如说some,every这些的。

但确实,这些都会根据我们数组的元素来进行多次的调用传入的回调。

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

前言

async/await为Promise的语法糖

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

数组的遍历你都会用了,那Promise版本的呢

map

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

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

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

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

数组的遍历你都会用了,那Promise版本的呢

上边是一个普通的map执行,但是当我们的一些计算操作变为异步的:

数组的遍历你都会用了,那Promise版本的呢

这时候,我们获取到的返回值其实就是一个由Promise函数组成的数组了。

所以为什么上边说map函数为最友好的,因为我们知道,Promise有一个函数为Promise.all

会将一个由Promise组成的数组依次执行,并返回一个Promise对象,该对象的结果为数组产生的结果集。

数组的遍历你都会用了,那Promise版本的呢

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

reduce/reduceRight

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

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

  1. accumulator累加的值

  2. currentValue当前正在的元素

  3. array调用reduce的数组

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

数组的遍历你都会用了,那Promise版本的呢

这个代码也是没毛病的,同样如果我们加和的操作也是个异步的:

数组的遍历你都会用了,那Promise版本的呢

这个结果返回的就会很诡异了,我们在回看上边的reduce的函数签名

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

然后我们再来看代码,async (accumulator, item) => accumulator += item

这个在最开始也提到了,是Pormise的语法糖,为了看得更清晰,我们可以这样写:

数组的遍历你都会用了,那Promise版本的呢

也就是说,我们reduce的回调函数返回值其实就是一个Promise对象

然后我们对Promise对象进行+=操作,得到那样怪异的返回值也就很合情合理了。

当然,reduce的调整也是很轻松的:

数组的遍历你都会用了,那Promise版本的呢

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

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

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

数组的遍历你都会用了,那Promise版本的呢

forEach

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

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

  1. currentValue,当前元素

  2. index,当前元素下标

  3. array,调用forEach的数组引用

二、thisArg,一个可选的回调函数this指向

我们有如下的操作:

数组的遍历你都会用了,那Promise版本的呢

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

数组的遍历你都会用了,那Promise版本的呢

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

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

数组的遍历你都会用了,那Promise版本的呢

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

后记

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

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

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

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


分享到:


相關文章: