Introduction à var, let, const, portée au niveau du bloc et zone morte temporaire dans ES6

Cet article vous présente une introduction à var, let, const, à la portée au niveau du bloc et à la zone morte temporaire dans ES6. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

var

Syntaxe

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

Utiliser

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

var variable promotion

Les variables déclarées à l'aide de var seront augmentées à le haut de la fonction

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

Le code ci-dessus est équivalent à

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

0x002 let

syntaxe

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

en utilisant

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

n'est plus amélioré

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

Remarque : devinez, utilisez babel pour traduire le code et constatez que let devient var, donc use babelLe code échappé sera toujours amélioré

Ne peut pas être déclaré à plusieurs reprises

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

const

Langue

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

Utiliser

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

Valeurs qui ne peuvent être omises

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

Ne peuvent pas être attribuées à plusieurs reprises

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

Références modifiables

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

Portée au niveau du bloc

La portée au niveau du bloc est la fonctionnalité la plus utile fournie avec let et const. Dans le js précédent, la portée de js était au niveau de la fonction, ce qui causait plusieurs problèmes notoires :

Les valeurs modifiées accidentellement

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

peuvent être utilisées

pour éviter le let

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

le mal des boucles et des événements de clic

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

Si vous cliquez sur ci-dessus, peu importe sur lequel vous cliquez, celui affiché est

Bien qu'il puisse être résolu en utilisant des fermetures, il existe maintenant une meilleure solution Item 5 is clicked.

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

Les règles de portée sont très simples

.

, comprenant

, {}, if, else, while, class, do...while{}function

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

Utilisez

dans une boucle pour déclarer un facteur initial, qui est une nouvelle portée dans chaque boucle forlet

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

Il n'y a qu'une seule portée

switch

Temporal Dead Zone-TDZ

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

Avec l'introduction de let et const, le concept de zone morte temporaire a également été introduit. Lorsque vous utilisez var, dans la portée (portée de la fonction), si vous accédez à une variable sans utiliser var pour la déclarer, vous obtiendrez un élément indéfini. Mais si vous utilisez let, dans la portée (portée au niveau du bloc), si vous accédez à une variable avant d'utiliser let pour la déclarer, vous obtiendrez une ReferenceError. Du début de la portée à l'instruction let, il y a une mort temporaire. 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
}

Remarque :

En guise de supposition, j'ai utilisé Babel pour traduire le code et j'ai découvert que est devenu , donc il se peut qu'il n'y ait pas de cache temporaire après l'évasion avec letZone Mortevar

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!