一、什么是變量

在讀這篇文章前，我們需要搞懂到底是什么變量，其實一句話就能概括：變量是一個可以保存任何數據類型值的命名占位符。本篇文章將會介紹以下知識點：

什么是var、let、const
變量聲明規則
變量提升
塊作用域
暫時性死區

二、var關鍵字

2.1 初始化

初始化變量只需要在var關鍵字后面跟變量名即可：

var a;
var b = 2;

上面這段代碼聲明了a和b兩個變量，a變量只是單純的聲明，并沒有賦值，js引擎遇到未賦值的變量時，會自動為其賦值一個值，這個值就是undefined；變量b在聲明的時候我們給它賦值了一個數字2，所以當獲取變量b的時候，會得到一個number類型的2。

說到number類型，這里就不得不提到一個概念：Javascript中的變量屬于松散類型，也就是變量的值可以變更為任何數據類型的值，但并不建議這么做，隨意更改變量的數據類型會導致代碼可讀性降低。

// 翻譯后是var a = undefined;
var a;

var b = 2;
b = '2'; // 不建議這么做

在代碼開發過程中，有些場景需要創建多個變量，除了var a = 1; var b = 2;這種寫法，還可以使用,進行更便利的創建多個變量：

// 使用逗號創建多個變量
var a = 1,
    b = 2,
    c = 3;
    
// 等同于
var a = 1;
var b = 2;
var c = 3;

2.2 var聲明作用域

變量存在哪個作用域中是根據變量所聲明的場景位置決定，有兩種場景：全局、函數。在全局作用域中聲明var變量，該變量在任何地方都可以被訪問到，而且還可以通過window.變量名訪問。如果在函數內部聲明變量，那么這個變量就只屬于這個函數自己的，外部訪問就會報錯，最后變量會在函數退出的時候被銷毀。

// 聲明全局變量
var a = 1;
// 訪問全局變量
console.log(a);  // 1
console.log(window.a);  // 1

// 聲明函數作用域內的變量
function fun () {
    var b = 2;  // 只屬于fun函數的變量
    console.log(b);  // 2
};
fun();  // 2
console.log(b);  // 報錯：b is not defined(變量b未定義)

2.3 var的變量提升

變量提升其實就是在初始化的時候，var變量會提升到當前作用域最頂部，并且每一個變量的值都是默認undefined，當js引擎執行到變量賦值的代碼后，變量的值才會是我們想要的那個值，根據這個理論，來看下面一段代碼，思考一下代碼執行的結果是什么：

var a = 1,
    b = 2;
    
function fun (a) {
    console.log(b);
    var b = 6;
    var b = 5;
    console.log(a);
    console.log(b);
};
console.log(b);
fun(4);
console.log(b);

上面這段代碼其實并沒有復雜的交互，只是多次的訪問某些變量，會讓人有點眼花，沒關系，我們來一步一步的分解這些代碼，得到最終的結果，看是否和你的結果一樣：

全局作用域中出現了三個變量：a、b、fun(函數名也是一個變量)
在函數執行前打印了全局作用域中的變量b，所以得到的是2
調用函數并傳入參數值，開始執行函數內部代碼
此時函數內部變量a和b都提升到了函數作用域頂部，并且值都是undefined
變量a被賦值4
打印變量b，此時變量還沒有被賦值，所以得到的是undefined
變量b開始被賦值，但遇到了兩個重名變量，最后一個變量會覆蓋之前的所有重名變量
獲取變量a，還記得嗎？在執行參數的時候給變量a賦值了4，所以我們獲得的也是4
因為之前的變量b被后面的變量b覆蓋了，所以現在獲取變量b，獲得的是5
函數內部代碼執行完畢，開始獲取變量b的值
雖然函數內部也有b變量，但那是屬于函數自己的，并且這個變量在函數執行完后被銷毀了，所以我們只能獲取到全局作用域下的變量b，內容是2

所以最終結果是：2、undefined、4、5、2。

全局變量

全局變量除了在最外層聲明，其實還有另外一種聲明方式，不過這種方式并不受推薦，所以了解就好：

var a = 1;  // 正常的聲明全局變量

function fun () {
    b = 2; // 變量名前面沒有寫var，默認成為全局作用域
};

// 因為函數還沒有執行，所以這塊會報錯
console.log(b);  // b not defined

fun();
console.log(b);  // 2
 

三、let聲明

3.1 塊級作用域

相比于var變量，let顯得更加精致，因為它有自己的聲明準則，其中最大的區別就是let聲明的范圍是塊級作用域，那么什么是塊級作用域呢，其實很好理解：{}符號中的區域被稱為塊級作用域，需要注意的是這個區域對var并沒有影響。

塊級作用域和函數作用域相似，控制著內部變量的讀取權限：

{ // 塊級作用域
  let a1 = 2;
}
console.log(a1);  // 報錯：a1 is not defined

3.2 暫時性死區

在let創建之前的瞬間被稱為暫時性死區，聽起來很高級，其實就是在暫時性死區階段訪問不到let變量的意思，因為let變量沒有變量提升這一說；let還有一個特點就是不能被重復聲明，也就是說let變量不會像var變量一樣可以聲明多個重名變量，在let變量這會報錯的。

{
    console.log(b);  // 因為沒有變量提升，所以在聲明前訪問不到該變量，報錯：annot access 'b' before initialization
    let b = 1;
}

let a = 1;
let a = 2;  // 重名變量會報錯：caught SyntaxError: Identifier 'a' has already been declared

let的全局作用域

雖然前面說let聲明的范圍是塊級作用域，但如果在最外層全局作用域里聲明let變量，也會被認為是合法的全局變量，與var變量不同的是let全局作用域不能通過window.變量名訪問。

for循環中的let和var

for循環過程中會不斷產生新的塊級作用域，這個時候var和let變量值迭代更新就有了不同的變化：

let arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {};
console.log(i);  // 報錯：i is not defined

for (var i = 0; i < arr.length; i++) {};
console.log(i);  // 5

上面代碼中第一個循環內，使用let創建了一個變量，當我們在循環體外訪問該變量時竟然報錯了！這是因為循環體使用了{}，所以形成了塊級作用域，此時在塊作用域外訪問let變量肯定會報錯。當我們訪問var變量的時候為什么沒有報錯呢？那是因為var變量不受塊級作用域影響，它成為了全局作用域。

四、const聲明

const聲明被稱為常量，為了更好理解，下文還是用變量進行介紹

const和let非常相似：不能聲明重名變量、存在暫時性死區、沒有變量提升、有塊級作用域限制。這些都是非常nice的規則，在此基礎上，const還增加了兩個規則：1、聲明時必須賦值；2、值不可修改；

聲明時必須賦值這個很好理解，就是在創建的時候必須給這個變量一個初始值。我們詳細說一下值不可修改這一點：

const a = '2';
a = 2; // 報錯a變量已經聲明，不能重復創建：entifier 'a' has already been declared

上面代碼首先我們創建了const變量并為其賦值字符串類型的'2'，在第二行代碼實際上是想把數字類型的2賦值給剛剛創建的const變量中，這時候確保錯了，由此可見const變量適合用在值不會變的場景。還有一種情況就是給const變量賦值數組和對象類型的值，因為這兩個數據類型屬于引用類型，所以只要在引用地址值不變的情況下，更改、新增、刪除對象或數組中的元素是不會報錯的。