變數的宣告

ES6在對變數進行宣告時，除了可使用原有的var之外，還可以使用兩個新的關鍵字：

1. let ：定義變數
2. const ：定義常量

新關鍵字的特點

1. 不可重複定義同名變數，定義同名變數時，會報錯。
2. 使用const定義的變數，其值不可修改。
3. 塊級的作用域。

不可重複定義同名變數

使用var定義變數

var a = 5;
var a = 6;//同名沒有問題

使用let或const定義同名變數

let a = 5;
let a = 6;//報錯：Uncaught SyntaxError: Identifier 'a' has already been declared
 


const b = 8;
const b = 10;//報錯：Uncaught SyntaxError: Identifier 'b' has already been declared

const定義的變數，其值不可修改

const a = 5;
a = 5; //報錯：Uncaught TypeError: Assignment to constant variable.

塊級作用域

使用var定義變數

{
    var a = 5;
    alert(a);//彈出
}
alert(a);//彈出

使用let定義變數

{
    let a = 5;
    alert(a);//
 
彈出

}
alert(a);//報錯：Uncaught ReferenceError: a is not defined

var 和let的對比

頁面上有三個按鈕

<input type="button" value="A">
<input type="button" value="B">
<input type="button" value="C">

給按鈕新增onclick方法，結果三個按鈕點選後者是alert相同的結果：2。

    var bs = document.getElementsByTagName('input');
    for
 
(var i = 0; i < bs.length;i ++){//注意這裡使用var宣告
      bs[i].onclick=function(){
        alert(i);
      }
    }

如果想alert出0，1，2的結果，要修改為：

    var bs = document.getElementsByTagName('input');
    for(var i = 0; i < bs.length;i ++){//注意這裡使用var宣告
        (function(j){
          bs[j].onclick=function(){
            alert(j);
          }
        })(i);//這裡相當於定義了一個函式並立即執行
    }

使用let宣告則不同，直接可alert出0，1，2。

    var bs = document.getElementsByTagName('input');
    for(let i = 0; i < bs.length;i ++){//注意這裡使用let宣告
      bs[i].onclick=function(){
        alert(i);
      }
    }

但是要注意，這裡alert(m)的結果是15：

    var bs = document.getElementsByTagName('input');
      for(let i = 0; i < bs.length;i ++){//注意這裡使用let宣告
          let m = 10;
          bs[i].onclick=function(){
            alert(m);//結果是15
          }
          m = m+5;
        }

如果要alert的結果是10的話，還是需要修改：

    var bs = document.getElementsByTagName('input');
    for(let i = 0; i < bs.length;i ++){//注意這裡使用let宣告
      let m = 10;
      (function(n){
        bs[i].onclick=function(){
          alert(n);
        }
      })(m);
      m = m+5;
    }

小結

使用let和const跟方便查詢錯誤，使得變數作用域更加清晰，更加符合程式設計習慣。

推薦在編寫程式碼時，使用let和const替換var使用。

參考：

根據開課吧《ECMAScript6.0》視訊教程整理。