JavaScript ESの新機能letとconstキーワードに基づく

1. letキーワード

1.1 基本的な使い方

let はECMAScript 2015で追加された新しいキーワードで、変数を宣言するために使用されます。使い方は var と似ていますが、宣言された変数は、それが配置されているコードブロック内でのみ使用できるという違いがあります。

構文構造は次のとおりです。

var1 [= 値1] [, var2 [= 値2]] [, ..., varN [= 値N]] とします。

パラメータの説明:

var1, var2, …, varN : 変数名。有効な識別子である必要があります。

value1, value2, …, valueN : 変数の初期値。あらゆる法的表現が可能です。

サンプルコードは次のとおりです。

グローバルスコープでは、変数は定義されます

// グローバル変数を定義する var a = 100; // var キーワードを使用する let b = 200; // let キーワードを使用する console.log(a); // 100
コンソールログ(b); // 200

グローバル変数を定義するだけでは違いがないことがわかりました。

ブロックスコープでの変数の定義

ブロックスコープの詳細については、この記事を参照してください。

// ブロックスコープで変数を定義する {
  var a = 100; // var キーワードを使用します let b = 200; // let キーワードを使用します }
コンソールログ(a); // 100
console.log(b); // ReferenceError: b is not defined という説明の例外をスローします

コードブロック内でletを使用すると、コードブロックはまったく新しいスコープになり、その変数はスコープ外からアクセスできなくなります。

ES6 で提供されるletキーワードはforループ計算機の変数として使用するのに特に適しています。これを行うと、変数はループ本体内でのみ使用でき、ループ本体の外部では例外がスローされます。

サンプルコードは次のとおりです。

// ループ本体を定義します for (let v = 0; v < 10; v++) {
  console.log("これは for ループです"); // これは for ループです * 10
}
console.log(v); // 次の説明を含む例外をスローします: ReferenceError: v が定義されていません

forループには、ループ変数を設定する部分が親スコープであり、ループ本体が別の子スコープであるという別の特殊な機能があることに注目する価値があります。

サンプルコードは次のとおりです。

(v = 0; v < 10; v++) の場合 {
  v = 10とする
  コンソール.log(v); // 100 * 10
}

上記の結果は、2 つの v が同じスコープ内にないことを意味します。

1.2 変動昇進はない

var を使用して変数を定義すると、次のコードに示すように、いわゆる変数コミッションが発生します。

console.log(v); // 未定義
var v = 100;

この値を変数宣言の前に使用し、エラーは報告されませんが、結果は未定義です。これは奇妙なロジックです。一般的なロジックによると、このように使用すると例外がスローされるはずです。

ECMAScript 2015では、let キーワードによってこの奇妙な現象が解決されます。

次のコードに示すように:

console.log(v); // ReferenceError: 初期化前に 'v' にアクセスできませんという説明の例外がスローされます
v = 100 とします。

上記のコードでは、変数は宣言される前に使用できないという説明とともに例外がスローされます。

1.3 一時的なデッドゾーン

ブロックレベルのスコープ内にletキーワードで定義された変数がある限り、それによって宣言された変数はこの領域にバインドされ、外部からの影響を受けなくなります。サンプルコードは次のとおりです。

v = 100 とします。 
{
  console.log(v); // ReferenceError: 初期化前に 'v' にアクセスできませんという説明の例外がスローされます
  // この変数はブロックレベルのスコープにバインドされており、このスコープはこの変数のみを使用できます。let v = 200;
}

ECMAScript 2015 、ブロック内にletキーワードがある場合、そのブロックは最初からこれらのコマンドによって宣言された変数の囲みスコープを形成することが明確に規定されています。これらの変数を宣言する前に使用すると、エラーが発生します。

一般的に、ブロックレベルのスコープでは、変数は let キーワードを使用して宣言されるまで使用できません。これは文法的には一時的なdead zone 、または略して TDZ と呼ばれます。

1.4 重複した申告は認められない

ECMAScript 2015で提供される let キーワードでは、var とは異なり、繰り返し宣言は許可されません。サンプルコードは次のとおりです。

// var を使用して変数を宣言します var a = 100;
コンソールログ(a); // 100
var a = 1000; // 繰り返し宣言 console.log(a); // 1000

// let を使用して変数を宣言します。let b = 100;
コンソールログ(b); // 100
let b = 1000; // 繰り返し宣言 console.log(b); // 次の説明の例外をスローします: SyntaxError: 識別子 'b' は既に宣言されています

繰り返し宣言すると、 SyntaxError例外がスローされます。

1.5 関数との関係

関数パラメータはletキーワードを使用して定義された変数と同等です。関数本体でletキーワードを再度使用して、パラメータと同じ名前の変数を再宣言すると、 SyntaxError例外がスローされます。もちろん、関数本体でlet使用すると変数の昇格は許可されません。

// let を使用して変数を宣言します。let a = 100;
// 関数を定義する function fun(b) {
  // let b = 10; // 次のような例外がスローされます: SyntaxError: 識別子 'b' は既に宣言されています
  console.log(a); // 次の説明を含む例外がスローされます: ReferenceError: 初期化前に 'a' にアクセスできません
  a = 200 とします。
}
楽しい(20)

2. constキーワード

2.1 基本的な使い方

constキーワードは定数を宣言するために使用されます。const constによって生成された定数は、不変の let 変数として理解できます。ここでは、const キーワードが let キーワードのすべての特性を持っているため、元の基礎に不変の特性が追加されています。

いわゆる定数は初期化後は不変であり、宣言時に初期化する必要があります。サンプルコードは次のとおりです。

定数a = 2
a = 3 // 例外をスローします const b // 初期化されていないため例外をスローします

ただし、 constを使用してオブジェクトまたは配列を初期化すると、その内部の値を変更でき、エラーは報告されません。サンプルコードは次のとおりです。

定数arr = []
ar[0] = 100 
console.log(arr) // [100]
定数オブジェクト = {}
obj.name = '一碗の周'
console.log(obj) // {name: "Yiwan Zhou"}

この問題の原因は、const キーワードが実際に保証するのは変数の値を変更できないということではなく、変数が指すメモリアドレスを変更できないということだからです。String、 Number 、 Booleanなどの単純なString型の場合、これらの値は変数が指すメモリアドレスに格納されるため、2 度目に変更することはできません。

しかし、複合データ型、主にArrayやObjectの場合、変数が指すメモリアドレスにはポインタが格納されるだけです。 Const では、このポインタが指すメモリアドレスが固定であることしか保証できません。指すメモリアドレスに格納されているデータ構造が可変であるかどうかについては、まったく制御できません。

実際の開発では、var キーワードの使用を避け、代わりにconstキーワードを使用します。変数を使用する必要がある場合は、let キーワードを使用します。

JavaScript ESの新機能、letとconstキーワードについての記事はこれで終わりです。ESの新機能についてさらに詳しく知りたい方は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません: