Heim  >  Artikel  >  Web-Frontend  >  Was ist der Unterschied zwischen let und var in es6?

Was ist der Unterschied zwischen let und var in es6?

青灯夜游
青灯夜游Original
2022-04-15 19:42:262121Durchsuche

Unterschiede: 1. let-Variablen haben einen Gültigkeitsbereich auf Blockebene, während var-Variablen keinen Gültigkeitsbereich auf Blockebene haben. 2. var-Variablen haben eine Variablenheraufstufung (keine temporären Totzoneneinschränkungen) und können zuerst verwendet und dann deklariert werden, während let Variablen existieren nicht. Variablenheraufstufung (mit temporären Totzoneneinschränkungen) muss vor der Verwendung deklariert werden. 3. Let-Variablen können nicht wiederholt deklariert werden, var-Variablen jedoch schon.

Was ist der Unterschied zwischen let und var in es6?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

ES6 fügt einen neuen let-Befehl zum Deklarieren lokaler Variablen hinzu. Seine Verwendung ähnelt der von var, aber die deklarierte Variable ist nur innerhalb des Codeblocks gültig, in dem sich der Befehl let befindet (Bereich auf Blockebene), und es gibt eine temporäre Variable Einschränkungen der Totzone. 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

Werfen wir zunächst einen Blick auf die häufigsten Interviewfragen zur Variablenverbesserung von var:

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

Wenn Sie Schwierigkeiten haben, die oben genannten Fragen zu verstehen, werfen Sie bitte einen systematischen Blick auf das kostenlose JS-Video-Tutorial für Fortgeschrittene von Lao Ma .

ES6 kann let verwenden, um Bereichsvariablen auf Blockebene zu definieren

Vor ES6 haben wir alle var zum Deklarieren von Variablen verwendet, und JS hatte nur einen Funktionsbereich und einen globalen Bereich, keinen Bereich auf Blockebene, also {} kann den Zugriffsbereich der von var deklarierten Variablen nicht einschränken.
Zum Beispiel:

rrreeeES6s neues let kann Variablen auf Blockebene deklarieren. rrreeelet-eindeutige Anwendung mit for-Schleife

🎜🎜let eignet sich sehr gut für den Bereich auf Blockebene innerhalb der for-Schleife. Der for-Schleifenkörper in JS ist etwas Besonderes. Jede Ausführung ist ein neuer unabhängiger Blockbereich. Nachdem die mit let deklarierten Variablen an den for-Schleifenkörper übergeben wurden, ändern sie sich nicht und werden von der Außenwelt nicht beeinflusst. Schauen Sie sich eine häufige Frage im Vorstellungsgespräch an: 🎜rrreee🎜Wenn var in let geändert wird. Aussage: 🎜rrreee🎜🎜🎜let hat keine variable Beförderung und keine temporäre Totzone🎜🎜🎜🎜 Es gibt keine Variablenheraufstufung für Variablen, die mit let deklariert wurden. Und es ist erforderlich, dass die Variable nicht verwendet werden kann, bis die Deklarationsanweisung let ausgeführt wird, andernfalls wird der Fehler Uncaught ReferenceError gemeldet. 🎜🎜Zum Beispiel: 🎜rrreee🎜🎜ES6 legt klar fest, dass, wenn in einem Block let- und const-Befehle vorhanden sind, die von diesen Befehlen in diesem Block deklarierten Variablen von Anfang an einen geschlossenen Bereich bilden. Jede Verwendung dieser Variablen vor der Deklaration führt zu einem Fehler.
Kurz gesagt, innerhalb des Codeblocks ist die Variable erst verfügbar, wenn sie mit dem let-Befehl deklariert wird. Syntaktisch wird dies als „temporäre Totzone“ (TDZ) bezeichnet. 🎜🎜🎜🎜🎜let-Variablen können nicht wiederholt deklariert werden. 🎜🎜🎜🎜let erlaubt keine wiederholte Deklaration derselben Variablen im selben Bereich. Andernfalls wird ein Fehler gemeldet: Uncaught SyntaxError: Identifier 'XXX' has been been deklariert🎜🎜Zum Beispiel: 🎜rrreee🎜🎜🎜Zusammenfassung🎜🎜🎜🎜ES6's let ermöglicht es js, wirklich Block- zu haben. Dies ist ein sichererer und standardisierterer Pfad, der zwar viele Einschränkungen mit sich bringt, uns jedoch eine sicherere Verwendung und das Schreiben von Code ermöglicht. 🎜🎜【Verwandte Empfehlungen: 🎜Javascript-Video-Tutorial🎜, 🎜Web-Frontend🎜】🎜

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen let und var in es6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn