這裡指的遍歷方法包括:map、reduce、reduceRight、forEach、filter、some、every
因為最近要進行了一些數據彙總,node版本已經是8.11.1了,所以直接寫了個async/await的腳本。
但是在對數組進行一些遍歷操作時,發現有些遍歷方法對Promise的反饋並不是我們想要的結果。
當然,有些嚴格來講並不能算是遍歷,比如說some,every這些的。
但確實,這些都會根據我們數組的元素來進行多次的調用傳入的回調。
這些方法都是比較常見的,但是當你的回調函數是一個Promise時,一切都變了。
前言
async/await為Promise的語法糖
文中會直接使用async/await替換Promise
map
map可以說是對Promise最友好的一個函數了。
我們都知道,map接收兩個參數:
對每項元素執行的回調,回調結果的返回值將作為該數組中相應下標的元素
一個可選的回調函數this指向的參數
上邊是一個普通的map執行,但是當我們的一些計算操作變為異步的:
這時候,我們獲取到的返回值其實就是一個由Promise函數組成的數組了。
所以為什麼上邊說map函數為最友好的,因為我們知道,Promise有一個函數為Promise.all
會將一個由Promise組成的數組依次執行,並返回一個Promise對象,該對象的結果為數組產生的結果集。
首先使用Promise.all對數組進行包裝,然後用await獲取結果。
reduce/reduceRight
reduce的函數簽名想必大家也很熟悉了,接收兩個參數:
一、對每一項元素執行的回調函數,返回值將被累加到下次函數調用中,回調函數的簽名:
accumulator累加的值
currentValue當前正在的元素
array調用reduce的數組
二、可選的初始化的值,將作為accumulator的初始值
這個代碼也是沒毛病的,同樣如果我們加和的操作也是個異步的:
這個結果返回的就會很詭異了,我們在回看上邊的reduce的函數簽名
對每一項元素執行的回調函數,返回值將被累加到下次函數調用中
然後我們再來看代碼,async (accumulator, item) => accumulator += item
這個在最開始也提到了,是Pormise的語法糖,為了看得更清晰,我們可以這樣寫:
也就是說,我們reduce的回調函數返回值其實就是一個Promise對象
然後我們對Promise對象進行+=操作,得到那樣怪異的返回值也就很合情合理了。
當然,reduce的調整也是很輕鬆的:
我們對accumulator調用await,然後再與當前item進行加和,在最後我們的reduce返回值也一定是一個Promise,所以我們在最外邊也添加await的字樣
也就是說我們每次reduce都會返回一個新的Promise對象,在對象內部都會獲取上次Promise的結果。
我們調用reduce實際上得到的是類似這樣的一個Promise對象:
forEach
forEach,這個應該是用得最多的遍歷方法了,對應的函數簽名:
一、callback,對每一個元素進行調用的函數
currentValue,當前元素
index,當前元素下標
array,調用forEach的數組引用
二、thisArg,一個可選的回調函數this指向
我們有如下的操作:
普通版本我們是可以直接這麼輸出的,但是如果遇到了Promise
forEach並不關心回調函數的返回值,所以forEach只是執行了三個會返回Promise的函數
所以如果我們想要得到想要的效果,只能夠自己進行增強對象屬性了:
await會忽略非Promise值,await 0、await undefined與普通代碼無異
後記
關於數組的這幾個遍歷方法。
因為map和reduce的特性,所以是在使用async時改動最小的函數。
reduce的結果很像一個洋蔥模型
但對於其他的遍歷函數來說,目前來看就需要自己來實現了。
閱讀更多 深秀DeepShow 的文章