09.10 ES6教程:let命令的基本用法

上一次,我們講解了 ,這一節,我們開始進入ES6的詳解,首先我要說明一下,在ES6之前,還有ES5,我們的ES6教程系列,主要是針對,ES6新增的命令進行講解。若想索取編輯軟件和源碼,請關注我後,私信我索取軟件或源碼,其它課程請持續關注本號。

ES6新增了let命令,這個命令和var一樣,都是用來聲明變量的。只不過,let命令一般只用在{}中,也就是說let命令一般用在代碼塊中,如果let用在代碼塊外,那麼就和var一樣了。

直接上例子:

ES6教程:let命令的基本用法

圖1 示例文件 a.html

ES6教程:let命令的基本用法

圖2 用瀏覽器通過F12調出控制後顯示的結果

在上面的a.html中,有三個變量x0,x1,x2,其中x0用let定義在塊外,x1和x2分別用let和var定義在塊內。然後我們在塊內與塊外,分別在控制檯輸入這三個變量。就出現了圖2的結果。

x0用let定義在塊外,那麼在塊內和塊外輸出正常,並且都一樣,變得像var了。

x1用let定義在塊內,在塊內輸出正常,在塊外提示“x1未定義”,並且其後面的命令不會再執行。這是因為x1用let定義後,其作用域僅限在塊內,在塊外無法訪問,保定了其安全性,不至於造成變量洩露。

x2用var定義在塊內,其它和定義在塊外是一樣的,輸出時,塊內和塊外均能正常輸出。

我們下面兩個應用的例子:

ES6教程:let命令的基本用法

圖3 FOR循環中用var定義i,在循環外輸出i,結果是 10

ES6教程:let命令的基本用法

圖4 FOR循環中用let定義i,在循環外輸出i,結果是報錯顯示“i未定義”

這說明如果循環中,用let定義變量i,則i的作用域僅在循環內。

好了,我們再看最後一個例子:

ES6教程:let命令的基本用法

我們期望得到 6 ,但是輸出結果是10

ES6教程:let命令的基本用法

這樣一改,就得到了我們期望的6

上面代碼中,變量i是var聲明的,在全局範圍內都有效,所以全局只有一個變量i。每一次循環,變量i的值都會發生改變,而循環內被賦給數組a的function在運行時,會通過閉包讀到這同一個變量i,導致最後輸出的是最後一輪的i的值,也就是10。

所以說,let命令的出現,也是為解決閉包的問題提供了一個方案。

後面課程更精彩,請大家持續關注。


分享到:


相關文章: