Einführung in var, let, const, Bereich auf Blockebene und temporäre Totzone in ES6

Dieser Artikel bietet Ihnen eine Einführung in Var, Let, Const, Blockebene und temporäre Totzone in ES6. Ich hoffe, er wird Ihnen helfen.

var

Syntax

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

Verwenden Sie

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

var-Variablenförderung

Variablen, die mit var deklariert wurden, werden zur Funktion hochgestuft

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

obiger Code entspricht der

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]];

bei Verwendung von

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

löst

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

nicht mehr aus

Hinweis: Verwenden Sie schätzungsweise babel, um den Code zu übersetzen, und stellen Sie fest, dass nur let zu var wird, sodass der Code nach der Verwendung von babel zum Escape immer noch verbessert wird

Kann nicht wiederholt deklariert werden

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

const

Sprache

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

Verwendung

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

Ein Wert, der nicht weggelassen werden kann

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

Kann nicht wiederholt zugewiesen werden

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

Änderbare Referenz

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

Bereich auf Blockebene

Der Bereich auf Blockebene ist die nützlichste Funktion, die mit let und const in der kommt vorherige js, der Umfang von js ist Funktionsebene, was mehrere berüchtigte Probleme mit sich bringt:

Versehentlich geänderter Wert

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

kann durch die Verwendung von let

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

Das Böse vermieden werden for-Schleife und Klickereignis

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

Wenn Sie auf das obige klicken, wird, egal auf welches Sie klicken, nur Item 5 is clicked. angezeigt. Obwohl Schließungen zur Lösung des Problems verwendet werden können, gibt es eine bessere Lösung Lösung jetzt.

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);
}

Die Bereichsregeln sind sehr einfach innerhalb des

{}-Blocks, einschließlich if, else, while, class , do...while, {}, function

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

for Verwenden Sie let, um einen Anfangsfaktor in der Schleife zu deklarieren, der in jeder Schleife einen neuen Bereich darstellt

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

switchNur ein Bereich

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

Temporal Dead Zone-Temporal Dead Zone-TDZ

Mit der Einführung von let und const wurde auch das Konzept der temporären Dead Zone eingeführt. Wenn Sie var innerhalb des Gültigkeitsbereichs (Funktionsbereichs) verwenden und auf eine Variable zugreifen, ohne var zum Deklarieren zu verwenden, werden Sie undefiniert. Wenn Sie jedoch let innerhalb des Bereichs (Bereichs auf Blockebene) verwenden und auf eine Variable zugreifen, bevor Sie sie zum Deklarieren verwenden, erhalten Sie einen ReferenceError. Vom Beginn des Bereichs bis zur let-Anweisung liegt ein vorübergehender Fehler vor Zone. .

{
 console.log(a) // Uncaught ReferenceError: a is not defined
 console.log(b) // Uncaught ReferenceError: b is not defined
 console.log(c) // undefined
 // 暂存死区
 let a =1
 const b=2
 var c=3
}

Hinweis: Schätzen Sie, verwenden Sie Babel, um den Code zu übersetzen, und finden Sie heraus, dass nur let zu var wird, sodass es möglicherweise keine vorübergehende tote Zone gibt, nachdem Sie mit babel entkommen sind

Das obige ist der detaillierte Inhalt vonEinführung in var, let, const, Bereich auf Blockebene und temporäre Totzone in ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!