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

1、let 和(hé) const 命令

·使用let聲明的變量可(kě)以重新賦值,但是不能在同一作用域内重新聲明

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

2數組的展開運算

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

在數組之前加上三個(gè)點 ...

3、字符串的擴展

·字符的 Unicode 表示法

·字符串的遍曆器(qì)接口

·直接輸入 U+2028 和(hé) U+2029

·JSON.stringify() 的改造

·模闆字符串

·實例:模闆編譯

·标簽模闆

·模闆字符串的限制

4、字符串的新增方法

·String.fromCodePoint(煙個):從 Unicode 碼點返回對應字符月會

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

·codePointAt():能夠正确處理 4 個(g房光è)字節儲存的字符,返回一個(gè)字符的碼點。

·normalize():用來将字符的不同表示方法統一為同樣的形式,個有這稱為 Unicode 正規化。

·includes(), startsWith(), endsWi場國th():是否包含、在頭部、在尾部

·repeat():返回一個(gè)新字符串,表示将原字符吃票串重複n次。

·padStart(),padEnd():個那補全頭部、尾部

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

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

5、正則的擴展

·RegExp 構造函數

·字符串的正則方法

·u 修飾符

·RegExp.prototype.unic土兒ode 屬性

·y 修飾符

·RegExp.prototype.sticky 屬性車離

·RegExp.prototype.fla銀身gs 屬性

·s 修飾符:dotAll 模式

·後行斷言

·Unicode 屬性類

·具名組匹配

·String.prototype.match厭玩All

6、數值的擴展

·二進制和(hé)八進制表示法

·Number.isFinite(), Numb上件er.isNaN()

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

·Number.isInteger()

·Number.EPSILON

·安全整數和(hé) Number.isSafeInteger()

·Math 對象的擴展

·指數運算符

7、函數的擴展

·函數參數的默認值

·rest 參數

·嚴格模式

·name 屬性

·箭頭函數

·尾調用優化

·函數參數的尾逗号

8、數組的擴展

·擴展運算符

·Array.from()

·Array.of()

·copyWithin()

·find() 和(hé) findIndex()

·fill()

·entries(),keys() 和(hé) values煙公()

·includes()

·flat(),flatMap()

·數組的空位

9、對象的擴展

·屬性的簡潔表示法

·屬性名表達式

·方法的 name 屬性

·屬性的可(kě)枚舉性和(hé)遍曆

·super 關(guān)鍵字

·對象的擴展運算符

10、對象的新增方法

·Object.is()

·Object.assign()

·Object.getOwnPropertyDescriptors秒朋()

·__proto__屬性,Object.set來我PrototypeOf(),Object.getPrototype個劇Of()

·Object.keys(),Object.values(),Ob弟西ject.entries()

·Object.fromEntries()

11、Symbol

ES6 引入了一種新的原始數據類型Symbol,表示獨一無二的值。它是 JavaScrip的這t 語言的第七種數據類型

12、Set 和(hé) Map 數據結構

ES6中(zhōng)新的數據結構Set:它類似于數組,但是成員的值都是唯一的,沒有重商頻複的值。

Set本身是一個(gè)構造函數,用來生成Set數據結構。

Set結構的實例有四個(gè)遍曆方法,可(kě)以用于遍數風曆成員。

·keys():返回鍵名的遍曆器(qì)

·values():返回鍵值的遍曆器(qì)

·entries():返回鍵值對的遍曆器(qì)

·forEach():使用回調函數遍曆每個(gè)成員

ES6中(zhōng)Map數據結構:類似于對象,也是鍵值對的集合,但是“鍵”的範圍不限于字符串自能,各種類型的值(包括對象)都可(kě)以當作鍵。

也就是說,Object結構提供了“字符串—值”的對應,M理票ap結構提供了“值—值”的對應,是一種更完善的Hash結構實現。

如(rú)果你(nǐ)需要“鍵值對”的數據結構,Map比Obj讀聽ect更合适。

13、Proxy

Proxy 在目标對象之前架設一層“攔截”,外高訊界對該對象的訪問(wèn),都必須先通(tō嗎請ng)過這層攔截,因此提供了一種機制,可(kě)以對外界的訪問(wèn)進樂厭行過濾和(hé)改寫。可(kě)以攔截目标對象的任意屬性花這

14、Reflect

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

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

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

·Object操作都變成函數行為。

·Reflect對象的方法與Proxy對象的方法一一對應,隻要是Proxy對象的方法,就能在Reflect對象上找到對應的方法。

15、Promise 對象

 Promise 是異步編程的一種解決方案,可(kě)以将異南靜步操作以同步操作的流程表達出來,避免了層層嵌套的回調函空答數。此外,Promise對象提供統一的接口,使得控制異步操作更加容易。

缺點:

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

·如(rú)果不設置回調函數,Promise内部抛出的錯誤,不會反應到外部。

·當處于pending狀态時,無法得知目前進展到哪一個(gè)我現階段(剛剛開始還是即将完成)。

16、Iterator 和(hé) for...of 業妹循環

遍曆器(qì)(Iterator)針對四種數據集合【務呢數組(Array)和(hé)對象(Object),ES6 又添加了Map和(hé)Set】,提供一種接口,為各種不同的數據結構提供統一的訪問(wèn)機畫唱制。任何數據結構隻要部署 Iterator 接口,就可兵工(kě)以完成遍曆操作(即依次處理該數據結構的所有成員)。

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

一是為各種數據結構,提供一個(gè)統一的、簡便的訪問(wèn)接口;

二是使得數據結構的成員能夠按某種次序排列;

三是 ES6 創造了一種新的遍曆命令for...of循環,Iterator 接口主要供for...of消費。

17、Generator 函數的語法

Generator 函數是 ES6 提供的一種異步編程會報解決方案,語法行為與傳統函數完全不同。

語法上,Generator 函數是一個(gè)狀态機煙上,封裝了多個(gè)内部狀态。

形式上,Generator 函數是一個(gè)普通(t花志ōng)函數,但是有兩個(gè)特征。一是,function關(guān)鍵字與函數名之間有一個(gè)星号;二是,厭拍函數體内部使用yield表達式,定義不同的内部狀态(yield在英語裡的意思就是“産出”)。

18、Generator 函數的異步應用

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

19、async 函數

ES2017 标準引入了 async 函數,使得異步操作變得更加火短方便。它就是 Generator 函數的語法小喝糖。

async函數就是将 Generator 函數的星号(*)替換成async,将yield替換成await,僅此而已。

async函數對 Generator 函數的改進,體現在以下(xià)通放四點:

(1)内置執行器(qì)。

調用函數就會自動(dòng)執行,輸出最後結果。完全不像 G拍南enerator 函數,需要調用next方法,或者用co模塊,才能真正執行,得到最後結果。

(2)更好的語義。

async和(hé)await,比起星号和(hé)yield,語義更清楚了。async表示函數裡有異步操作,await表示緊跟在後面的表達式需要等待結果。

(3)更廣的适用性。

co模塊約定,yield命令後面隻能是 Thunk 函數或 Promise 對象,而async函數的await命令後面,可(kě)以是 Promise 對地話象和(hé)原始類型的值(數值、字符串和(hé)布爾值門器,但這時會自動(dòng)轉成立即 resolved 術技的 Promise 對象)。

(4)返回值是 Promise。

async函數的返回值是 Promise 對象,這比 Generator 函數的返回家熱值是 Iterator 對象方便多了。你(nǐ)可(kě)以用then方法指定下(xià)一步的操作。

20、Class 的基本語法

class可(kě)以看作隻是一個(gè)語法糖,老物它的絕大部分功能,ES5 都可(kě)以做到,新的class寫法隻是讓對象原型的寫法更加清晰、更像面向對象編程姐為的語法而已。

21、Class 的繼承

 Class 可(kě)以通(tōng)過extends關(guān)鍵字實現繼承,子(zǐ)類就慢必須在constructor方法中(zhōng)調用super方法,必須先通(tōng)過父類的構造函數完成塑造,得到與裡西父類同樣的實例屬性和(hé)方法,得到this對象

22、Module 的語法

ES6 在語言标準的層面上,實現了模塊功能木會,而且實現得相當簡單,完全可(kě)以取代 CommonJS 和(hé) 近做AMD 規範,成為浏覽器(qì)和(hé)服務器(qì)通(tōng)用湖南的模塊解決方案。

ES6 模塊的設計思想是盡量的靜态化,使得編譯時就能确定模塊的依賴關(guān門姐)系,以及輸入和(hé)輸出的變量。CommonJS 和(hé) AMD 模冷為塊,都隻能在運行時确定這些東西。

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

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

23、Module 的加載實現

浏覽器(qì)加載 ES6 模塊,也使用<script>标簽,但是要加入type="module"屬性。

浏覽器(qì)對于帶有type="module"<script>,都是異步加載,不會造成堵塞浏覽器(qì紙門),即等到整個(gè)頁面渲染完,再執行模塊村畫腳本,等同于打開了<script>标簽的defer屬性。

上映科技有限公司