ES6 シリーズの変数 let と const の宣言

この記事では、主に ES6 シリーズの宣言された変数 let と const について説明します。興味のある方はこの記事の内容を参照してください。

はじめに

コンセプト

ES6 の最初のバージョンは 2015 年 6 月にリリースされ、正式版となります。名前は「ECMAScript 2015 Standard」（略してES2015）です。 ES6 は歴史的な用語であると同時に一般的な用語でもあり、ES2015、ES2016、ES2017 などを含むバージョン 5.1 以降の JavaScript の次世代標準を意味します。一方、ES2015 は正式名称であり、特にリリースされた言語の正式バージョンを指します。その年の標準。
主要なブラウザは ES6 をサポートしています: kangax

Babel

Babel は、既存の環境で実行できるように ES6 コードを ES5 コードに変換できる、広く使用されている ES6 トランスコーダです。
Babel の設定ファイルは .babelrc で、プロジェクトのルート ディレクトリに保存されます。 Babel を使用する最初のステップは、このファイルを構成することです。

変数の宣言

ES5 には変数を宣言する方法が 2 つしかありません: var コマンドと function コマンドです。ES6 には let、const、import、class コマンドが追加されています。したがって、ES6 には変数を宣言する方法が合計 6 つあります。

ES5 では、トップレベル オブジェクトのプロパティはグローバル変数に相当します。これを変更するために、ES6 では、互換性を維持するために、var コマンドと function コマンドによって宣言されたグローバル変数は引き続きトップレベル オブジェクトの属性であると規定しています。 letコマンド、constコマンド、classコマンドで宣言された、最上位オブジェクトに属さないプロパティ。言い換えれば、ES6 以降、グローバル変数はトップレベル オブジェクトのプロパティから徐々に切り離されることになります。

let

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

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

繰り返しの宣言を許可しません

let は、同じスコープ内で同じ変数の繰り返しの宣言を許可しません。

// 报错
function func() {
  let a = 10;
  var a = 1;
}

function func(arg) {
  let arg; // 报错
}

function func(arg) {
  {
    let arg; // 不报错
  }
}

ブロックレベルのスコープ

• ES6 では、ブロックレベルのスコープを任意にネストできます。

• 内部スコープは、外部スコープにある同じ名前の変数を定義できます。

• 外側のスコープは内側のスコープの変数を読み取ることができません。

{{{{
  {let insane = 'Hello World'
   {let insane = 'Hello World'}
  }
  console.log(insane); // 报错
}}}};

ブロックレベルのスコープと関数宣言

• ES5では、関数はトップレベルのスコープと関数スコープでのみ宣言でき、ブロックレベルのスコープでは宣言できないと規定されています。

• ES6 では、ブロックレベルのスコープでは、関数宣言ステートメントは let のように動作し、ブロックレベルのスコープの外では参照できないと規定されています。

環境によって引き起こされる動作があまりにも異なることを考慮すると、ブロックレベルのスコープで関数を宣言することは避けるべきです。本当に必要な場合は、関数宣言文ではなく関数式として記述する必要があります。

変数の昇格はありません

let コマンドで宣言された変数は、宣言後に使用する必要があります。そうしないと、エラーが報告されます。

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

一時的なデッドゾーン

let コマンドがブロックレベルのスコープに存在する限り、宣言された変数はこの領域に「バインド」され、外部の影響を受けなくなります。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

コード ブロックでは、変数は let コマンドを使用して宣言されるまで使用できません。文法的には、これは「一時的なデッド ゾーン」(TDZ) と呼ばれます。

const

const は読み取り専用の定数を宣言します。定数の値は、一度宣言すると変更できません。

• は、それが宣言されているブロックレベルのスコープ内でのみ有効です。

• const コマンドによって宣言された定数も昇格されません。また、一時的なデッド ゾーンがあり、宣言された位置の後にのみ使用できます。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

const の本質は、変数の値が変更できないのではなく、変数が指すメモリ アドレスが変更できないことを実際に保証します。単純なタイプのデータ (数値、文字列、ブール値) の場合、値は変数が指すメモリ アドレスに格納されるため、定数と同等です。ただし、複合型データ (主にオブジェクトと配列) の場合、変数が指すメモリ アドレスはポインタを格納するだけです。このポインタが変数であるかどうかについては、完全に保証されます。もう制御できません。したがって、オブジェクトを定数として宣言する場合は、細心の注意を払う必要があります。

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

本当にオブジェクトをフリーズしたい場合は、Object.freeze メソッドを使用する必要があります。

りー

以上がES6 シリーズの変数 let と const の宣言の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。