JavaScript ループとスコープの関係を分析します (コードが添付されています)

私たちは仕事で JavaScript をよく使用しており、それは私たちの仕事に密接に関係しています。しかし、JavaScript には開発者にとって頭痛の種となる可能性のある機能があります。それはループとスコープに関連しています。次に、それらの関係について説明します。

例:

const operations = []
for (var i = 0; i < 5; i++) {
  operations.push(() => {
    console.log(i)
  })
}
for (const operation of operations) {
  operation()
}

基本的に 5 回ループし、操作配列に関数を追加します。この関数はループ変数のインデックス値 i を出力できます。
これらの関数を実行した後の期待される結果は次のようになります:
0 1 2 3 4

しかし、実際に起こることは次のとおりです:

5 5 5 5

この状況はなぜでしょうか? ? var が使用されているため、var 変数がプロモートされているため、上記のコードは

var i;
const operations = []
for (i = 0; i < 5; i++) {
  operations.push(() => {
    console.log(i)
  })
}
for (const operation of operations) {
  operation()
}

と同等であるため、for-of ループでは i が表示され、常に 5 に等しくなります。 i には、この値が使用されます。
それでは、希望どおりにするにはどうすればよいでしょうか?
最も簡単な解決策は、ES2015 で導入された let 宣言を使用することです。これは非常に役立ち、var 宣言の使用に関するいくつかの奇妙な問題を回避できます。
変数をループするときに var を let に変更するだけで、非常にうまく実行できます:

const operations = []
for (let i = 0; i < 5; i++) {
  operations.push(() => {
    console.log(i)
  })
}
for (const operation of operations) {
  operation()
}

これが出力結果です:

0 1 2 3 4

これは、各ループが When, i will be を繰り返すためです。同時に、各関数が操作配列を追加するときに、独自の i を取得できます。
この場合は const を使用できないことに注意してください。これは、2 番目のループ中に新しい値を割り当てようとしたときに for がエラーを報告する原因となるためです。
この問題に対するもう 1 つの非常に一般的な解決策は、ES6 以前のコードを使用することです。これは、即時呼び出し関数式 (IIFE) と呼ばれます。
この場合、関数全体をラップして、上で i をそれにバインドできます。このようにして、すぐに実行できる関数を作成し、そこから新しい関数を返します。したがって、後で実行できます。

りー

以上がJavaScript ループとスコープの関係を分析します (コードが添付されています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。