ความสำคัญของ for await...of Statement ใน JavaScript

for await...of

คำสั่ง for await...of สร้าง loop วนลูปผ่าน async objects และ sync objects เช่น arrays, array-like objects, maps, sets ฯลฯ

รูปแบบ

for await (variable of iterable) { 
    statement 
}

ตัวอย่างที่ 1 - วน Array ธรรมดาแบบ Async

ใช้ for await...of วน array ปกติในรูปแบบ async แสดงตัวเลข 1-5

<html> <body> <script> 
    var txt = ""; 
    const array = [1,2,3,4,5]; 
    async function test() { 
        for await (const p of array) { 
            var txt = p + "<br>"; 
            document.write(txt); 
        } 
    } 
    test(); 
</script> </body> </html>

ผลลัพธ์

1 2 3 4 5

เรียก async function ใน loop ใช้ Symbol.asyncIterator และ for-await...of construct สำคัญคือ for-await...of วน async iterable object ได้

ตัวอย่างที่ 2 - Async Iterable Object

ใช้ for await...of วน async iterable แสดง 1-5

<html> <body> <script> 
    var txt = ""; 
    var async = { 
        [Symbol.asyncIterator]() { 
            return { 
                i: 1, 
                next() { 
                    if (this.i < 6) { 
                        return Promise.resolve({ value: this.i++, done: false }); 
                    } 
                } 
            }; 
        } 
    }; 
    async function test() { 
        for await (let p of async) { 
            txt = p + "<br>"; 
            document.write(txt); 
        } 
    } 
    test(); 
</script> </body> </html>

ผลลัพธ์

1 2 3 4 5