Home > Article > Web Front-end > Introduction to var, let, const, block-level scope and temporary Zenless Zone Zero in ES6
This article brings you an introduction to var, let, const, block-level scope and temporary dead zone in ES6. It has certain reference value. Friends in need can refer to it. I hope it will help You helped.
Syntax
var varname1 [= value1 [, varname2 [, varname3 ... [, varnameN]]]];
Use
var a, b=2 // 声明多个变量,可以赋值,也可以不赋值 a=1 // 先声明,再赋值
var variable promotion
Variables declared using var will be promoted to the function Top
console.log(a) // undefined var a =2 console.log(a) // 2 console.log(b) //Uncaught ReferenceError: b is not defined...
The above code is equivalent to
var a console.log(a) // undefined a=2 console.log(a) // 2 console.log(b) //Uncaught ReferenceError: b is not defined...
Syntax
let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];
Use
let a, b = 2 // 声明多个变量,赋值不赋值无所谓 a = 2 // 声明之后再赋值
No longer improves
console.log(a) // Uncaught ReferenceError: a is not defined... let a=1
Note: Guess, use babel
to translate the code and find that let
becomes var
, so use babel
The code after escaping will still be improved
Cannot repeat declaration
let a=1 let a=2 // Uncaught SyntaxError: Identifier 'a' has already been declared
Language
const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];
Use
const a=1, b=2 // 不能省略的值
Values that cannot be omitted
const c // Uncaught SyntaxError: Missing initializer in const declaration
Cannot be assigned repeatedly
const d=4 d=5 // Uncaught TypeError: Assignment to constant variable.
References that can be modified
const e=[] e[0]=0 console.log(e) //[0]
Block-level scope is followed The most useful features come from let and const. In the previous js, the scope of js was function level, which caused several notorious problems:
Accidentally modified values
function varTest() { var x = 1; if (true) { var x = 2; // 同样的变量! console.log(x); // 2 } console.log(x); // 2 }
You can use let
to avoid
function letTest() { let x = 1; if (true) { let x = 2; // 不同的变量 console.log(x); // 2 } console.log(x); // 1 }
the evil for loop and click event
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
If you click on the above, no matter which one is clicked, everything will be displayed YesItem 5 is clicked.
, although it can be solved using closures, but now there is a better solution
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); }
{ }
forms a scope within the block, including if
, else
, while
, class
, do.. .while
, {}
, function
{ const f=6 } console.log(f) // Uncaught ReferenceError: f is not defined
for
use let
to declare an initial factor in the loop , the factor is a new scope in each cycle
for (let i = 0; i < 10; i++) { console.log(i); } console.log(i) // Uncaught ReferenceError: i is not defined
switch
There is only one scope
switch (x) { case 0: let foo; break; case 1: let foo; break; } // Uncaught SyntaxError: Identifier 'foo' has already been declared
With the introduction of let and const, the concept of temporary dead zone was also introduced. When using var, within the scope (function scope), if you access a variable without using var to declare it, you will get undefined. But if you use let, within the scope (block-level scope), if you access a variable before using let to declare it, you will get a ReferenceError. From the beginning of the scope to the let statement, there is a temporary dead 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 }
Note: Guess, use babel to translate the code and find that let
becomes var
, so use babel
There may be no temporary dead zone after escaping
The above is the detailed content of Introduction to var, let, const, block-level scope and temporary Zenless Zone Zero in ES6. For more information, please follow other related articles on the PHP Chinese website!