【系統學習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
的“死區”。
到此,三種宣告方式的使用方法及注意事項已梳理完畢。沒有整理很細,因為細的知識點太多,不知從何說起。大家作為一個大綱,舉一反三。
下一節我們會一起討論【解構賦值】,感謝大家支援,希望大家在每一節中都有所得。
公棕號【前端便利貼】記錄著一個程式媛的所見所得所想,分享日常技術筆記,內容覆蓋了閱讀、技術和個人思考~,關注公棕號更早獲取更多文章。
覺得有用的話,小手點點【推薦】再走吖~~