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

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、 NumberBooleanなどの単純なString型の場合、これらの値は変数が指すメモリ アドレスに格納されるため、2 度目に変更することはできません。

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

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

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

以下もご興味があるかもしれません:
  • JavaScript es6 における var、let、const の違いの詳細な説明
  • JavaScript の ES6 仕様における let と const の使い方と違い
  • JavaScript の var と ES6 仕様の let と const の違いと使い方を詳しく解説
  • JavaScript ES6 の const、let、var の詳細な比較
  • JS 変数の var 定義と非 var 定義の違いと、es6 の let コマンドと const コマンドの違い

<<:  クラウド CentOS で Docker リモート サービス リンクを有効にするための実装手順

>>:  IE、Firefox、Chromeブラウザではスペースの表示が異なります

推薦する

Vue はカードフリップカルーセル表示を実装します

Vueカードのフリップカルーセル表示、フリップ時にデータを切り替えながら、参考までに、具体的な内容は...

Docker 実行オプションを使用して Dockerfile の設定を上書きする

通常は、最初に Dockerfile ファイルを定義し、次に docker build コマンドを使...

Vue+WebSocket ページでの長時間接続のリアルタイム更新

最近、Vue プロジェクトではデータをリアルタイムで更新する必要があります。折れ線グラフは 1 秒ご...

MySQL 全文あいまい検索 MATCH AGAINST メソッドの例

MySQL 4.x 以降では、全文検索 MATCH ... AGAINST モード (大文字と小文字...

IIS7 IIS8 リバースプロキシルールの記述、インストール、構成方法

目的: ステーションAをステーションBのセカンダリディレクトリとして扱うのように: http://w...

SELinux 入門

カーネル 2.6 の時代には、アクセス制御セキュリティ ポリシーのメカニズムを提供するために新しいセ...

JS で async await をエレガントに使用する方法

目次jQuery の $.ajax Webpack時代の始まり約束について深く考えるネストをなくすj...

MySQLがlocalhost経由でデータベースに接続できない問題に対する完璧な解決策

問題:あるサーバー上の PHP プログラムは、localhost アドレス経由でデータベースに接続で...

div タグ内の要素の margin-top が無効である場合の解決策

タイトル通りです。その質問は非常に奇妙です。要素の親タグはdivで、幅や高さなどの属性は設定されてい...

ブラウザタブの左端に表示されるウェブサイトのアイコンを設定します

この文の目的は何ですか?コードをコピーコードは次のとおりです。 <link rel="...

ページキャッシュを無効にするいくつかの方法を共有する

本日、開発中に、顧客からページをキャッシュしないように要求される方法に遭遇しました。調べたところ、ペ...

MySQLデータベースでコマンドを自動補完する3つの方法

注意: 3 番目の方法は XSell でのみ使用され、finalsell では使用できません。方法1...

WeChatアプレットがテキストスクロールを実装

この記事の例では、WeChatアプレットでテキストスクロールを実装するための具体的なコードを参考まで...