看過ES6代碼的小伙伴肯定已經發(fā)現，在ES6中聲明變量的方式多了兩種，分別是 let 和 const
在ES6之前，javascript并不像別的語言一樣有多重聲明變量的方式，所以我們只能夠使用 var ，但是現在我們有了更多的方式
那么 let 、 const 和 var 之間又有什么區(qū)別于聯系呢？別急，我們慢慢來看
var 命令與作用域
var
var 是我們最常用的一種聲明變量的方式，通常我們會這樣寫：
var a;
var b = 1;
var c = 'test';
也可以同時聲明多個變量，用逗號隔開：
var a,
b = 1,
c = 'test';
var 聲明的變量在全局環(huán)境下，會自動變成全局變量，而全局變量在瀏覽器中又是頂層對象 window 的一個屬性，這就很容易導致該變量污染我們的環(huán)境，比如我在 test1.js 中聲明了變量a，頁面中先后引入了 test1.js 和 test2.js ，這時由于a是全局變量，那么我在 test2.js 中就可以訪問到 a 并且改變 a 的值。而此時 test1.js 在值改變后使用了 a ，那么就會導致結果與我們預想的不一樣
/** test1.js */
var a = 1; // 全局變量a window.a
function addOne () {
return a + 1; // 預期輸出 2
}
/** test2.js */
var a = 10; // 再次聲明會覆蓋原來的a
function minesOne () {
return a - 1; // 預期輸出 9
}
/** 先后引入 test1.js 和 test2.js */
minesOne(); // 實際返回 9
addOne(); // 實際返回 11 與預期不符
為了避免這種情況，一般會使用立即執(zhí)行函數，將業(yè)務主體代碼使用 ( function () {…} () ) 包裹，這樣函數內部聲明的變量的作用域就會限制在該立即執(zhí)行函數中，不會泄露到外部環(huán)境中來
( function () {
var innerA = 'a';
console.log(innerA); // a
} () )
console.log(innerA); // ReferenceError
如何使立即執(zhí)行函數中的局部變量成為全局變量？
某些情況下，我們需要將一個變量拋出成為全局變量，這時只需要省略掉 聲明變量的關鍵字 var ，這個變量就會自動成為全局變量
作用域
js的作用域有全局和局部兩種，大部分語言的局部作用域有兩種：函數作用域 和 塊級作用域，而ES6之前的 js 卻只有函數作用域
什么是函數作用域？
函數體內部定義的變量只在函數內起作用，外部無法訪問的作用域
什么是塊級作用域？
代碼塊中定義的變量只在代碼塊中起作用，簡單來說就是 {} 之間的作用域
從上面可以看出來，js代碼塊中聲明的變量在代碼塊外也是可以訪問到的
function test() {
if (true) {
var temp = 520;
}
console.log(temp); // 520 無塊級作用域 {} 內部聲明的變量可訪問
}
test();
console.log(temp); // ReferenceError 外部無法訪問函數內部聲明的變量
ES6 中新增的 let 和 const 命令使 javascript 擁有了塊級作用域
let / const 命令
let 和 const 聲明的變量的作用域都是塊級作用域，也就是在 {} 之外無法訪問，下面先說說兩者相同的地方
if (true) {
let m = 'block scope';
const n = 'block scope 2';
var k = 'global scope';
console.log(m); // block scope
console.log(n); // block scope 2
console.log(k); // global scope
}
console.log(m); // ReferenceError
console.log(n); // ReferenceError
console.log(k); // global scope
上面這個例子， let 和 const 聲明的變量作用域只在 {} 中，外面無法訪問，而 var 聲明的變量卻不具有塊級作用域
let / const 聲明的變量在整個作用域中只可以聲明一次
let i = 1;
let i = 2; // SyntaxError 報錯提示：該變量已聲明
全局環(huán)境下聲明的變量是全局變量，但不是頂層對象的屬性
var 聲明的變量全局環(huán)境下會自動掛載到瀏覽器頂層對象window下，除了可以直接訪問外，也可以通過 window 的屬性進行訪問；但是 let 和 const 聲明的全局對象卻不會掛載到 window 下，只能通過變量名進行訪問
var testA = 1;
let testB = 2;
const testC = 3;
console.log(testA, window.testA); // 1 1
console.log(testB, window.testB); // 2 undefined
console.log(testC, window.testC); // 2 undefined
不存在變量提升
什么是變量提升？
javascript 中使用 var 聲明的變量具有變量提升的特性，在該變量聲明前就已經可以使用該變量，而不會拋出錯誤導致代碼停止運行，因為 javascript 引擎會將所有的變量聲明提前到頂端。但是需要注意的是，即使變量被提升，但是變量的賦值卻不會被提升，如果提前使用，值是 undefined
console.log(testD); // undefined
var testD = 4;
console.log(testD); // 4
// 以上代碼等價于
var testD;
console.log(testD); // undefined
testD = 4; // 提升的只是聲明 賦值并不會被提升
console.log(testD); // 4
let / const 聲明的變量不具有變量提升的特性，也就是說在該變量聲明前，我們是沒辦法使用的，這也更符合我們編寫代碼的常識，先聲明后使用，給我們開發(fā)調試帶來了方便
console.log(testE); // ReferenceError
let testE = 5;
console.log(testE); // 代碼拋出錯誤停止運行
const testF = 6;
console.log(testF); // 6
警惕！暫時性死區(qū) TDZ
var testG = 7;
if (true) {
console.log(testG); // 7
var testG = 0;
}
var testH = 8;
if (true) {
console.log(testH); // ReferenceError
let testH = 0;
}
var testI = 9;
if (true) {
console.log(testI); // ReferenceError
const testI = 0;
}
上文說過，let / const 聲明的變量在未聲明前是無法使用的，像上面這兩個例子，在 {} 內重新使用 var 申明 testG 并不會影響到上一行代碼輸出 testG，而使用 let / const 重新聲明則會導致拋錯，并沒有先輸出 {} 外聲明的同名變量，這是為什么呢？
let / const 會使其聲明的變量“綁定”到該作用域。即使在該作用域外已經存在這個變量，如果作用域內需要使用 let / const 再次聲明，則必須提前，否則無法使用，直到聲明后才可以使用。這種特性叫做——暫時性死區(qū)（TDZ）
由于這種特性， {} 內使用 typeof來檢測變量類型也就變得不安全
var testJ = 10;
if (true) {
typeof testJ; // ReferenceError
let testJ = 0;
}
var testK = 11;
if (true) {
typeof testK; // ReferenceError
const testK = 0;
}
var testL = 12;
if (true) {
typeof testL; // number
var testL = 0;
}
let 與 const 的區(qū)別
let 用來聲明一個變量，而 const 則是用來聲明常量
常量的賦值必須與其聲明同時進行，并且之后無法修改它的值
const testM = 13;
testM = 0; // TypeError 報錯提示：常量的值不可變
const testN; // SyntaxError 報錯提示：常量為初始化（賦值）
testN = 14;
以上就是 ES6 新增命令 let 和 const 使用過程中需要注意的問題啦！尤其是要特別小心 TDZ 的存在，這就更提醒我們要記住一句話——所有的變量使用前都需要先聲明，雖然不能幫我們避免所有的坑，但能少踩一點是一點嘛！
PS：最怕的就是起變量名了，項目中有實際意義還好，這邊。。。小伙伴們還是原諒我隨意的變量名吧。。。捂臉狂奔~~~
