ECMAScript 6(簡稱ES6)是于2015年6月正式發(fā)布的JavaScript語言的標(biāo)準(zhǔn),正式名為ECMAScript 2015(ES2015)。它的目標(biāo)是使得JavaScript語鯠臫頭言可以用筿來編寫復(fù)雜的大型應(yīng)用程序,成為企業(yè)級開發(fā)語言。
另外,一些情況下ES6也泛指ES2015及之后的新增特性,雖然之后的版本應(yīng)當(dāng)稱為ES7、ES8等。
ES6發(fā)展
2000年,ECMAScript 4.0開始醞釀。這個(gè)版本最后沒有通過,但是它的大部分內(nèi)容被ECMAScript6繼承了。因此,ECMAScript6制定的起點(diǎn)其實(shí)是2000年。
2007年10月,ECMAScript 4.0草案發(fā)布,本來預(yù)計(jì)2008年8月發(fā)布正式版本。但是,各方對于是否通過這個(gè)標(biāo)準(zhǔn),發(fā)生了嚴(yán)重分歧。以Yahoo、Microsoft、Google為首的大公司,反對JavaScript的大幅升級,主張小幅改動(dòng);以JavaScript創(chuàng)造者Brendan Eich為首的Mozilla公司,則堅(jiān)持當(dāng)前的草案。
2008年7月,由于對于下一個(gè)版本應(yīng)該包括哪些功能,各方分歧太大,爭論過于激烈,ECMA開會(huì)決定,中止ECMAScript 4.0的開發(fā),將其中涉及現(xiàn)有功能改善的一小部分,發(fā)布為ECMAScript 3.1,而將其他激進(jìn)的設(shè)想擴(kuò)大范圍,放入以后的版本,由于會(huì)議的氣氛,該版本的項(xiàng)目代號起名為Harmony(和諧)。會(huì)后不久,ECMAScript 3.1就改名為ECMAScript 5。
2009年12月,ECMAScript 5.0正式發(fā)布。Harmony項(xiàng)目則一分為二,一些較為可行的設(shè)想定名為 JavaScript.next繼續(xù)開發(fā),后來演變成ECMAScript 6;一些不是很成熟的設(shè)想,則被視為JavaScript.next.next,在更遠(yuǎn)的將來再考慮推出。
2011年,ECMAScript 5.1發(fā)布后開始6.0版的制定。
2013年3月,ECMAScript 6草案凍結(jié),不再添加新功能。新的功能設(shè)想將被放到ECMAScript 7。
2013年12月,ECMAScript 6草案發(fā)布。然后是12個(gè)月的討論期,聽取各方反饋。由于這個(gè)版本引入的語法功能太多,而且制定過程當(dāng)中,還有很多組織和個(gè)人不斷提交新功能。標(biāo)準(zhǔn)委員會(huì)最終決定,標(biāo)準(zhǔn)在每年的6月份正式發(fā)布一次,作為當(dāng)年的正式版本。接下來的時(shí)間,就在這個(gè)版本的基礎(chǔ)上做改動(dòng),直到下一年的6月份,草案就自然變成了新一年的版本。
2015年6月,ECMAScript 6(ES6)正式通過,成為國際標(biāo)準(zhǔn),正式名稱是“ECMAScript 2015”(簡稱ES2015)。
2016年6月,小幅修訂的“ECMAScript 2016”(簡稱ES2016或ES7)標(biāo)準(zhǔn)發(fā)布,相當(dāng)于ES6.1版,因?yàn)閮烧叩牟町惙浅P。ㄖ恍略隽藬?shù)組實(shí)例的includes方法和指數(shù)運(yùn)算符),基本上是同一個(gè)標(biāo)準(zhǔn)。
ES6新增功能
聲明命令
1. let命令
ES6新增了let命令,用來聲明變量。它的用法類似于var,但是所聲明的變量,只在let命令所在的代碼塊內(nèi)有效。下面代碼在代碼塊之中,分別用let和var聲明了兩個(gè)變量。然后在代碼塊之外調(diào)用這兩個(gè)變量,結(jié)果let聲明的變量報(bào)錯(cuò),var聲明的變量返回了正確的值。這表明,let聲明的變量只在它所在的代碼塊有效。
for循環(huán)的計(jì)數(shù)器,就很合適使用let命令,計(jì)數(shù)器i只在for循環(huán)體內(nèi)有效,在循環(huán)體外引用就會(huì)報(bào)錯(cuò):
下面的代碼如果使用var,最后輸出的是10。因?yàn)樽兞縤是var命令聲明的,在全局范圍內(nèi)都有效,每一次循環(huán),變量i的值都會(huì)發(fā)生改變,而循環(huán)內(nèi)被賦給數(shù)組a的函數(shù)內(nèi)部的console.log(i),里面的i指向的就是全局的i。也就是說,所有數(shù)組a的成員里面的i,指向的都是同一個(gè)i,導(dǎo)致運(yùn)行時(shí)輸出的是最后一輪的i的值,也就是10。
如鯠臫果使頭筿用let,聲明的變量僅在塊級作用域內(nèi)有效,最后輸出的是6。因?yàn)樽兞縤是let聲明的,當(dāng)前的i只在本輪循環(huán)有效,所以每一次循環(huán)的i其實(shí)都是一個(gè)新的變量,所以最后輸出的是6。由于JavaScript引擎內(nèi)部會(huì)記住上一輪循環(huán)的值,初始化本輪的變量i時(shí),就在上一輪循環(huán)的基礎(chǔ)上進(jìn)行計(jì)算:
let不允許在相同作用域內(nèi),重復(fù)聲明同一個(gè)變量,不能在函數(shù)內(nèi)部相同模塊范圍重新聲明參數(shù)。
另外,for循環(huán)還有一個(gè)特別之處,就是設(shè)置循環(huán)變量的那部分是一個(gè)單獨(dú)的父作用域,而循環(huán)體內(nèi)部是子作用域:
var命令會(huì)發(fā)生“變量提升”現(xiàn)象,即變量可以在聲明之前使用,值為undefined。為了糾正這種現(xiàn)象,let命令改變了語法行為,它所聲明的變量一定要在聲明后使用,否則報(bào)錯(cuò)。這在語法上,稱為“暫時(shí)性死區(qū)”(temporal dead zone,簡稱TDZ)。
let實(shí)際上為JavaScript新增了塊級作用域,在{}被包圍的范圍外,不受內(nèi)層的let變量影響(但會(huì)受var的“變量提升”影響):
2. const命令
const聲明一個(gè)只讀的常量。一旦聲明,常量的值就不能改變,且聲明時(shí)必須立即初始化,不能留到以后賦值。const的作用域與let命令相同:只在聲明所在的塊級作用域內(nèi)有效。
const實(shí)際上保證的,并不是變量的值不得改動(dòng),而是變量指向的那個(gè)內(nèi)存地址不得改動(dòng)。對于簡單類型的數(shù)據(jù)(數(shù)值、字符串、布爾值),值就保存在變量指向的那個(gè)內(nèi)存地址,因此等同于常量。但對于復(fù)合類型的數(shù)據(jù)(主要是對象和數(shù)組),變量指向的內(nèi)存地址,保存的只是一個(gè)指針,const只能保證這個(gè)指針是固定的,至于它指向的數(shù)據(jù)結(jié)構(gòu)是不是可變的,就完全不能控制了。因此,將一個(gè)對象聲明為常量必須非常小心。
如果真的想將對象或?qū)ο髮傩詢鼋Y(jié),應(yīng)該使用Object.freeze方法。
3.Class命令
ES6 提供了更接近傳統(tǒng)語言的寫法,引入了Class(類)這個(gè)概念(類的數(shù)據(jù)類型就是函數(shù),類本身就指向構(gòu)造函數(shù)),作為對象的模板。通過class關(guān)鍵字,可以定義類。class可以看作只是一個(gè)語法糖,它的絕大部分功能,ES5都可以做到,新的class寫法只是讓對象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法而已:
構(gòu)造函數(shù)的prototype屬性,在ES6的類上面繼續(xù)存在。事實(shí)上,類的所有方法都定義在類的prototype屬性上面。但類的內(nèi)部所有定義的方法,都是不可枚舉的(non-enumerable):
類的屬性名,可以采用表達(dá)式:
與函數(shù)一樣,類也可以使用表達(dá)式的形式定義。下面代碼使用表達(dá)式定義了一個(gè)類。需要注意的是,這個(gè)類的名字是MyClass而不是Me,Me只在 Class 的內(nèi)部代碼可用,指代當(dāng)前類:
類相當(dāng)于實(shí)例的原型,所有在類中定義的方法,都會(huì)被實(shí)例繼承。如果在一個(gè)方法前,加上static關(guān)鍵字,就表示該方法不會(huì)被實(shí)例繼承,而是直接通過類來調(diào)用,這就稱為“靜態(tài)方法”。
如果靜態(tài)方法包含this關(guān)鍵字,這個(gè)this指的是類,而不是實(shí)例。靜態(tài)方法可以與非靜態(tài)方法重名,父類的靜態(tài)方法,可以被子類繼承:
4.import命令
import雖然屬于聲明命令,但它是和export命令配合使用的。export命令用于規(guī)定模塊的對外接口,import命令用于輸入其他模塊提供的功能。
一個(gè)模塊就是一個(gè)獨(dú)立的文件。該文件內(nèi)部的所有變量,外部無法獲取。如果外部能夠讀取模塊內(nèi)部的某個(gè)變量、函數(shù)或類,就必須使用export關(guān)鍵字輸出。export輸出的變量就是本來的名字,但是可以使用as關(guān)鍵字重命名:
export語句輸出的接口,與其對應(yīng)的值是動(dòng)態(tài)綁定關(guān)系,即通過該接口,可以取到模塊內(nèi)部實(shí)時(shí)的值。這一點(diǎn)與CommonJS規(guī)范完全不同,CommonJS模塊輸出的是值的緩存。export命令可以出現(xiàn)在模塊的任何位置,只要處于模塊頂層就可以。如果處于塊級作用域內(nèi),就會(huì)報(bào)錯(cuò):
使用export命令定義了模塊的對外接口以后,其他JS文件就可以通過import命令加載這個(gè)模塊,變量名必需與被導(dǎo)入模塊(profile.js)對外接口的名稱相同。import命令可以使用as關(guān)鍵字,將輸入的變量重命名。除了指定加載某個(gè)輸出值,還可以使用整體加載,即用*指定一個(gè)對象,所有輸出值都加載在這個(gè)對象上面。
import命令輸入的變量都是只讀的,因?yàn)樗谋举|(zhì)是輸入接口。也就是說,不允許在加載模塊的腳本里面,改寫接口。但是,如果是一個(gè)對象,改寫對象的屬性是允許的。并且由于import是靜態(tài)執(zhí)行,所以不能使用表達(dá)式和變量,這些只有在運(yùn)行時(shí)才能得到結(jié)果的語法結(jié)構(gòu)。
注意,import命令具有提升效果,會(huì)提升到整個(gè)模塊的頭部,首先執(zhí)行。import可以不導(dǎo)入模塊中的任何內(nèi)容,只運(yùn)行模塊中的全局代碼。如果多次執(zhí)行同一模塊的import語句,那么只會(huì)執(zhí)行一次其全局代碼,但變量均會(huì)正常引入(相當(dāng)于合并處理)。
除了用大括號引入變量,import還可以直接自定義引入默認(rèn)變量:
解構(gòu)賦值
ES6允許按照一定模式,從數(shù)組和對象中提取值,對變量進(jìn)行賦值,這被稱為解構(gòu)(Destructuring)。本質(zhì)上,這種寫法屬于“模式匹配”,只要等號兩邊的模式相同,左邊的變量就會(huì)被賦予對應(yīng)的值。
解構(gòu)賦值允許指定默認(rèn)值,只有當(dāng)一個(gè)數(shù)組成員嚴(yán)格等于undefined,默認(rèn)值才會(huì)生效:
解構(gòu)不僅可以用于數(shù)組,還可以用于對象。對象的解構(gòu)與數(shù)組有一個(gè)重要的不同。數(shù)組的元素是按次序排列的,變量的取值由它的位置決定;而對象的屬性沒有次序,變量必須與屬性同名,才能取到正確的值。