ES6的let和const
- 2019 年 12 月 5 日
- 筆記
本文作者：IMWeb ousiri 原文出處：IMWeb社區 未經同意，禁止轉載
let
- let和var很相似，用於聲明一個變數。但是let聲明的變數只存在塊狀作用域內。
function order(x, y) { if (x > y) { // (A) let tmp = x; x = y; y = tmp; } console.log(tmp===x); // ReferenceError: tmp is not defined return [x, y]; }
- 使用大括弧代替立即執行函數{ let a = 123; } console.log(a); // ReferenceError: a is not defined
const
- const則是用來聲明某個變數等於它初始化的值，並且不能再改變。同樣，const也是只存在塊狀作用域內的
const foo; // SyntaxError: Missing initializer in const declaration const bar = 123; bar = 456; // TypeError: `bar` is read-only
- 注意和Object.freeze的區別。PS：經庄希琦提醒，這裡可以借用指針的概念，obj指向了obj的指針，此指針不可變，但是對象內部的值還是可以改變的。
const obj = {a: 123}; obj.a = 234; console.log(obj.a); // 234 const obj2 = Object.freeze({a:123}); obj.a = 234; // 這裡應該要報錯的，但是chrome現在沒有報錯 console.log(obj.a); // 123
Temporal Dead Zone (TDZ)
由let和const聲明的變數都會有自己的TDZ。當進入這個變數的作用域的時候，這個變數是不能被訪問的，直到這個變數被初始化。我們來看下面一段程式碼
let tmp = true; if (true) { // enter new scope, TDZ starts // Uninitialized binding for `tmp` is created console.log(tmp); // ReferenceError let tmp; // TDZ ends, `tmp` is initialized with `undefined` console.log(tmp); // undefined tmp = 123; console.log(tmp); // 123 } console.log(tmp); // true
TDZ的原因可以簡單地理解為，let和const不存在變數提升
並且要注意，這段程式碼經過babel編譯，結果會是：undefined, undefined, 123, true，不會報錯，因為babel是使用var去最大限度模擬let
何時使用let和const
- 儘可能使用const
- 當變數需要改變的時候，把const改為let
