溫故而知新---ES6知識詳解篇

ECMAScript 6.0(以下簡稱ES6)是JavaScript語言的下一代標準,已經在2015年6月正式發佈了。它的目標,是使得JavaScript語言可以用來編寫複雜的大型應用程序,成爲企業級開發語言。各大瀏覽器的最新版本,隨着時間的推移,支持度已經越來越高了,ES6的大部分特性都實現了。那麼也就意味着低版本瀏覽器是不支持ES6的。

1:let/const

let命令:

ES6新增了let命令,用來聲明變量。它的用法類似於var,但是所聲明的變量,只在let命令所在的代碼塊內有效。
在這裏插入圖片描述
上面代碼在代碼塊之中,分別用let和var聲明瞭兩個變量。然後在代碼塊之外調用這兩個變量,結果let聲明的變量報錯,var聲明的變量返回了正確的值。這表明,let聲明的變量只在它所在的代碼塊有效。
for循環的計數器,就很合適使用let命令:
在這裏插入圖片描述
上面代碼中,計數器i只在for循環體內有效,在循環體外引用就會報錯。下面的代碼如果使用var,最後輸出的是10。
在這裏插入圖片描述
上面代碼中,變量i是var聲明的,在全局範圍內都有效。所以每一次循環,新的i值都會覆蓋舊值,導致最後輸出的是最後一輪的i的值。如果使用let,聲明的變量僅在塊級作用域內有效,最後輸出的是6。
在這裏插入圖片描述
上面代碼中,變量i是let聲明的,當前的i只在本輪循環有效,所以每一次循環的i其實都是一個新的變量,所以最後輸出的是6。
不存在變量提升。
let不像var那樣會發生“變量提升”現象。所以,變量一定要在聲明後使用,否則報錯。
在這裏插入圖片描述
上面代碼中,變量foo用var命令聲明,會發生變量提升,即腳本開始運行時,變量foo已經存在了,但是沒有值,所以會輸出undefined。變量bar用let命令聲明,不會發生變量提升。這表示在聲明它之前,變量bar是不存在的,這時如果用到它,就會拋出一個錯誤。
暫時性死區。
只要塊級作用域內存在let命令,它所聲明的變量就“綁定”(binding)這個區域,不再受外部的影響。
在這裏插入圖片描述
上面代碼中,存在全局變量tmp,但是塊級作用域內let又聲明瞭一個局部變量tmp,導致後者綁定這個塊級作用域,所以在let聲明變量前,對tmp賦值會報錯。
ES6明確規定,如果區塊中存在let和const命令,這個區塊對這些命令聲明的變量,從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量,就會報錯。
總之,在代碼塊內,使用let命令聲明變量之前,該變量都是不可用的。這在語法上,稱爲“暫時性死區”(temporal dead zone,簡稱TDZ)。
ES6規定暫時性死區和let、const語句不出現變量提升,主要是爲了減少運行時錯誤,防止在變量聲明前就使用這個變量,從而導致意料之外的行爲。這樣的錯誤在ES5是很常見的,現在有了這種規定,避免此類錯誤就很容易了。
總之,暫時性死區的本質就是,只要一進入當前作用域,所要使用的變量就已經存在了,但是不可獲取,只有等到聲明變量的那一行代碼出現,纔可以獲取和使用該變量。
不允許重複聲明。
let不允許在相同作用域內,重複聲明同一個變量。
在這裏插入圖片描述
因此,不能在函數內部重新聲明參數。
在這裏插入圖片描述
塊級作用域:
ES5只有全局作用域和函數作用域,let的出現實際上爲JavaScript新增了塊級作用域。
在這裏插入圖片描述
上面的函數有兩個代碼塊,都聲明瞭變量n,運行後輸出5。這表示外層代碼塊不受內層代碼塊的影響。如果使用var定義變量n,最後輸出的值就是10。
ES6允許塊級作用域的任意嵌套,外層作用域無法讀取內層作用域的變量。
在這裏插入圖片描述

const命令:

const聲明一個只讀的常量。一旦聲明,常量的值就不能改變。
在這裏插入圖片描述
上面代碼表明改變常量的值會報錯。
const聲明的變量不得改變值,這意味着,const一旦聲明變量,就必須立即初始化,不能留到以後賦值。
在這裏插入圖片描述
上面代碼表示,對於const來說,只聲明不賦值,就會報錯。const的作用域與let命令相同:只在聲明所在的塊級作用域內有效。
在這裏插入圖片描述
const命令聲明的常量也是不提升,同樣存在暫時性死區,只能在聲明的位置後面使用。
在這裏插入圖片描述
上面代碼在常量MAX聲明之前就調用,結果報錯。const聲明的常量,也與let一樣不可重複聲明。
在這裏插入圖片描述
對於複合類型(對象或者引用類型)的變量,變量名不指向數據,而是指向數據所在的地址。const命令只是保證變量名指向的地址不變,並不保證該地址的數據不變,所以將一個對象聲明爲常量必須非常小心。
在這裏插入圖片描述
上面代碼中,常量foo儲存的是一個地址,這個地址指向一個對象。不可變的只是這個地址,即不能把foo指向另一個地址,但對象本身是可變的,所以依然可以爲其添加新屬性。
頂層對象屬性:
頂層對象,在瀏覽器環境指的是window對象,在Node指的是global對象。ES5之中,頂層對象的屬性與全局變量是等價的。
在這裏插入圖片描述
上面代碼中,頂層對象的屬性賦值與全局變量的賦值,是同一件事。
ES6爲了改變這一點,一方面規定,爲了保持兼容性,var命令和function命令聲明的全局變量,依舊是頂層對象的屬性;另一方面規定,let命令、const命令、class命令聲明的全局變量,不屬於頂層對象的屬性。也就是說,從ES6開始,全局變量將逐步與頂層對象的屬性脫鉤。
在這裏插入圖片描述
上面代碼中,全局變量a由var命令聲明,所以它是頂層對象的屬性;全局變量b由let命令聲明,所以它不是頂層對象的屬性,返回undefined。

2:變量解構賦值

ES6允許按照一定模式,從數組和對象中提取值,對變量進行賦值,這被稱爲解構(Destructuring)。
以前,爲變量賦值,只能直接指定值。
在這裏插入圖片描述
ES6允許寫成下面這樣。
在這裏插入圖片描述
上面代碼表示,可以從數組中提取值,按照對應位置,對變量賦值。
本質上,這種寫法屬於“模式匹配”,只要等號兩邊的模式相同,左邊的變量就會被賦予對應的值。下面是一些使用嵌套數組進行解構的例子。
在這裏插入圖片描述
如果解構不成功,變量的值就等於undefined。
在這裏插入圖片描述
以上兩種情況都屬於解構不成功,foo的值都會等於undefined。
另一種情況是不完全解構,即等號左邊的模式,只匹配一部分的等號右邊的數組。這種情況下,解構依然可以成功。
在這裏插入圖片描述
上面兩個例子,都屬於不完全解構,但是可以成功。
解構賦值不僅適用於var命令,也適用於let和const命令。
在這裏插入圖片描述
未完待續。。。

發佈了28 篇原創文章 · 獲贊 59 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章