ループ内の関数に引数を渡すときに変数の値を保持するにはどうすればよいですか?

関数に引数を渡すときに変数の値を保持する

JavaScript ループを使用する場合、変数の値を保持する必要がある状況が発生することがあります。関数に渡すときは変数。このシナリオは、ループの実行中に変数の値が変更され、イベント リスナーで予期しない動作が発生する可能性がある場合に発生します。

次の例を考えてみましょう。

<code class="js">for (var i = 0; i < results.length; i++) {
    marker = results[i];
    google.maps.event.addListener(marker, 'click', function() {
        change_selection(i);
    });
}

このコードでは、イベント リスナーは次のとおりです。ループ内の各マーカーに付加されます。ただし、リスナーがトリガーされると、ループ終了時の結果配列の長さである i の最終値が使用されます。この動作は、すべてのイベント リスナーに同じ値が使用されることになるため、望ましくないです。

各リスナーの i の値を保持するには、ブロック スコープの変数 (最新のブラウザーの場合) またはクロージャー (最新のブラウザーの場合) を利用できます。

最新のブラウザ (ES6):

<code class="js">for (let i = 0; i < results.length; i++) {
    let marker = results[i];
    google.maps.event.addListener(marker, 'click', () => change_selection(i));
}</code>

let キーワードを使用すると、ループ内でのみアクセスできるブロック スコープの変数が作成されます。これにより、各イベント リスナーが作成時に i 値の独自のコピーを持つことが保証されます。

古いブラウザ:

<code class="js">for (var i = 0; i < results.length; i++) {
    (function (i) {
        marker = results[i];
        google.maps.event.addListener(marker, 'click', function() {
            change_selection(i);
        });
    })(i);
}</code>

匿名関数の作成と呼び出し最初の引数として i を指定すると、クロージャが作成されます。この関数は作成時の i の値を保持し、各イベント リスナーがその特定のマーカーに対して正しい値を使用するようにします。

以上がループ内の関数に引数を渡すときに変数の値を保持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。