javascript - let で宣言した変数について、このコードではどのように動作するのでしょうか？

Question

表示を強化するために使用されるコードは次のとおりです:

リーリー

i はすでにサイクルを完了しているため、ここでは this.style を aLi[i].style に置き換えることはできません;
しかし、i の値が let で宣言されている場合は完全に異なり、また、イベント関数で正確に呼び出される i の値:

リーリー

イベント関数が発動するとiが見つからないというエラーになるのではないでしょうか？なぜ正常に実行できるのか

Answer 1

ES6 では、変数を宣言するための let コマンドが追加されています。使い方は var と似ていますが、宣言された変数は let コマンドが配置されているコード ブロック内でのみ有効です。

リーリー

上記のコードはコード ブロック内にあり、let と var をそれぞれ使用して 2 つの変数を宣言します。次に、これら 2 つの変数はコード ブロックの外で呼び出されます。その結果、let で宣言された変数はエラーを報告し、var で宣言された変数は正しい値を返します。これは、let で宣言された変数が、それが配置されているコード ブロック内でのみ有効であることを示しています。

ループカウンターの場合、letコマンドの使用が非常に適しています。

リーリー

上記のコードでは、カウンター i は for ループの本体内でのみ有効であり、ループの外で参照されるとエラーが報告されます。

次のコードで var を使用する場合、最終出力は 10 です。

リーリー

上記のコードでは、変数 i は var コマンドによって宣言されており、グローバル スコープで有効であるため、グローバルには変数 i が 1 つだけ存在します。ループがループするたびに変数 i の値が変化し、ループ内の配列 a に割り当てられた関数内の console.log(i) はグローバル i を指します。つまり、配列 a のメンバー内のすべての i は同じ i を指しているため、実行時に i の最後のラウンドの出力 (10) が生成されます。

let を使用する場合、宣言された変数はブロックレベルのスコープ内でのみ有効であり、最終出力は 6 です。

リーリー

上記のコードでは、変数 i は let によって宣言されています。現在の i はこのサイクルでのみ有効であるため、各サイクルの i は実際には新しい変数であるため、最終的な出力は 6 になります。変数 i がループの各サイクルで再宣言される場合、どのようにして前のサイクルの値を知り、現在のサイクルの値を計算するのかと疑問に思われるかもしれません。これは、JavaScript エンジンが内部的に前のサイクルの値を記憶しており、このサイクルの変数 i を初期化するときに、前のサイクルに基づいて計算が実行されるためです。

さらに、for ループのもう 1 つの特徴は、ループ変数を設定する部分が親スコープであり、ループ本体の内部が別の子スコープであることです。

リーリー

上記のコードは正しく実行され、abc が 3 回出力されます。これは、関数内の変数 i とループ変数 i が同じスコープ内になく、別のスコープを持つことを示します。