JavaScript と let ステートメントを理解する

JavaScript は勉強や仕事に関係するため、let ステートメントは JavaScript の大部分を占めています。この記事は let ステートメントを理解し、マスターするのに役立ちます。注意深く学習してみましょう。

let ステートメントを使用すると、JavaScript でブロックスコープのローカル変数を作成できます。 let ステートメントは、JavaScript の ECMAScript 6 標準で導入されました。 let ステートメントに入る前に、Infragistics jQuery ライブラリに基づく Ignite UI を確認することをお勧めします。これは、Web アプリケーションの作成と実行を高速化するのに役立ちます。 JavaScript ライブラリの Ignite UI を使用すると、HTML5、jQuery、Angular、React、または ASP.NET MVC の複雑な LOB ニーズを迅速に解決できます。 (Ignite UI の無料トライアルはここからダウンロードできます。) ECMAScript 6 より前では、JavaScript には 3 種類のスコープがありました:

グローバル スコープ

関数スコープ

語彙スコープ

let ステートメントを詳しく調べるには、以下を参照してください。次のコード スニペットを考えてみましょう:

function foo() {
    var x = 9;
    if (x > 5) {
        var x = 7;
        console.log("Value of x in if statement = " + x);
    }
    console.log("Value of x outside if statement = " + x);
}
foo();

上記のコードから得られる出力:

上記のコードでは、var ステートメントを使用して変数 x を宣言します。したがって、変数 x のスコープが関数のスコープになります。 if ステートメント内の変数 x は、if ステートメントの外で作成された変数 x です。したがって、if ステートメント ブロック内で変数 x の値を変更すると、関数内の変数 x へのすべての参照の値も変更されます。

これを回避するには、ブロック レベルのスコープを使用する必要があります。let ステートメントを使用すると、ブロック スコープのローカル変数を作成できます。

上記のコード スニペットを変更し、let ステートメントを使用して変数を宣言します。

function foo() {
    var x = 9;
    if (x > 5) {
        let x = 7;
        console.log("Value of x in if statement = " + x);
    }
    console.log("Value of x outside if statement = " + x);
}
foo();

上記のコード スニペットでは、let ステートメントを使用してスコープ レベルのローカル変数 x を宣言します。したがって、if ステートメント内で変数 x の値を更新しても、if ステートメント外の変数 x の値には影響しません。

上記のコードの出力は次のとおりです:

関数

scope (またはグローバル スコープ) を使用して宣言された

変数とは異なり、let を使用して宣言された変数はブロック スコープです。これらは、変数が存在するブロック内にのみ存在します。定義されています。 変数のホイスト

let を使用して宣言された変数は、var を使用して宣言された変数とは異なる方法でホイストされます。したがって、let を使用して宣言された変数には変数ホイスティングがありません。つまり、let を使用して宣言された変数は実行コンテキストの先頭に移動されません。

これをよりよく理解するには、次のコードを見てください:

function foo() {
    console.log(x);
    console.log(y);
    var x = 9;
    let y = 67;
}
foo();

出力として、let ステートメントを使用して宣言された変数 y の ReferenceError を取得します。 let を使用して宣言された変数は、実行コンテキストの上にホイストされません。

変数の再宣言

同じ関数またはブロック内で let を使用して変数を再宣言することはできません。そうすると、

文法エラー

が発生します。次のコードを見てください:

function foo() {
    if(true){
        let x = 9;
        let x = 89;
    }
}
foo();

上記のコードを実行すると、以下に示すような構文エラーが発生します:

一時的なデッド ゾーン

let を使用して宣言された変数により、一時的なデッド ゾーンが発生する場合があります。次のコードでは、let x=x+67 は x 未定義例外をスローします。

このエラーが発生する理由は、

式

(x + 67) が関数スコープ内のローカル変数 x の値ではなく、if ブロックスコープ内のローカル変数 x の値を求めているためです。上記のコードを実行すると、次のような例外が発生します:

ブロックレベルのスコープは、あらゆる

プログラミング言語

の最も重要な機能の 1 つであり、ECMAScript 6 での let ステートメントの導入により、JavaScript が使用されるようになりました。これにも機能があります。 let ステートメントを使用すると、ブロック スコープ内の変数を作成できます。これにより、グローバル スコープ変数やクロージャ内のローカル変数の誤った変更などの多くの問題が解決され、よりクリーンなコードの作成に役立ちます。
「JavaScript を理解する」シリーズの次の記事では、JavaScript 関数のrest パラメーターを紹介します。これについて詳しくは、php.cn Web サイトをご覧ください。また、Ignite UI も忘れずにチェックしてください。Ignite UI は、HTML5、Angular、React、または ASP.NET MVC とともに使用して、リッチ インターネット アプリケーションの作成に役立ちます。

上記は JavaScript と let ステートメントの全文の理解に関するもので、興味のある友達は一緒に議論できます。

関連書籍:

JavaScript、関数のデフォルトパラメータを理解する

ネイティブjsは移動可能なプロンプトdivボックスのソースコードを実装する

あなたが知らないJavaScriptのデバッグスキル

以上がJavaScript と let ステートメントを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。