forループ内のvarの問題の解決

序文

var は ES5 における変数宣言方法です。var で変数を宣言するとループ変数がグローバル変数に漏れる問題があると以前から聞いていましたが、この「グローバル」の影響がいつもわかりません。また、出力結果が増加/減少する値になる場合と、出力が同じ値になる場合が明確ではありません。

問題の再現

(var i = 1; i <= 5; i++) の場合 {
  setTimeout(関数タイマー() {
    コンソールログ(i)
  }, i * 1000)
}

予想される結果: 12345

印刷結果: 66666

解決

閉鎖

(var i = 1; i <= 5; i++) の場合 {
    (関数(j) {
        setTimeout(関数タイマー() {
            コンソールログ(j)
        }, j * 1000)
    }）（私）
}

setTimeout 3番目のパラメータ

(var i = 1; i <= 5; i++) の場合 {
   タイムアウトを設定する(
       関数タイマー(j) {
           コンソールログ(j)
       },
       私 * 1000、
       私
   ）
}

letを使ってiを定義する

(i = 1; i <= 5; i++ とします) {
    setTimeout(関数タイマー() {
        コンソールログ(i)
    }, i * 1000)
}

させて

let に関しては、現在の i はこのループ内でのみ有効であり、各ループ内の i は実際には新しい変数であることを覚えておいてください。

JavaScript エンジンは、前のループの値を内部的に記憶し、このループの変数 i を初期化するときに、前のループに基づいて計算を実行します。

さらに、 for ループにはもう一つ特別な機能があり、ループ変数を設定する部分が親スコープで、ループ本体が別の子スコープになります。

(i = 0; i < 3; i++ とします) {
i = 'abc' とします。
コンソールにログ出力します。
}
//abc
//abc
//abc

要約する

var for ループを使用する際に発生する問題を解決する方法についての記事はこれで終わりです。var for ループの問題の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。