隨著2015年6月 ECMAScript 6.0 發(fā)布以來，有幾個新的變量聲明方式進入前端開發(fā)者的視線，即 let、const、import 和 class 命令，而這些新的聲明方式之中有兩個容易和 var 混淆，那就是 let 和 const。
簡單介紹
-
let 的用法類似于 var，但是 let 只在所在的代碼塊內(nèi)有效，所以我們一般使用 let 替代 var。而 const 用來聲明常量。
image.png - 接下來我們根據(jù)這幾個方面來介紹 var、let和const的區(qū)別：變量提升、暫時性死區(qū)、重復(fù)聲明、初始值和作用域
一、變量提升
概述：變量可在聲明之前使用。
- 首先看這三段代碼
console.log(a);//正常運行，控制臺輸出 undefined
var a = 1;
console.log(b);//報錯，Uncaught ReferenceError: b is not defined
let b = 1;
console.log(c);//報錯，Uncaught ReferenceError: c is not defined
const c = 1;
總結(jié) ：var 命令經(jīng)常會發(fā)生變量提升現(xiàn)象，按照一般邏輯，變量應(yīng)該在聲明之后使用才對。為了糾正這個現(xiàn)象，ES6 規(guī)定 let 和 const 命令不發(fā)生變量提升，使用 let 和 const 命令聲明變量之前，該變量是不可用的。主要是為了減少運行時錯誤，防止變量聲明前就使用這個變量，從而導(dǎo)致意料之外的行為。
二 、暫時性死區(qū)
概述：如果在代碼塊中存在 let 或 const 命令，這個區(qū)塊對這些命令聲明的變量，從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量，就會報錯。
var tmp = 123;
if (true) {
tmp = 'abc';//報錯，Uncaught ReferenceError: tmp is not defined
let tmp;
}
- 這段代碼的原意是在 if 內(nèi)定義外部的 tmp 為 'abc'。但現(xiàn)實是，存在全局變量 tmp，但是塊級作用域內(nèi) let 又聲明了一個 tmp變量，導(dǎo)致后者被綁定在這個塊級作用域中，所以在 let 聲明變量前，對 tmp 賦值就報錯了
三、重復(fù)聲明
概述：指在相同作用域內(nèi)，重復(fù)聲明同一個變量。
- let 和const是不允許重復(fù)聲明的
function func(){
let a = 10;
const PI = 3.1415;
var a = 1;// 報錯，Uncaught SyntaxError: Identifier 'a' has already been declared
var PI = 3;// 報錯，Uncaught SyntaxError: Identifier 'PI' has already been declared
}
// 當(dāng)調(diào)用func()時報錯，Uncaught SyntaxError: Identifier 'a' has already been declared
function func(){
let a = 10;
const PI = 3.1415;
let a = 1;// 報錯，Uncaught SyntaxError: Identifier 'a' has already been declared
const PI = 3;// 報錯，Uncaught SyntaxError: Identifier 'PI' has already been declared
}
var是允許重復(fù)定義的，那這又會給我們帶來什么麻煩呢
var i = 10;
for(var i = 0;i < 5;i++){
console.log(i);
}
console.log(i);// 輸出 5
- 對于學(xué)習(xí)過靜態(tài)（類型）語言的人知道，這段代碼要是替換成 c 語言或其他靜態(tài)語言，輸出的結(jié)果應(yīng)該是 10。然而對于 javascript 來說，這段代碼的輸出結(jié)果是 5。因為 var 命令沒有塊級作用域，所以 for 循環(huán)括號內(nèi)的變量 i 會覆蓋外層 i，而且 var 允許重復(fù)聲明，所以這段代碼中 i 被聲明了兩次,i 的最終結(jié)果就被 for 循環(huán)的 i 給覆蓋了。
四、初始值
- 由于 const 聲明的是只讀的常量，一旦聲明，就必須立即初始化，聲明之后值不能改變
const PI = 3.1415;
PI = 3;// 報錯，Uncaught TypeError: Assignment to constant variable.
五、作用域
在 ES5 中只有全局作用域和函數(shù)作用域，沒有塊級作用域，這帶來很多不合理的場景。
- 第一種場景，內(nèi)層變量可能會覆蓋外層變量。
var tmp = new Date();//處于全局作用域
function f() {
console.log(tmp);//處于函數(shù)作用域
if (false) {
var tmp = 'hello world';
}
}
f(); // undefined
注：上面代碼的原意是，if代碼塊的外部使用外層的tmp變量，內(nèi)部使用內(nèi)層的tmp變量。
然而現(xiàn)實是在這段代碼中，function 內(nèi)部的2個 tmp 變量處在同一函數(shù)作用域，由于變量提升，導(dǎo)致函數(shù)作用域中的 tmp 覆蓋全局作用域中的 tmp，所以，f()輸出結(jié)果為undefined。
- 第二種場景，用來計數(shù)的循環(huán)變量泄露為全局變量（前面在重復(fù)聲明中提到的）
var i = 10;
for(var i = 0;i < 5;i++){
console.log(i);
}
console.log(i);// 輸出 5
上面代碼中，變量i只用來控制循環(huán)，但是循環(huán)結(jié)束后，它并沒有消失，泄露成了全局變量
