ES6 の var、let、const、ブロックレベルのスコープと一時的なデッドゾーンの概要-jsチュートリアル-php.cn

ES6 の var、let、const、ブロックレベルのスコープと一時的なデッドゾーンの概要

不言

リリース： 2018-11-14 15:29:41

転載

2670 人が閲覧しました

この記事では、ES6 の var、let、const、ブロックレベルのスコープと一時的なデッドゾーンについて説明します。必要な方は参考にしていただければ幸いです。

var

構文

var varname1 [= value1 [, varname2 [, varname3 ... [, varnameN]]]];

ログイン後にコピー

使用

var a, b=2 // 声明多个变量，可以赋值，也可以不赋值
a=1 // 先声明，再赋值

ログイン後にコピー

var 変数プロモーション

var を使用して宣言された変数は、関数 Top# にプロモートされます。 ##

console.log(a) // undefined
var a =2  
console.log(a) // 2
console.log(b) //Uncaught ReferenceError: b is not defined...

ログイン後にコピー

上記のコードは

var a
console.log(a) // undefined
a=2
console.log(a) // 2
console.log(b) //Uncaught ReferenceError: b is not defined...

ログイン後にコピー

0x002 let

Syntax

let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];

ログイン後にコピー

Use

let a, b = 2 // 声明多个变量，赋值不赋值无所谓
a = 2 // 声明之后再赋值

ログイン後にコピー

もう改善されません

console.log(a) // Uncaught ReferenceError: a is not defined...
let a=1

ログイン後にコピー

と同等です

注: そうですね、babel を使用してコードを翻訳すると、let が var になることがわかります。したがって、 babel を使用してください。 エスケープ後のコードはまだ改善されます

宣言を繰り返すことはできません

let a=1
let a=2 // Uncaught SyntaxError: Identifier 'a' has already been declared

ログイン後にコピー

const

Language

const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];

ログイン後にコピー

Use

const a=1, b=2 // 不能省略的值

ログイン後にコピー

省略できない値

const c // Uncaught SyntaxError: Missing initializer in const declaration

ログイン後にコピー

繰り返し代入できない

const d=4
d=5 // Uncaught TypeError: Assignment to constant variable.

ログイン後にコピー

変更できる参照

const e=[]
e[0]=0
console.log(e) //[0]

ログイン後にコピー

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

ブロックレベル最も便利な機能は let と const にあります。以前の js では、js のスコープは関数レベルであり、いくつかの悪名高い問題を引き起こしていました。

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // 同样的变量!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

ログイン後にコピー

の邪悪な for ループとクリックイベントを回避するには、

let

を使用してください。

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // 不同的变量
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

ログイン後にコピー

上記をクリックすると、どれをクリックしてもすべてが表示されます。はい項目 5 がクリックされます。これはクロージャを使用して解決できますが、より良い解決策があります

var list = document.getElementById("list");

for (var i = 0; i < 5; i++) {
  var item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));

  item.onclick = function (ev) {
    console.log("Item " +i + " is clicked.");
  };
  list.appendChild(item);
}
console.log(i) // 5

ログイン後にコピー

スコープルールは非常に単純です

{ }

は、ブロック内のスコープを形成します。これには、

if

、

else、while、class、do..が含まれます。 .while, {}, function

let list = document.getElementById("list");

for (let i = 0; i < 5; i++) {
  let item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));

  item.onclick = function (ev) {
    console.log("Item " +i + " is clicked.");
  };
  list.appendChild(item);
}

ログイン後にコピー

for let を使用して初期因子を宣言しますループ、因子は各サイクルの新しいスコープです

{
    const f=6
}
console.log(f) // Uncaught ReferenceError: f is not defined

ログイン後にコピー

switchスコープは 1 つだけです

for (let i = 0; i < 10; i++) {
  console.log(i);
}
console.log(i) // Uncaught ReferenceError: i is not defined

ログイン後にコピー

Temporal Dead Zone-Temporal Dead Zone-TDZ

let と const の導入に伴い、一時的なデッドゾーンの概念も導入されました。 var を使用する場合、スコープ (関数スコープ) 内で、var を使用して変数を宣言せずに変数にアクセスすると、未定義になります。ただし、スコープ (ブロックレベルのスコープ) 内で let を使用する場合、let を使用して変数を宣言する前に変数にアクセスすると、スコープの先頭から let ステートメントまで、一時的にデッド状態になります。ゾーン。。

switch (x) {
  case 0:
    let foo;
    break;
    
  case 1:
    let foo; 
    break;
}
// Uncaught SyntaxError: Identifier 'foo' has already been declared

ログイン後にコピー