Cody Di Da Di

搭拉拉拉搭搭搭

0%

每天一點點，學習ES6(二) Var Let Const

發表於 分類於 ， 2.2k 2 分鐘

前言

今天看到很多面試題在問這三個的區別，所以來整理一下筆記

先來介紹var

  • 在Es5中，聲明變量的方式幾乎以 var 為準，從頭到尾 Var 到底 雖然很省事但還有一些明顯的問題

驚訝
(source:)網路

var 有什麼缺點？

  • 語法允許重複宣告 (Re-Declaring)

1
2
3
4
5
6
7
console.log(x);     // ReferenceError: x is not defined (註)
var x;
console.log(x);     // undefined
x = 123;
console.log(x);     // 123
var x;
console.log(x);     // 123

註：以上這段程式如果完整執行，第一個 console.log(x); 實際上會印出 undefined 而不是 Error，因為變數宣告有 Hoisting 效果。關於 Hoisting ，預計後續的文章再作詳細介紹，本篇先單純關注 var 的問題。

一段很長的程式，我們可能不記得前面宣告過同名的變數，後面再次宣告時往往當成第一次宣告，容易疏忽造成小 Bug。

1
2
3
4
5
6
7
8
9
10
11
var name = 'John';
...
...
...
var name;
while(true){
    if( name === undefined ){
      console.log('The first time to execute.');
 }
 ...
}

一個較好且普遍的程式編寫習慣：將需要宣告的變數集中在該作用域的一開始，並賦予初始值。

  • 不支援區塊作用域 (Block Scope)

舉個例子：

1
2
3
4
5
6
7
8
9
function fun(){
    {
       var name = "Apple";
    }
    console.log("fun(): name=", name);
}

fun();  //fun():name=Apple

由上面的例子看，在裡面用var宣告的name 會被外面的區域讀取到

用 var 宣告的變數並不具 Block Scope 效果

簡單來說：
Block Scope 就是用大括號去定義範疇。

驚訝

  • 不支援常數 (Constant) 特性

常數 (Constant) 指的是「固定不變的數值」。

在程式裡常需要宣告一些變數，但變數裡的值只需要作一次初始化，不需要也不希望在程式執行過程被更改，也就是我們希望這類變數具有常數性質。

例如數學 pi 為3.14 、後續不希望能更動這個數字。使用var 就不太行

1
2
3
4
var pi = 3.14;
pi = 1234;

console.log(pi) //1234

let / const 運用方式

  • let:

    • 從直觀的角度來說，let和var是沒有太大的區別的，都是用於聲明一個變量

  • const:

    • const關鍵字是constant的單詞的縮寫，表示常量、衡量的意思;
    • 它表示保存的數據一旦被賦值，就不能被修改;
    • 但是如果賦值的是引用類型，那麼可以通過引用找到對應的對象，修改對象的內容;

注意:另外let、const不允許重複聲明變量;

let/const作用域提升

舉個例子

1
2
3
4
5
6
7
8
9
10
11
console.log(foo) //foo
var foo = "foo"

-------------------------------

console.log(foo) //Uncaught ReferenceError: foo is not defined
let foo = "foo"

// Reference(引用)Error: Cannot access 'foo' before initialization(初始化)
// let/const 他們沒有作用域提升
// foo雖然有被創建出來, 但是不能被訪問

作用域提升: 能提前被訪問

let、const沒有進行作用域提升，但是會在解析階段被創建出來。

暫時性死區 TDZ

在ES6中，我們還有一個概念稱之為暫時性死區:

它表達的意思是在一個代碼中，使用let、const聲明的變量，在聲明之前，變量都是不可以訪問的;

我們將這種現象稱之為temporal dead zone(暫時性死區，TDZ);

let const 與window的關係

  • 全局通過var來聲明一個變量，事實上會在window上添加一個屬性

佔記憶體 !!能用但不優!!!

  • 但是let、const是不會給window上添加任何屬性的。

總結

var let const 差異

總結 let 和 const 的重點：

let

  • 支援 Block Scope。
  • 禁止同一層 Block 重複宣告變數。
  • 不會產生 Global Scope 變數。

const

  • 具備 let 的所有特性。
  • 定義時必須初始化 (Initialization)。
  • 後續不能更改值。

應避免使用 var，改用 let 和 const

ES6 導入 let 和 const，改善 var 在變數宣告和管制上的不足，讓程式的變數控管可以更加嚴謹，減少出錯的機率。

對於let和const來說，是目前開發中推薦使用的

  • 簡單整理如下
    變量不被更改 → const
    變量需要變動 → let

References

你的支持是我活力的來源 :)