精品福利视频一区二区三区,免费A级毛片无码无遮挡,偷窥目拍性综合图区,亚洲欧洲无码AV电影在线观看,超清无码熟妇人妻AV在线电影

認證培訓,h3c認證體系,網(wǎng)絡(luò )工程師
豐沃創(chuàng  )新

數組的遍歷你都會(huì )用了,那Promise版本的呢?

  • 發(fā)布時(shí)間: 2018-4-30 10:14:11

這里指的遍歷方法包括:map、reduce、reduceRight、forEach、filter、some、every,因為最近要進(jìn)行了一些數據匯總,node版本已經(jīng)是8.11.1了,所以直接寫(xiě)了個(gè)async/await的腳本。但是在對數組進(jìn)行一些遍歷操作時(shí),發(fā)現有些遍歷方法對Promise的反饋并不是我們想要的結果。

當然,有些嚴格來(lái)講并不能算是遍歷,比如說(shuō)some,every這些的。

但確實(shí),這些都會(huì )根據我們數組的元素來(lái)進(jìn)行多次的調用傳入的回調。

這些方法都是比較常見(jiàn)的,但是當你的回調函數是一個(gè)Promise時(shí),一切都變了。

前言

async/await為Promise的語(yǔ)法糖

文中會(huì )直接使用async/await替換Promise

  1. let result = await func()  
  2. // => 等價(jià)于  
  3. func().then(result => {  
  4.   // code here  
  5. })  
  6.  
  7. // ======  
  8.  
  9. async function func () {  
  10.   return 1    
  11.  
  12. // => 等價(jià)與  
  13. function func () {  
  14.   return new Promise(resolve => resolve(1))  

map

map可以說(shuō)是對Promise最友好的一個(gè)函數了。

我們都知道,map接收兩個(gè)參數:

  1.     對每項元素執行的回調,回調結果的返回值將作為該數組中相應下標的元素
  2.     一個(gè)可選的回調函數this指向的參數
  1. [1, 2, 3].map(item => item ** 2) // 對數組元素進(jìn)行求平方  
  2. // > [1, 4, 9] 

上邊是一個(gè)普通的map執行,但是當我們的一些計算操作變?yōu)楫惒降模?/p>

  1. [1, 2, 3].map(async item => item ** 2) // 對數組元素進(jìn)行求平方  
  2. // > [Promise, Promise, Promise] 

這時(shí)候,我們獲取到的返回值其實(shí)就是一個(gè)由Promise函數組成的數組了。

所以為什么上邊說(shuō)map函數為最友好的,因為我們知道,Promise有一個(gè)函數為Promise.all

會(huì )將一個(gè)由Promise組成的數組依次執行,并返回一個(gè)Promise對象,該對象的結果為數組產(chǎn)生的結果集。

  1. await Promise.all([1, 2, 3].map(async item => item ** 2))  
  2. // > [1, 4, 9] 

首先使用Promise.all對數組進(jìn)行包裝,然后用await獲取結果。

reduce/reduceRight

reduce的函數簽名想必大家也很熟悉了,接收兩個(gè)參數:

1.對每一項元素執行的回調函數,返回值將被累加到下次函數調用中,回調函數的簽名:

  • accumulator累加的值
  • currentValue當前正在處理的元素
  • currentIndex當前正在處理的元素下標
  • array調用reduce的數組

2.可選的初始化的值,將作為accumulator的初始值

  1. [1, 2, 3].reduce((accumulator, item) => accumulator + item, 0) // 進(jìn)行加和  
  2. // > 6 

這個(gè)代碼也是沒(méi)毛病的,同樣如果我們加和的操作也是個(gè)異步的:

  1. [1, 2, 3].reduce(async (accumulator, item) => accumulator + item, 0) // 進(jìn)行加和  
  2. // > Promise {<resolved>: "[object Promise]3"

這個(gè)結果返回的就會(huì )很詭異了,我們在回看上邊的reduce的函數簽名

對每一項元素執行的回調函數,返回值將被累加到下次函數調用中

然后我們再來(lái)看代碼,async (accumulator, item) => accumulator += item

這個(gè)在最開(kāi)始也提到了,是Pormise的語(yǔ)法糖,為了看得更清晰,我們可以這樣寫(xiě):

  1. (accumulator, item) => new Promise(resolve =>  
  2.   resolve(accumulator += item)  

也就是說(shuō),我們r(jià)educe的回調函數返回值其實(shí)就是一個(gè)Promise對象

然后我們對Promise對象進(jìn)行+=操作,得到那樣怪異的返回值也就很合情合理了。

當然,reduce的調整也是很輕松的:

  1. await [1, 2, 3].reduce(async (accumulator, item) => await accumulator + item, 0)  
  2. // > 6 

我們對accumulator調用await,然后再與當前item進(jìn)行加和,在最后我們的reduce返回值也一定是一個(gè)Promise,所以我們在最外邊也添加await的字樣

也就是說(shuō)我們每次reduce都會(huì )返回一個(gè)新的Promise對象,在對象內部都會(huì )獲取上次Promise的結果。

我們調用reduce實(shí)際上得到的是類(lèi)似這樣的一個(gè)Promise對象:

  1. new Promise(resolve => { 
  2.   let item = 3  
  3.   new Promise(resolve => {  
  4.       let item = 2  
  5.       new Promise(resolve => {  
  6.         let item = 1  
  7.         Promise.resolve(0).then(result => resolve(item + result))  
  8.       }).then(result => resolve(item + result))  
  9.   }).then(result => resolve(item + result))  
  10. }) 

reduceRight

這個(gè)就沒(méi)什么好說(shuō)的了。。跟reduce只是執行順序相反而已

forEach

forEach,這個(gè)應該是用得最多的遍歷方法了,對應的函數簽名:

1.callback,對每一個(gè)元素進(jìn)行調用的函數

  • currentValue,當前元素
  • index,當前元素下標
  • array,調用forEach的數組引用

2.thisArg,一個(gè)可選的回調函數this指向

我們有如下的操作:

  1. // 獲取數組元素求平方后的值  
  2. [1, 2, 3].forEach(item => {  
  3.   console.log(item ** 2)  
  4. })  
  5. // > 1  
  6. // > 4  
  7. // > 9 

普通版本我們是可以直接這么輸出的,但是如果遇到了Promise

  1. // 獲取數組元素求平方后的值  
  2. [1, 2, 3].forEach(async item => {  
  3.   console.log(item ** 2)  
  4. })  
  5. // > nothing 

forEach并不關(guān)心回調函數的返回值,所以forEach只是執行了三個(gè)會(huì )返回Promise的函數

所以如果我們想要得到想要的效果,只能夠自己進(jìn)行增強對象屬性了:

  1. Array.prototype.forEachSync = async function (callback, thisArg) {  
  2.   for (let [index, item] of Object.entries(this)) {  
  3.     await callback(item, index, this)  
  4.   }  
  5.  
  6.  
  7. await [1, 2, 3].forEachSync(async item => {  
  8.   console.log(item ** 2)  
  9. })  
  10. // > 1  
  11. // > 4  
  12. // > 9 

await會(huì )忽略非Promise值,await 0、await undefined與普通代碼無(wú)異

filter

filter作為一個(gè)篩選數組用的函數,同樣具有遍歷的功能:

函數簽名同forEach,但是callback返回值為true的元素將被放到filter函數返回值中去。

我們要進(jìn)行一個(gè)奇數的篩選,所以我們這么寫(xiě):

  1. [1, 2, 3].filter(item => item % 2 !== 0)  
  2. // > [1, 3] 

然后我們改為Promise版本:

  1. [1, 2, 3].filter(async item => item % 2 !== 0)  
  2. // > [1, 2, 3] 

這會(huì )導致我們的篩選功能失效,因為filter的返回值匹配不是完全相等的匹配,只要是返回值能轉換為true,就會(huì )被認定為通過(guò)篩選。

Promise對象必然是true的,所以篩選失效。

所以我們的處理方式與上邊的forEach類(lèi)似,同樣需要自己進(jìn)行對象增強

但我們這里直接選擇一個(gè)取巧的方式:

  1. Array.prototype.filterSync = async function (callback, thisArg) {  
  2.   let filterResult = await Promise.all(this.map(callback))  
  3.   // > [truefalsetrue 
  4.   return this.filter((_, index) => filterResult[index])  
  5.  
  6.  
  7. await [1, 2, 3].filterSync(item => item % 2 !== 0) 

我們可以直接在內部調用map方法,因為我們知道map會(huì )將所有的返回值返回為一個(gè)新的數組。

這也就意味著(zhù),我們map可以拿到我們對所有item進(jìn)行篩選的結果,true或者false。

接下來(lái)對原數組每一項進(jìn)行返回對應下標的結果即可。

some

some作為一個(gè)用來(lái)檢測數組是否滿(mǎn)足一些條件的函數存在,同樣是可以用作遍歷的

函數簽名同forEach,有區別的是當任一callback返回值匹配為true則會(huì )直接返回true,如果所有的callback匹配均為false,則返回false

我們要判斷數組中是否有元素等于2:

  1. [1, 2, 3].some(item => item === 2)  
  2. // > true 

然后我們將它改為Promise

  1. [1, 2, 3].some(async item => item === 2)  
  2. // > true 

這個(gè)函數依然會(huì )返回true,但是卻不是我們想要的,因為這個(gè)是async返回的Promise對象被認定為true。

所以,我們要進(jìn)行如下處理:

  1. Array.prototype.someSync = async function (callback, thisArg) {  
  2.   for (let [index, item] of Object.entries(this)) {  
  3.     if (await callback(item, index, this)) return true  
  4.   }  
  5.  
  6.   return false  
  7.  
  8. await [1, 2, 3].someSync(async item => item === 2)  
  9. // > true 

因為some在匹配到第一個(gè)true之后就會(huì )終止遍歷,所以我們在這里邊使用forEach的話(huà)是在性能上的一種浪費。

同樣是利用了await會(huì )忽略普通表達式的優(yōu)勢,在內部使用for-of來(lái)實(shí)現我們的需求

every

以及我們最后的一個(gè)every

函數簽名同樣與forEach一樣,

但是callback的處理還是有一些區別的:

其實(shí)換一種角度考慮,every就是一個(gè)反向的some

some會(huì )在獲取到第一個(gè)true時(shí)終止

而every會(huì )在獲取到第一個(gè)false時(shí)終止,如果所有元素均為true,則返回true

我們要判定數組中元素是否全部大于3

  1. [1, 2, 3].every(item => item > 3)  
  2. // > false 

很顯然,一個(gè)都沒(méi)有匹配到的,而且回調函數在執行到第一次時(shí)就已經(jīng)終止了,不會(huì )繼續執行下去。

我們改為Promise版本:

  1. [1, 2, 3].every(async => item > 3)  
  2. // > true 

這個(gè)必然是true,因為我們判斷的是Promise對象

所以我們拿上邊的someSync實(shí)現稍微修改一下:

  1. Array.prototype.everySync = async function (callback, thisArg) {  
  2.   for (let [index, item] of Object.entries(this)) {  
  3.     if (!await callback(item, index, this)) return false  
  4.   }  
  5.   return true  
  6.  
  7. await [1, 2, 3].everySync(async item => item === 2)  
  8. // > false 

當匹配到任意一個(gè)false時(shí),直接返回false,終止遍歷。

后記

關(guān)于數組的這幾個(gè)遍歷方法。

因為map和reduce的特性,所以是在使用async時(shí)改動(dòng)最小的函數。

reduce的結果很像一個(gè)洋蔥模型

但對于其他的遍歷函數來(lái)說(shuō),目前來(lái)看就需要自己來(lái)實(shí)現了。

四個(gè)*Sync函數的實(shí)現:https://github.com/Jiasm/notebook/tree/master/array-sync

精品福利视频一区二区三区,免费A级毛片无码无遮挡,偷窥目拍性综合图区,亚洲欧洲无码AV电影在线观看,超清无码熟妇人妻AV在线电影