前端開發(fā)--ES6新特性
發(fā)布日期:2020-11-11 11:57

1、let 和 const 命令

·使用let聲明的變量可以重新賦值,但是不能在同一作用域內(nèi)重新聲明

·使用const聲明的變量必須賦值初始化,但是不能在同一作用域類重新聲明也無法重新賦值

2數(shù)組的展開運(yùn)算

var arr =[1,2,3,4,5,6];

console.log(arr);//[1, 2, 3, 4, 5, 6]

console.log(...arr)// 1 2 3 4 5 6

在數(shù)組之前加上三個(gè)點(diǎn) ...

3、字符串的擴(kuò)展

·字符的 Unicode 表示法

·字符串的遍歷器接口

·直接輸入 U+2028 和 U+2029

·JSON.stringify() 的改造

·模板字符串

·實(shí)例:模板編譯

·標(biāo)簽?zāi)0?/span>

·模板字符串的限制

4、字符串的新增方法

·String.fromCodePoint():從 Unicode 碼點(diǎn)返回對應(yīng)字符

·String.raw():返回一個(gè)斜杠都被轉(zhuǎn)義(即斜杠前面再加一個(gè)斜杠)的字符串,往往用于模板字符串的處理方法。

·codePointAt():能夠正確處理 4 個(gè)字節(jié)儲存的字符,返回一個(gè)字符的碼點(diǎn)。

·normalize():用來將字符的不同表示方法統(tǒng)一為同樣的形式,這稱為 Unicode 正規(guī)化。

·includes(), startsWith(), endsWith():是否包含、在頭部、在尾部

·repeat():返回一個(gè)新字符串,表示將原字符串重復(fù)n次。

·padStart(),padEnd():補(bǔ)全頭部、尾部

·trimStart(),trimEnd():消除頭部、尾部空格

·matchAll():返回一個(gè)正則表達(dá)式在當(dāng)前字符串的所有匹配

5、正則的擴(kuò)展

·RegExp 構(gòu)造函數(shù)

·字符串的正則方法

·u 修飾符

·RegExp.prototype.unicode 屬性

·y 修飾符

·RegExp.prototype.sticky 屬性

·RegExp.prototype.flags 屬性

·s 修飾符:dotAll 模式

·后行斷言

·Unicode 屬性類

·具名組匹配

·String.prototype.matchAll

6、數(shù)值的擴(kuò)展

·二進(jìn)制和八進(jìn)制表示法

·Number.isFinite(), Number.isNaN()

·Number.parseInt(), Number.parseFloat()

·Number.isInteger()

·Number.EPSILON

·安全整數(shù)和 Number.isSafeInteger()

·Math 對象的擴(kuò)展

·指數(shù)運(yùn)算符

7、函數(shù)的擴(kuò)展

·函數(shù)參數(shù)的默認(rèn)值

·rest 參數(shù)

·嚴(yán)格模式

·name 屬性

·箭頭函數(shù)

·尾調(diào)用優(yōu)化

·函數(shù)參數(shù)的尾逗號

8、數(shù)組的擴(kuò)展

·擴(kuò)展運(yùn)算符

·Array.from()

·Array.of()

·copyWithin()

·find() 和 findIndex()

·fill()

·entries(),keys() 和 values()

·includes()

·flat(),flatMap()

·數(shù)組的空位

9、對象的擴(kuò)展

·屬性的簡潔表示法

·屬性名表達(dá)式

·方法的 name 屬性

·屬性的可枚舉性和遍歷

·super 關(guān)鍵字

·對象的擴(kuò)展運(yùn)算符

10、對象的新增方法

·Object.is()

·Object.assign()

·Object.getOwnPropertyDescriptors()

·__proto__屬性,Object.setPrototypeOf(),Object.getPrototypeOf()

·Object.keys(),Object.values(),Object.entries()

·Object.fromEntries()

11、Symbol

ES6 引入了一種新的原始數(shù)據(jù)類型Symbol,表示獨(dú)一無二的值。它是 JavaScript 語言的第七種數(shù)據(jù)類型

12、Set 和 Map 數(shù)據(jù)結(jié)構(gòu)

ES6中新的數(shù)據(jù)結(jié)構(gòu)Set:它類似于數(shù)組,但是成員的值都是唯一的,沒有重復(fù)的值。

Set本身是一個(gè)構(gòu)造函數(shù),用來生成Set數(shù)據(jù)結(jié)構(gòu)。

Set結(jié)構(gòu)的實(shí)例有四個(gè)遍歷方法,可以用于遍歷成員。

·keys():返回鍵名的遍歷器

·values():返回鍵值的遍歷器

·entries():返回鍵值對的遍歷器

·forEach():使用回調(diào)函數(shù)遍歷每個(gè)成員

ES6中Map數(shù)據(jù)結(jié)構(gòu):類似于對象,也是鍵值對的集合,但是“鍵”的范圍不限于字符串,各種類型的值(包括對象)都可以當(dāng)作鍵。

也就是說,Object結(jié)構(gòu)提供了“字符串—值”的對應(yīng),Map結(jié)構(gòu)提供了“值—值”的對應(yīng),是一種更完善的Hash結(jié)構(gòu)實(shí)現(xiàn)。

如果你需要“鍵值對”的數(shù)據(jù)結(jié)構(gòu),Map比Object更合適。

13、Proxy

Proxy 在目標(biāo)對象之前架設(shè)一層“攔截”,外界對該對象的訪問,都必須先通過這層攔截,因此提供了一種機(jī)制,可以對外界的訪問進(jìn)行過濾和改寫??梢詳r截目標(biāo)對象的任意屬性

14、Reflect

·Reflect對象與Proxy對象一樣,也是 ES6 為了操作對象而提供的新 API。

·Object對象的一些明顯屬于語言內(nèi)部的方法(比如Object.defineProperty),放到Reflect對象上。

·修改某些Object方法的返回結(jié)果,讓其變得更合理。

·Object操作都變成函數(shù)行為。

·Reflect對象的方法與Proxy對象的方法一一對應(yīng),只要是Proxy對象的方法,就能在Reflect對象上找到對應(yīng)的方法。

15、Promise 對象

 Promise 是異步編程的一種解決方案,可以將異步操作以同步操作的流程表達(dá)出來,避免了層層嵌套的回調(diào)函數(shù)。此外,Promise對象提供統(tǒng)一的接口,使得控制異步操作更加容易。

缺點(diǎn):

·無法取消Promise,一旦新建它就會立即執(zhí)行,無法中途取消。

·如果不設(shè)置回調(diào)函數(shù),Promise內(nèi)部拋出的錯(cuò)誤,不會反應(yīng)到外部。

·當(dāng)處于pending狀態(tài)時(shí),無法得知目前進(jìn)展到哪一個(gè)階段(剛剛開始還是即將完成)。

16、Iterator 和 for...of 循環(huán)

遍歷器(Iterator)針對四種數(shù)據(jù)集合【數(shù)組(Array)和對象(Object),ES6 又添加了MapSet】,提供一種接口,為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問機(jī)制。任何數(shù)據(jù)結(jié)構(gòu)只要部署 Iterator 接口,就可以完成遍歷操作(即依次處理該數(shù)據(jù)結(jié)構(gòu)的所有成員)。

Iterator 的作用有三個(gè):

一是為各種數(shù)據(jù)結(jié)構(gòu),提供一個(gè)統(tǒng)一的、簡便的訪問接口;

二是使得數(shù)據(jù)結(jié)構(gòu)的成員能夠按某種次序排列;

三是 ES6 創(chuàng)造了一種新的遍歷命令for...of循環(huán),Iterator 接口主要供for...of消費(fèi)。

17、Generator 函數(shù)的語法

Generator 函數(shù)是 ES6 提供的一種異步編程解決方案,語法行為與傳統(tǒng)函數(shù)完全不同。

語法上,Generator 函數(shù)是一個(gè)狀態(tài)機(jī),封裝了多個(gè)內(nèi)部狀態(tài)。

形式上,Generator 函數(shù)是一個(gè)普通函數(shù),但是有兩個(gè)特征。一是,function關(guān)鍵字與函數(shù)名之間有一個(gè)星號;二是,函數(shù)體內(nèi)部使用yield表達(dá)式,定義不同的內(nèi)部狀態(tài)(yield在英語里的意思就是“產(chǎn)出”)。

18、Generator 函數(shù)的異步應(yīng)用

整個(gè) Generator 函數(shù)就是一個(gè)封裝的異步任務(wù),或者說是異步任務(wù)的容器。異步操作需要暫停的地方,都用yield語句注明。

19、async 函數(shù)

ES2017 標(biāo)準(zhǔn)引入了 async 函數(shù),使得異步操作變得更加方便。它就是 Generator 函數(shù)的語法糖。

async函數(shù)就是將 Generator 函數(shù)的星號(*)替換成async,將yield替換成await,僅此而已。

async函數(shù)對 Generator 函數(shù)的改進(jìn),體現(xiàn)在以下四點(diǎn):

(1)內(nèi)置執(zhí)行器。

調(diào)用函數(shù)就會自動執(zhí)行,輸出最后結(jié)果。完全不像 Generator 函數(shù),需要調(diào)用next方法,或者用co模塊,才能真正執(zhí)行,得到最后結(jié)果。

(2)更好的語義。

asyncawait,比起星號和yield,語義更清楚了。async表示函數(shù)里有異步操作,await表示緊跟在后面的表達(dá)式需要等待結(jié)果。

(3)更廣的適用性。

co模塊約定,yield命令后面只能是 Thunk 函數(shù)或 Promise 對象,而async函數(shù)的await命令后面,可以是 Promise 對象和原始類型的值(數(shù)值、字符串和布爾值,但這時(shí)會自動轉(zhuǎn)成立即 resolved 的 Promise 對象)。

(4)返回值是 Promise。

async函數(shù)的返回值是 Promise 對象,這比 Generator 函數(shù)的返回值是 Iterator 對象方便多了。你可以用then方法指定下一步的操作。

20、Class 的基本語法

class可以看作只是一個(gè)語法糖,它的絕大部分功能,ES5 都可以做到,新的class寫法只是讓對象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法而已。

21、Class 的繼承

 Class 可以通過extends關(guān)鍵字實(shí)現(xiàn)繼承,子類必須在constructor方法中調(diào)用super方法,必須先通過父類的構(gòu)造函數(shù)完成塑造,得到與父類同樣的實(shí)例屬性和方法,得到this對象

22、Module 的語法

ES6 在語言標(biāo)準(zhǔn)的層面上,實(shí)現(xiàn)了模塊功能,而且實(shí)現(xiàn)得相當(dāng)簡單,完全可以取代 CommonJS 和 AMD 規(guī)范,成為瀏覽器和服務(wù)器通用的模塊解決方案。

ES6 模塊的設(shè)計(jì)思想是盡量的靜態(tài)化,使得編譯時(shí)就能確定模塊的依賴關(guān)系,以及輸入和輸出的變量。CommonJS 和 AMD 模塊,都只能在運(yùn)行時(shí)確定這些東西。

模塊功能主要由兩個(gè)命令構(gòu)成:exportimport。export命令用于規(guī)定模塊的對外接口,import命令用于輸入其他模塊提供的功能。

一個(gè)模塊就是一個(gè)獨(dú)立的文件。該文件內(nèi)部的所有變量,外部無法獲取。如果你希望外部能夠讀取模塊內(nèi)部的某個(gè)變量,就必須使用export關(guān)鍵字輸出該變量。

23、Module 的加載實(shí)現(xiàn)

瀏覽器加載 ES6 模塊,也使用<script>標(biāo)簽,但是要加入type="module"屬性。

瀏覽器對于帶有type="module"<script>,都是異步加載,不會造成堵塞瀏覽器,即等到整個(gè)頁面渲染完,再執(zhí)行模塊腳本,等同于打開了<script>標(biāo)簽的defer屬性。

上映科技有限公司