JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの「for await...of」ステートメントとは？重要性と使い方をわかりやすく解説

for await...of ステートメントとは

「for await...of」ステートメントは、配列・配列風オブジェクト・Map・Setなどの同期（sync）オブジェクトに加えて、非同期（async）オブジェクトを反復処理するためのループを生成します。非同期処理が多用される現代のJavaScript開発において、非同期のデータソースを順番に処理できるこの構文は非常に重要です。

構文

for await (variable of iterable) {
    statement
}

例：通常の配列を非同期形式でループ処理する

次の例では、「for await...of」ステートメントを使用して、通常の配列を非同期形式でループ処理しています。実行すると、出力として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

ループ内で非同期関数を呼び出すには、新しいシンボル「Symbol.asyncIterator」と「for await...of」構文を使用します。特に重要なのは、「for await...of」が非同期イテラブルオブジェクトのループ処理において重要な役割を果たしているという点です。

例：非同期イテラブルを反復処理する

次の例では、「for await...of」を使用して非同期イテラブルを反復処理し、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
  1. JavaScriptのSymbol.isConcatSpreadableとは？配列の連結時の展開動作を制御する方法

    Symbol.isConcatSpreadableとはSymbol.isConcatSpreadableは、ES6（ECMAScript 2015）で導入されたウェルノウンシンボルの一つで、Array.prototype.concat()メソッドを使用する際に、対象のオブジェクトをその配列要素として展開（フラット化）するかどうかを制御するために使われます。このプロパティがfalseに設定されている場合、配列の展開は一切行われません。デフォルト値はtrueであるため、明示的に指定しない限り、配列は常に展開されて連結されるという点に注意が必要です。Symbolを使用しない場合（デフォルトの動作）サ

  2. JavaScriptのwithステートメントとは？用途と使い方をわかりやすく解説

    JavaScriptのwithステートメントは、特定のプロパティに対してデフォルトのオブジェクトを指定し、冗長になりがちなオブジェクト参照の記述を省略するための構文です。withブロック内で指定したオブジェクトは、スコープチェーンの先頭に追加されるため、そのプロパティ名だけで直接アクセスできるようになります。 基本的な動作 通常、オブジェクトのプロパティにアクセスするには、毎回オブジェクト名を明示する必要があります。しかし、withステートメントを使えば、以下のようにコードを簡潔に書けます。 オブジェクト名の繰り返し記述を省略できる 同じオブジェクトの複数のプロパティへ短くアクセスできる 指