瀏覽目錄
let
es6新增了let命令,用來聲明變量。它的用法類似於var,但是所聲明的變量,只在let命令所在的代碼塊內有效。
上面代碼在代碼塊之中,分別用let
和var
聲明瞭兩個變量。然後在代碼塊之外調用這兩個變量,結果let
聲明的變量報錯,var
聲明的變量返回了正確的值。這表明,let
聲明的變量只在它所在的代碼塊有效
for循環相信大家都玩過。下面這種現象扭曲了我們塊級作用域的思想!如果將var改成let就可以了!
再看一個例子:
1 2 3 4 5 6 7 | var a = []; for ( var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); |
上面代碼中,變量i
是var
命令聲明的,在全局範圍內都有效,所以全局只有一個變量i
。每一次循環,變量i
的值都會發生改變,而循環內被賦給數組a
的函數內部的console.log(i)
,裏面的i
指向的就是全局的i
。也就是說,所有數組a
的成員裏面的i
,指向的都是同一個i
,導致運行時輸出的是最後一輪的i
的值,也就是 10
如果使用let
,聲明的變量僅在塊級作用域內有效,最後輸出的是 6。
1 2 3 4 5 6 7 | var a = []; for ( let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); |
上面代碼中,變量i
是let
聲明的,當前的i
只在本輪循環有效,所以每一次循環的i
其實都是一個新的變量,所以最後輸出的是6
。你可能會問,如果每一輪循環的變量i
都是重新聲明的,那它怎麼知道上一輪循環的值,從而計算出本輪循環的值?這是因爲 JavaScript 引擎內部會記住上一輪循環的值,初始化本輪的變量i
時,就在上一輪循環的基礎上進行計算
不存在變量提升
var
命令會發生”變量提升“現象,即變量可以在聲明之前使用,值爲undefined
。這種現象多多少少是有些奇怪的,按照一般的邏輯,變量應該在聲明語句之後纔可以使用。
爲了糾正這種現象,let
命令改變了語法行爲,它所聲明的變量一定要在聲明後使用,否則報錯。
1 2 3 4 5 6 7 | // var 的情況 console.log(foo); // 輸出undefined var foo = 2; // let 的情況 console.log(bar); // 報錯ReferenceError let bar = 2; |
上面代碼中,變量foo
用var
命令聲明,會發生變量提升,即腳本開始運行時,變量foo
已經存在了,但是沒有值,所以會輸出undefined
。變量bar
用let
命令聲明,不會發生變量提升。這表示在聲明它之前,變量bar
是不存在的,這時如果用到它,就會拋出一個錯誤。
不允許重複聲明
let
不允許在相同作用域內,重複聲明同一個變量。
1 2 3 4 5 6 7 8 9 10 11 | // 報錯 function func() { let a = 10; var a = 1; } // 報錯 function func() { let a = 10; let a = 1; } |
因此,不能在函數內部重新聲明參數
1 2 3 4 5 6 7 8 9 | function func(arg) { let arg; // 報錯 } function func(arg) { { let arg; // 不報錯 } } |
爲什麼需要塊級作用域?
ES5 只有全局作用域和函數作用域,沒有塊級作用域,這帶來很多不合理的場景。
第一種場景,內層變量可能會覆蓋外層變量。
1 2 3 4 5 6 7 8 9 10 | var tmp = new Date(); function f() { console.log(tmp); if ( false ) { var tmp = 'hello world' ; } } f(); // undefined |
上面代碼的原意是,if
代碼塊的外部使用外層的tmp
變量,內部使用內層的tmp
變量。但是,函數f
執行後,輸出結果爲undefined
,原因在於變量提升,導致內層的tmp
變量覆蓋了外層的tmp
變量。
第二種場景,用來計數的循環變量泄露爲全局變量。
1 2 3 4 5 6 7 | var s = 'hello' ; for ( var i = 0; i < s.length; i++) { console.log(s[i]); } console.log(i); // 5 |
上面代碼中,變量i
只用來控制循環,但是循環結束後,它並沒有消失,泄露成了全局變量。
const
基本語法
const聲明一個只讀的常量。一旦聲明,常量的值就不能改變。
1 2 3 4 5 | const PI = 3.1415 ; PI / / 3.1415 PI = 3 ; / / TypeError: Assignment to constant variable. |
上面代碼表明改變常量的值會報錯
const
聲明的變量不得改變值,這意味着,const
一旦聲明變量,就必須立即初始化,不能留到以後賦值
1 2 | const foo; / / SyntaxError: Missing initializer in const declaration |
上面代碼表示,對於const
來說,只聲明不賦值,就會報錯
const
的作用域與let
命令相同:只在聲明所在的塊級作用域內有效。
1 2 3 4 5 | if (true) { const MAX = 5 ; } MAX / / Uncaught ReferenceError: MAX is not defined |