陣列的遍歷之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,快速升職加薪,走上人生巔峰。