[JavaScript ES6] 宣告變數 let 與 const

JavaScript 的 ES6 中,多了兩種宣告變數的方法, letconst , 這兩種宣告的方式出現,使 JavaScript 在編碼上更加的嚴謹,但相對的 提高了不少的 可讀性 ,給 降低 了許多 維護成本 , 下面說明會那原有的 var 宣告方式進行比較:


const 的宣告方式,比較容易理解,先從 const 進行說明:

const :

const 是在 ES6 中,專門為 常數 提供的宣告方式,如下:

const x = 10;

但要特別說明的是: 使用 const 宣告 常數 時,一定要賦予值,如果沒有 賦予值,是會 SyntaxError 的錯誤的,如下:

const x; //SyntaxError

另外使用 const 宣告 常數 之後,被宣告的 常數無法覆寫或更新的 , 如下:

const x =10;
x = 20; //SyntaxError

let:

let 的宣告方式,與我們平常使用的 var 很相近,這兩者的差異在於 作用域(scope),下面以實例說明:

關於 var 的 作用域(scope),可以查看 [JavaScript] 宣告變數 與 作用域,進一步理解

這邊我們先用 var 的方式進行宣告 i :

範例編碼:

function test(){
 for(var i = 0; i < 3; i++){
   console.log(i,'for loop scope')
 }
 console.log(i,'test function scop')
}
test();

結果如下:

0 "for loop scope"
1 "for loop scope"
2 "for loop scope"
3 "test function scop" //注意這行

接著我們先用 let 的方式進行宣告 i :

範例編碼:

function test(){
 for(let i = 0; i < 3; i++){
   console.log(i,'for loop scope')
 }
 console.log(i,'test function scop')
}
test();

結果如下:

0 "for loop scope"
1 "for loop scope"
2 "for loop scope"
"Uncaught ReferenceError: i is not defined" //注意這行

以上上面的實例來看,我們可以得知 varlet 兩者的作用域差異:

var作用域(scope)function 為一個臨界點,在 function 內都可以提取到 i 的值

let作用域(scope)程式區塊(大刮號) 為一個臨界點,在 程式區塊(大刮號) 內都可以提取到 i 的值

Facebook 功能: