Maison  >  Article  >  interface Web  >  Quelle est la différence entre let et var dans es6

Quelle est la différence entre let et var dans es6

青灯夜游
青灯夜游original
2022-04-15 19:42:262121parcourir

Différences : 1. les variables let ont une portée au niveau du bloc, tandis que les variables var n'ont pas de portée au niveau du bloc ; 2. les variables var ont une promotion de variable (pas de contraintes de zone morte temporaire) et peuvent être utilisées d'abord puis déclarées, tandis que let les variables n'existent pas. La promotion des variables (avec des contraintes de zone morte temporaires) doit être déclarée avant utilisation ; 3. Les variables Let ne peuvent pas être déclarées à plusieurs reprises, mais les variables var le peuvent.

Quelle est la différence entre let et var dans es6

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

ES6 ajoute une nouvelle commande let pour déclarer les variables locales. Son utilisation est similaire à var, mais la variable déclarée n'est valide que dans le bloc de code où se trouve la commande let (portée au niveau du bloc), et il existe une contraintes de zone morte. let命令,用来声明局部变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效(块级作用域),而且有暂时性死区的约束。

先看个var的常见变量提升的面试题目:

题目1:
var a = 99;            // 全局变量a
f();                   // f是函数,虽然定义在调用的后面,但是函数声明会提升到作用域的顶部。 
console.log(a);        // a=>99,  此时是全局变量的a
function f() {
  console.log(a);      // 当前的a变量是下面变量a声明提升后,默认值undefined
  var a = 10;
  console.log(a);      // a => 10
}

// 输出结果:
undefined
10
99

如果以上题目有理解困难的童鞋,请系统的看一下老马的免费JS高级视频教程。

ES6可以用let定义块级作用域变量

在ES6之前,我们都是用var来声明变量,而且JS只有函数作用域和全局作用域,没有块级作用域,所以{}限定不了var声明变量的访问范围。
例如:

{ 
  var i = 9;
} 
console.log(i);  // 9

ES6新增的let,可以声明块级作用域的变量。

{ 
  let i = 9;     // i变量只在 花括号内有效!!!
} 
console.log(i);  // Uncaught ReferenceError: i is not defined

let 配合for循环的独特应用

let非常适合用于 for循环内部的块级作用域。JS中的for循环体比较特殊,每次执行都是一个全新的独立的块作用域,用let声明的变量传入到 for循环体的作用域后,不会发生改变,不受外界的影响。看一个常见的面试题目:

for (var i = 0; i <10; i++) {  
  setTimeout(function() {  // 同步注册回调函数到 异步的 宏任务队列。
    console.log(i);        // 执行此代码时,同步代码for循环已经执行完成
  }, 0);
}
// 输出结果
10   共10个
// 这里面的知识点: JS的事件循环机制,setTimeout的机制等

如果把 var改成 let声明:

// i虽然在全局作用域声明,但是在for循环体局部作用域中使用的时候,变量会被固定,不受外界干扰。
for (let i = 0; i < 10; i++) { 
  setTimeout(function() {
    console.log(i);    //  i 是循环体内局部作用域,不受外界影响。
  }, 0);
}
// 输出结果:
0  1  2  3  4  5  6  7  8 9

let没有变量提升与暂时性死区

let声明的变量,不存在变量提升。而且要求必须 等let声明语句执行完之后,变量才能使用,不然会报Uncaught ReferenceError错误。

例如:

console.log(aicoder);    // 错误:Uncaught ReferenceError ...
let aicoder = &#39;aicoder.com&#39;;
// 这里就可以安全使用aicoder

ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。
总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。

let变量不能重复声明

let不允许在相同作用域内,重复声明同一个变量。否则报错:Uncaught SyntaxError: Identifier 'XXX' has already been declared

Tout d'abord, jetons un coup d'œil aux questions courantes d'entretien d'amélioration des variables de var :

let a = 0;
let a = &#39;sss&#39;;
// Uncaught SyntaxError: Identifier &#39;a&#39; has already been declared

Si vous avez des difficultés à comprendre les questions ci-dessus, veuillez jeter un coup d'œil systématique au didacticiel vidéo avancé JS gratuit de Lao Ma. .

ES6 peut utiliser let pour définir des variables de portée au niveau du bloc

Avant ES6, nous utilisions tous var pour déclarer des variables, et JS n'avait qu'une portée de fonction et une portée globale, pas une portée au niveau du bloc, donc {} ne peut pas limiter la portée d'accès aux variables déclarées par var.
Par exemple : le nouveau let de

rrreeeES6 peut déclarer des variables au niveau du bloc. rrreeelet application unique avec boucle for

🎜🎜let est très approprié pour la portée au niveau du bloc à l'intérieur de la boucle for. Le corps de la boucle for dans JS est spécial. Chaque exécution est une nouvelle portée de bloc indépendante une fois que les variables déclarées avec let sont passées dans la portée du corps de la boucle for, elles ne changeront pas et ne seront pas affectées par le monde extérieur. Regardez une question d'entretien courante : 🎜rrreee🎜Si vous remplacez la déclaration var par let : 🎜rrreee🎜🎜🎜let n'a pas de promotion variable ni de zone morte temporaire🎜🎜🎜🎜 Il n'y a pas de promotion de variable pour les variables déclarées avec let. Et il est nécessaire que la variable ne puisse pas être utilisée jusqu'à ce que l'instruction de déclaration let soit exécutée, sinon l'erreur Uncaught ReferenceError sera signalée. 🎜🎜Par exemple : 🎜rrreee🎜🎜ES6 stipule clairement que s'il y a des commandes let et const dans un bloc, les variables déclarées par ces commandes dans ce bloc forment dès le début une portée fermée. Toute utilisation de ces variables avant déclaration entraînera une erreur.
En bref, au sein du bloc de code, la variable n'est disponible que lorsqu'elle est déclarée à l'aide de la commande let. Syntaxiquement, cela s'appelle la « zone morte temporaire » (TDZ). 🎜🎜🎜🎜🎜les variables let ne peuvent pas être déclarées à plusieurs reprises🎜🎜🎜🎜let n'autorise pas la déclaration répétée de la même variable dans la même portée. Sinon, une erreur sera signalée : Uncaught SyntaxError : Identifier 'XXX' has déjà été déclaré🎜🎜Par exemple : 🎜rrreee🎜🎜🎜Summary🎜🎜🎜🎜Le let d'ES6 permet à js d'avoir véritablement des blocages. niveau de portée, qui est également une direction pour C'est un chemin plus sûr et plus standardisé. Bien qu'il ajoute de nombreuses contraintes, tout cela vise à nous permettre d'utiliser et d'écrire du code de manière plus sûre. 🎜🎜【Recommandations associées : 🎜tutoriel vidéo javascript🎜, 🎜front-end web🎜】🎜

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn