【系統學習ES6】第一節：新的聲明方式

• 2021 年 7 月 30 日
• 筆記

【系統學習ES6】

本專題旨在對ES6的常用技術點進行系統性梳理，幫助大家對其有更好的掌握。計劃每周更新1-2篇，希望大家有所收穫。

以前用ES5時，聲明變數只能用var。ES6的出現，為我們帶來了兩種新的聲明方式：let和const。我們可以先簡單記憶：

• var：聲明全局變數

• let：聲明局部變數

• const：聲明常量

var聲明

var在ES6里是用來聲明全局變數的，我們先看一個簡單的例子：

var a = "lemoncool";
console.log(a);

控制台輸出了「lemoncool」。但這個例子不足以聲明a是全局變數。我們繼續聲明一個函數，在函數體中看是否可以拿到函數外面聲明的a。

var a = "lemoncool";
var testFun = function(){
 console.log(a);
} 
testFun();

控制台同樣輸出了「lemoncool」，說明函數中可以拿到外部聲明的a，這可以說明var聲明的變數確實是全局的。如果你覺得這個例子說服力還不夠，那我們繼續看。

var a = "lemoncool";
var testFun = function(){
  a = '23';
} 
testFun(); 
console.log(a);

此時控制台會輸出多少呢？是”23″。我想，這個例子，足以說明var是全局聲明的。

let 聲明

我們試著用let再次執行上面的例子：

var b = "lemoncool";
var testFun = function(){
  let b = '23';
} 
testFun(); 
console.log(b);

函數執行後，再列印b，你覺得會輸出多少呢？結果是此時輸出的是"lemoncool"。為什麼？

因為我們在函數里用通過let聲明了 b，這時的 b =”23″只在函數作用域內有效，屬於局部變數。外面的列印，拿不到函數的局部變數，所以拿不到”23″。

那如果我們只在函數體里聲明b，外部的聲明刪掉，列印就會輸出”23″么？

var testFun = function(){
  let b = '23';
} 
testFun(); 
console.log(b);

不好意思，報錯了。不在外部聲明，即使函數里聲明再多花樣，外部依然拿不到。

上面兩個例子，說明了let聲明的是局部變數。let聲明的變數，只在區塊內起作用，外部拿不到，也是不可以調用的。有關作用域問題，大家可以自行查閱資料深入了解。

所以let不會存在變數提升的bug，可以有效防止數據污染。同時，let不允許在相同作用域內，重複聲明同一個變數。

在合理場景下，我們要努力去習慣用let代替var。

const 聲明

在開發中，有些變數從聲明後就不允許改變。這種變數叫常量。這時就需要用到const聲明。

我們通過一個反例，看一段錯誤程式碼：

const c = "lemoncool";
c = 'hello';
console.log(c);

執行這段程式碼時，會報錯。原因是const聲明的變數不可改變。

const c = "lemoncool";
console.log(c); //"lemoncool"
const d;  // SyntaxError: Missing initializer in const declaration

這段程式碼同樣會報錯， 意味著，const一旦聲明必須初始化，否則會報錯。

 Q：const聲明的變數初始化不允許再改變，是針對所有類型么？

A：答案是「否」，簡單類型（數值 number、字元串 string 、布爾值 boolean），的確是這樣。但是對於複雜類型（對象 object，數組 array，函數 function），const只能保證變數指針是固定的，至於指針指向的數據結構，是否發生變化，就有些無法控制。所以使用 const 聲明複雜類型對象時要慎重。

暫時性死區

var temp = "lemoncool";
if (true) {
 console.log(temp);
 const temp = '123456';
}

你以為會輸出「lemoncool」？NO，會報錯。

ES6 明確規定，程式碼塊內如果存在 let 或者 const，程式碼塊會對這些命令聲明的變數從塊的開始就形成一個封閉作用域。 凡是在聲明之前就使用這些變數，就會報錯。

所以，在程式碼塊內，使用let或const命令聲明變數之前，該變數都是不可用的。這在語法上，稱為「暫時性死區」（temporal dead zone，簡稱 TDZ）。

上面程式碼中，在const命令聲明變數temp之前，都屬於變數temp的「死區」。

到此，三種聲明方式的使用方法及注意事項已梳理完畢。沒有整理很細，因為細的知識點太多，不知從何說起。大家作為一個大綱，舉一反三。

下一節我們會一起討論【解構賦值】，感謝大家支援，希望大家在每一節中都有所得。