Introduction à var, let, const, portée au niveau du bloc et zone morte temporaire dans ES6-js tutoriel-php.cn

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

不言

Libérer： 2018-11-14 15:29:41

avant

2669 Les gens l'ont consulté

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

Copier après la connexion

Utiliser

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

Copier après la connexion

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...

Copier après la connexion

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...

Copier après la connexion

0x002 let

syntaxe

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

Copier après la connexion

en utilisant

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

Copier après la connexion

n'est plus amélioré

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

Copier après la connexion

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

Copier après la connexion

const

Langue

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

Copier après la connexion

Utiliser

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

Copier après la connexion

Valeurs qui ne peuvent être omises

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

Copier après la connexion

Ne peuvent pas être attribuées à plusieurs reprises

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

Copier après la connexion

Références modifiables

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

Copier après la connexion

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
}

Copier après la connexion

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
}

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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
}

Copier après la connexion

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!