JavaScript - Symbol.asyncIterator 屬性

Symbol.asyncIterator 屬性用於在一個物件上定義非同步迭代方法。它在 ECMAScript 2018 規範中引入，以啟用 JavaScript 非同步迭代協議。JavaScript 通常允許使用 for...of 迴圈進行同步迭代，該迴圈可以操作各種可迭代物件，包括集合、陣列、字串、對映等等。但是，當迭代需要非同步操作（例如從伺服器檢索資料或從流中讀取資料）時，同步迭代是不合適的。

為了克服這個問題，ECMAScript 引入了非同步迭代器和 Symbol.asyncIterator 屬性的概念。此內建符號使物件成為非同步可迭代物件，從而啟用非同步迭代。

語法

以下是 JavaScript Symbol.asyncIterator 屬性的語法：

[Symbol.asyncIterator]()

引數

此屬性不接受任何引數。

返回值

此屬性返回非同步迭代器物件的返回值。

示例

示例 1

讓我們來看下面的例子，我們將使用 for await of 迴圈來建立一個使用 symbol.asyncIterator 的非同步可迭代物件。

<html>
   <body>
      <script>
         const x = {
            async *[Symbol.asyncIterator]() {
               yield 11 + " < br > ";
               yield 4 + " < br > ";
               yield 33 + " < br > ";
            }
         };
         (async () => {
            for await (const a of x) {
               document.write(a);
            }
         })();
      </script>
   </body>
</html>

如果我們執行上面的程式，它將在網頁上顯示數字。

示例 2

考慮另一種情況，我們將定義一個返回非同步可迭代物件的非同步生成器函式。

<html>
   <body>
      <script>
         async function* x() {
            yield 'Ram';
            yield 'Rahul';
            yield 'Ravi';
         }
         (async () => {
            for await (const a of x()) {
               document.write(a + " < br > ");
            }
         })();
      </script>
   </body>
</html>

執行上述指令碼後，它將在網頁上顯示文字。

示例 3

在下面的示例中，我們將使用 Symbol.asyncIterator 建立一個自定義非同步可迭代類，該類會生成值。

<html>
   <body>
      <script>
         class x {
            constructor() {
               this.a = [1, 2, 3];
            }
            async *[Symbol.asyncIterator]() {
               for (const y of this.a) {
                  await new Promise(resolve => setTimeout(resolve, 100));
                  yield y;
               }
            }
         }
         (async () => {
            for await (const b of new x()) {
               document.write(b + " < br > ");
            }
         })();
      </script>
   </body>
</html>

當我們執行指令碼時，它將在網頁上顯示文字。

列印頁面