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