async/await：使用Array.prototype.map（工作）與Array.prototype.filter（不工作）的異步數組轉換

Question

我幾乎肯定必須有一個解釋，但我只花了一個多小時試圖找出爲什麼我的異步代碼出現在早期嘗試使用ary.filter()轉換數組時遇到問題，但是當我使用ary.map()時，異步會解決問題。任何人都可以幫助闡明這個話題，不勝感激！

我也使用節點8.2.1只是爲了清楚。

所以提供一些代碼和輸出對問題進行描述，這裏是使用ary.map是工作，並提供在控制檯下面的輸出的一個例子。

(async() => { 
    const timeStart = Date.now() 
    const ary = new Array(20).fill(0).map((v, i) => i+1) 

    const newAry = await Promise.all(
    ary.map(async val => { 
     return await new Promise((resolve, reject) => { 
     setTimeout(() => resolve(val*2), 1000) 
     }) 
    }) 
) 
    console.log('original ary', ary) 
    console.log('newAry is', newAry) 
    const timeEnd = Date.now() 
    console.log(timeEnd - timeStart, 'milliseconds between start and end') 
})() 

輸出到控制檯如下：

original ary [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 ] 
newAry is [ 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40 ] 
1022 milliseconds between start and end 

所以如你所期望，有〜當原始數組轉換在1秒，如預期的輸出。

以下代碼非常相似，但使用ary.filter()，並且不是按預期返回。

(async() => { 
    const timeStart = Date.now() 
    const ary = new Array(20).fill(0).map((v, i) => i+1) 

    const newAry = await Promise.all(
    ary.filter(async val => { 
     return await new Promise((resolve, reject) => { 
     setTimeout(() => resolve(Math.random() < 0.5), 1000) 
     }) 
    }) 
) 
    console.log('original ary', ary) 
    console.log('newAry is', newAry) 
    const timeEnd = Date.now() 
    console.log(timeEnd - timeStart, 'milliseconds between start and end') 
})() 

輸出如下：

original ary [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 ] 
newAry is [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 ] 
18 milliseconds between start and end 

爲什麼ary.filter()不變換所述陣列和使用異步/ AWAIT當在適當的時間分辨方面表現一樣ary.map()？

Answer 1

調用Promise.all()只對承諾數組有意義。

.map()返回其回調的結果，如果回調是異步的，則返回結果爲承諾。因此，這工作正常。

.filter()將其回調的結果視爲布爾值（它不是），然後返回原始數組中的項目。