數組的遍歷你都會用了,那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的結果很像一個洋蔥模型

但對於其他的遍歷函數來說,目前來看就需要自己來實現了。


分享到:


相關文章: