ES6基礎-爲什麼要用let和const

如題，爲什麼要用 let 和 const 呢？

在開始這個話題之前，我們先來通過以下的小例子瞭解一下 JavaScript 中 var 聲明及變量提升機制。

按照一般邏輯，變量應該在聲明語句之後纔可以使用，但在上面的代碼中，是聲明之前輸出foo的值，且這個值爲undefined，這就說明變量在聲明之前就已經存在了。爲什麼用var會出現這種問題呢？下次我們在討論。這裏就是人們經常說的變量提升，即變量可以在聲明之前使用，值爲undefined。我們console用let聲明的變量bar，報錯了，這就表示聲明之前，變量bar是不存在的，這裏就沒有變量提升的現象出現。爲了糾正這種現象，讓大家更好的理解代碼，let命令改變了語法行爲，它所使用的變量一定要在聲明之後使用，否則就會報錯。

1. let 命令

特性：

• 塊級聲明
• 不存在變量提升
• 不允許重複聲明

1.1 塊級聲明和不存在變量提升

塊級聲明是指某個變量只在相應的作用域內生效，外部是不可以訪問的。let 聲明的用法與 var相同，不同的是不存在變量提升，在指定作用域生效。常見的塊級作用域:

• 函數內部

  function fn1 () {
    let a = 5 
    if (true) {
      let a = 10
    }
    console.log(a)
  }
  // fn1()

  function fn2 () {
    var b = 2
    if (true) {
      var b = 4
    }
    console.log(b)
  }
  // fn2()

• 塊中 {}

{
  let a = 10
  var b = 1
}
console.log(a) // ReferenceError: a is not defined
console.log(b) // 1

1.2 不允許重複聲明

let 不允許在相同作用域內重複聲明同一個變量。

  // 報錯：Identifier 'a' has already been declared at Object
  function fn() {
    let a = 10
    var a = 1
  }
  // fn()

  // 報錯：Identifier 'a' has already been declared at Object
  function fn1 () {
    let a = 10
    let a = 1
  }
  // fn1()

  // 報錯：Identifier 'a' has already been declared at Object
  function fn2 (arg) {
    let arg
  }
  // fn2()

2. const 命令

const 通常聲明的是一個只讀的常量，一旦聲明瞭，其中的值是不能改變，這就意味着聲明的這個常量必須是要賦值的。

// 值不能變
const S = 60

S = 120
// TypeError: Assignment to constant variable.

// 必須賦值
const M
// Missing initializer in const declaration

const 除了值不能變和只讀，其他的特性跟 let 是一樣的，同樣是塊級聲明、不存在變量提升和不允許重複聲明。在這裏需要注意一點的是，聲明常量的時候要必須確保這個值是固定不變的。

總結

回到問題：爲什麼要用 let 和 const ？
新語法的出現，不僅使得我們更容易的理解JS，而且減少很多奇奇怪怪的問題出現。塊級聲明，可以很有效的避免了變量污染這個問題。

想繼續學習更多有關前端知識，可以關注我的公衆號。大家一起來學習如何快速掉頭髮。