ES6簡介--源動(dòng)力

ES6的發(fā)展歷史

  • 1997年7月,ECMAScript 1.0發(fā)布。

  • 1998年6月,ECMAScript 2.0版發(fā)布。
    1999年12月,ECMAScript 3.0版發(fā)布,成為 J- avaScript 的通行標(biāo)準(zhǔn),得到了廣泛支持。

  • 2007年10月,ECMAScript 4.0版草案發(fā)布,對3.0版做了大幅升級,預(yù)計(jì)次年8月發(fā)布正式版本。草案發(fā)布后,由于4.0版的目
    標(biāo)過于激進(jìn),各方對于是否通過這個(gè)標(biāo)準(zhǔn),發(fā)生了嚴(yán)重分歧。以 Yahoo、Microsoft、Google 為首的大公司,反對 JavaScript
    的大幅升級,主張小幅改動(dòng);以 JavaScript 創(chuàng)造者布蘭登·艾奇為首的 Mozilla 公司,則堅(jiān)持當(dāng)前的草案。

  • 2008年7月,由于對于下一個(gè)版本應(yīng)該包括哪些功能,各方分歧太大,爭論過于激進(jìn),ECMA 開會(huì)決定,
    中止 ECMAScript 4.0 的開發(fā)(即廢除了這個(gè)版本),將其中涉及現(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)的將來再考慮推出。
    TC39 的總體考慮是,ECMAScript 5 與 ECMAScript 3 基本保持兼容,較大的語法修正和新功能加入,將由 JavaScript.next 完成。
    當(dāng)時(shí),JavaScript.next 指的是ECMAScript 6。第六版發(fā)布以后,將指 ECMAScript 7。

  • 2011年6月,ECMAScript 5.1版發(fā)布,并且成為 ISO 國際標(biāo)準(zhǔn)(ISO/IEC 16262:2011)。

  • 到了2012年底,所有主要瀏覽器都支持 ECMAScript 5.1版的全部功能。

  • 2013年3月,ECMAScript 6 草案凍結(jié),不再添加新功能。新的功能設(shè)想將被放到 ECMAScript 7。

  • 2013年12月,ECMAScript 6 草案發(fā)布。然后是12個(gè)月的討論期,聽取各方反饋。

  • 2015年6月,ECMAScript 6 正式發(fā)布,并且更名為“ECMAScript 2015”。這是因?yàn)?TC39 委員會(huì)計(jì)劃,
    以后每年發(fā)布一個(gè) ECMAScript 的版本,下一個(gè)版本在2016年發(fā)布,稱為“ECMAScript 2016”,2017年發(fā)布“ECMAScript 2017”,以此類推。

ECMAScript與JavaScript的關(guān)系

ECMAScript是JavaScript的標(biāo)準(zhǔn),而JavaScript是ECMAScript標(biāo)準(zhǔn)的一種實(shí)現(xiàn)

image.png

JavaScript組成:ECMAScript(核心)、DOM(文檔對象模型)、BOM(瀏覽器對象模型)

image.png

ECMAScript規(guī)定了Js的如下內(nèi)容:
1.語法
2.類型
3.語句
4.關(guān)鍵字
5.保留字
6.操作符
7.對象

ES6特性

Js的基礎(chǔ):https://wangdoc.com/javascript/
Es6入門:https://es6.ruanyifeng.com
瀏覽器對ES6的支持:http://ruanyf.github.io/es-checker/index.cn.html

image.png

1.變量定義(let和const)

1).let定義的變量只在它聲明的作用域內(nèi)有效,出了作用域無法訪問

image.png

2).const保證了變量的地址空間存儲(chǔ)的數(shù)據(jù)不得改動(dòng)

image.png

變量的解構(gòu)賦值

解構(gòu)賦值:
ES6允許我們通過模式匹配的方式從已有的數(shù)組、對象中提取值并賦值給變量

image.png

3.類型擴(kuò)展

字符串?dāng)U展:

image.png
image.png

數(shù)值擴(kuò)展:

image.png

函數(shù)擴(kuò)展:

image.png

數(shù)組擴(kuò)展:

image.png

對象擴(kuò)展:

image.png

4.類型新增

ES6增加了Set 和 Map 2個(gè)類型。
Set是集合,類似數(shù)組但是里面的元素是不可以重復(fù)的

image.png

Map是鍵值對,以前想使用鍵值對只能通過對象類處理,
現(xiàn)在直接有一個(gè)類型可用。

image.png

5.元編程

類似在.NET中我們可以針對IL進(jìn)行編程操作,通過編織動(dòng)態(tài)代理對象來進(jìn)行AOP一樣。ES6提供了Proxy類型,它可以幫助我們做AOP。當(dāng)需要針對對象進(jìn)行初始化以及
針對對象屬性進(jìn)行獲取、調(diào)整、刪除的時(shí)候我們都可以進(jìn)行攔截,它為我們提供了13種攔截操作。

image.png
image.png
image.png

Reflect對象和Proxy對象一樣,也是ES6提供的操作對象的新API。Reflect對象上面的方法和Proxy對象的方法一一對應(yīng)。
1).把原先不合理的API設(shè)計(jì)往Reflect對象上面遷移,比如Object.defineProperty
2).把js中一些命令式的語法變?yōu)楹瘮?shù)行為,比如delete a.name
3).配合Proxy執(zhí)行對象的默認(rèn)行為

image.png

6.異步編程

ES6提供了Promise對象,這是一種異步編程的解決方案。
Promise充當(dāng)異步操作和回調(diào)函數(shù)之間的媒介。用法上和jQuery的deferred對象很像

image.png
image.png

使用promise優(yōu)化解決AJAX回調(diào)地獄問題,并且有鏈?zhǔn)綄懛?/p>

image.png
image.png

async關(guān)鍵字

image.png

7.Generator函數(shù)

Generator 函數(shù)是 ES6 提供的一種異步編程解決方案。看下面案例:

image.png

Generator函數(shù)與普通函數(shù)相比在function關(guān)鍵字后面
加了,ES6沒有規(guī)定號的具體位置,但是建議緊跟
Function關(guān)鍵字后面。此外Generator函數(shù)會(huì)與yield關(guān)鍵字組合使用,看到y(tǒng)ield我們應(yīng)該能想到狀態(tài)機(jī)。

1).代碼遇到y(tǒng)ield表達(dá)式,暫停執(zhí)行后面的操作
2).代碼調(diào)用next方法才會(huì)獲取到返回值,然后代碼繼續(xù)往下執(zhí)行直到遇到下一個(gè)next
3).遇到下一個(gè)return就結(jié)束,如果沒有return就返回undefined

8.類

ES6增加了類的功能以及類的繼承功能:

image.png

9.模塊化

ES6增加了模塊(module)體系,它可以將一個(gè)大程序拆分成互相依賴的小文件,就像積木一樣,在通過組合的方式組裝起來。ES6 的模塊系統(tǒng)主要由2個(gè)命令構(gòu)建 export 和 import。export 用于輸出模塊對外接口,而import用于輸入模塊提供的功能

image.png

前端開發(fā)

image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容