JavaScript es6 における var、let、const の違いの詳細な説明

JavaScript es6 における var、let、const の違いの詳細な説明

まず、よくある質問は、ECMAScript と JavaScript の関係は何ですか?

ECMAScript は国際的に標準化されたスクリプト言語です。 JavaScript は、ECMAScript、DOM、BOM で構成されています。簡単に言えば、ECMAScript は JavaScript の言語仕様であり、JavaScript は ECMAScript の実装と拡張です。

2011 年に ECMAScript バージョン 5.1 がリリースされました。私たちのほとんどは以前は ES5 を使用していました。

2015年6月にECMAScript 6が正式に承認され、国際標準となりました。

1. ブロックスコープ {}

ES5 のスコープは、グローバル スコープと関数スコープです。ブロックスコープの概念はありません。

ブロックスコープは ES6 で追加されました。ブロックスコープは { } に含まれ、if 文と for 文内の { } もブロックスコープに属します。

<script type="text/javascript">
	
    {
        var a = 1;
        コンソールログ(a); // 1
    }
    コンソールログ(a); // 1
    // var で定義された変数はブロックスコープを越えてアクセスできます。
 
    (関数A() {
        var b = 2;
        コンソールログ(b); // 2
    })();
    // console.log(b); // エラー、
    // var で定義された変数は関数スコープを越えてアクセスできないことがわかります if(true) {
        var c = 3;
    }
    コンソール.log(c); // 3
    (var i = 0; i < 4; i++) {
        var d = 5;
    };
    console.log(i); // 4 (ループの終了時に i はすでに 4 なので、ここでも i は 4 です)
    コンソールログ(d); // 5
    // if 文および for 文内で var で定義された変数は外部からアクセスできます。
    // if 文と for 文は関数スコープではなくブロックスコープに属していることがわかります。
 
</スクリプト>

2. var、let、constの違い

  1. var によって定義された変数にはブロックの概念がなく、ブロック間でアクセスできますが、関数間ではアクセスできません。
  2. let によって定義された変数には、ブロックスコープ内でのみアクセスでき、ブロックや関数間でアクセスすることはできません。
  3. const は定数を定義するために使用されます。定数は使用時に初期化する (つまり、値を割り当てる) 必要があり、ブロック スコープ内でのみアクセスでき、変更することはできません。
<script type="text/javascript">
    // ブロックスコープ {
        var a = 1;
        b = 2 とします。
        定数 c = 3;
        // c = 4; // エラー var aa;
        bb とします。
        // const cc; // エラー console.log(a); // 1
        コンソールログ(b); // 2
        コンソール.log(c); // 3
        console.log(aa); // 未定義
        console.log(bb); // 未定義
    }
    コンソールログ(a); // 1
    // console.log(b); // エラー // console.log(c); // エラー // 関数スコープ (関数 A() {
        var d = 5;
        e = 6 とします。
        定数f = 7;
        コンソールログ(d); // 5
        コンソールログ(e); // 6  
        コンソールログ(f); // 7 
 
    })();
    // console.log(d); // エラー // console.log(e); // エラー // console.log(f); // エラー</script>

3. const で定義されたオブジェクトのプロパティは変更できますか?

これは今日面接中に遭遇した質問です。const は変更できないと書いてあったので、すぐに「いいえ」と答えました。しかし、実際にテストしてみると間違いであることがわかったので、ここに記録しておきます。

 定数人 = {
     名前: 'jiuke',
     性別:「男性」
 }
 
 person.name = 'テスト'
 
 console.log(人.名前)

上記のコードを実行すると、 person オブジェクトの name 属性が実際に変更されていることがわかります。何が起こっているのでしょうか?

オブジェクトは参照型であるため、オブジェクトへのポインタのみが直接格納されます。つまり、const はポインタが変更されないことのみを保証します。オブジェクトのプロパティを変更しても、オブジェクトのポインタは変更されないため、変更は許可されます。つまり、const で定義された参照型のポインタが変更されない限り、他の変更はすべて許可されます。

次に、ポインターを変更して新しいオブジェクトをポイントできるようにしようとすると、エラーが返されます。

定数人 = {
   名前: 'jiuke',
   性別:「男性」
}
 
人 = {
   名前: 'テスト',
   性別:「男性」
}

JavaScript es6 の var、let、const の違いに関する詳細なケース分析に関するこの記事はこれで終わりです。JavaScript es6 の var、let、const の違いについてさらに詳しく知りたい場合は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript における var、let、const の違いの詳細な説明
  • JavaScriptのvar let constの違いは何ですか?
  • JavaScript の var と ES6 仕様の let と const の違いと使い方を詳しく解説
  • JavaScript の let、var、const キーワードの違いを理解する
  • JavaScript ES6 構文における let、const、var の違い

<<:  Linux でのマルチスレッドおよびマルチプロセス クラッシュのシミュレーションに関する簡単な説明

>>:  MySQL の完全バックアップとクイックリカバリ方法

推薦する

jsはクリックしてカードを切り替える機能を実現します

この記事の例では、クリックしてカードを切り替える機能を実現するためのjsの具体的なコードを共有してい...

Vue は Websocket カスタマー サービス チャット機能を実装します

この記事では主に基本的なチャットの実装方法を紹介します。今後は絵文字や写真のアップロードなどの機能も...

Linux 上の Tomcat で MySQL にデータを挿入するときに中国語の文字化けが発生する問題を解決する

1. 問題Windows 上の Eclipse を使用して開発されたプロジェクトは Windows ...

@Font-face の基本的な使い方と、すべてのブラウザと互換性を持たせる方法

@Font-face 基本紹介: @font-face は、Web ページにカスタム フォントを表示...

HTML 中国語文字エンコード標準の概要

HTML では、Web ページで使用されるエンコーディングを指定する必要があります。一般的な指定方法...

Ubuntu 18.04はルート権限を取得し、ルートユーザーとしてログインします

事前に書いておきます:次の手順では、ターミナルにコマンドを入力する必要があります。コンピューターでブ...

MySQLからOracleへのリアルタイム同期ソリューションの詳細な説明

1 要件の概要MySQL5.6本番データベースの複数のテーブルのデータは、Oracle11gデータウ...

MySQL の日付型の単一行関数コードの詳細な説明

MySQL の日付型単一行関数: CURDATE()またはCURRENT_DATE()は現在の日付を...

CSS スタイル分類入門(基礎知識)

CSSスタイルの分類1. 内部スタイル ---- インラインスタイルスタイルタグの使用 <ス...

異なるページ間のJavaScriptデータ転送(URLパラメータ取得)

Web ページでは、あるページに情報を入力すると、別のページにジャンプし、入力した情報が別のページ...

カルーセル例の JavaScript 実装

この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...

フレックスレイアウトが子要素によって引き伸ばされたときに、コンテンツをコンテナ内に保持する方法

モバイル デバイスでは、フレックス レイアウトが非常に便利です。デバイスの幅に応じてコンテナーの幅を...

Linux での UDP について学ぶ

目次1. UDPとLinuxの基礎の紹介2. 各機能の使い方1. ソケット機能の使用2. バインド機...

時刻を保存するために適切な MySQL の datetime 型を選択する方法

データベースを構築してプログラムを書くとき、日付と時刻の使用は避けられません。データベースには、ti...

MySql ログイン パスワードを忘れた場合とパスワードを忘れた場合の解決策

方法1: MySQL では、次のコマンド ラインで MySQL サーバーを起動することにより、アクセ...