前端知識總結--ES6新特性

ECMAScript 6.0（如下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在 2015 年 6 月正式發佈了。它的目標，是使得 JavaScript 語言能夠用來編寫複雜的大型應用程序，成爲企業級開發語言。

整理下ES6的新特性，具體用法不詳細描述，只做爲總結概括

一、let 和 const 命令

• 使用let聲明的變量能夠從新賦值,可是不能在同一做用域內從新聲明
• 使用const聲明的變量必須賦值初始化,可是不能在同一做用域類從新聲明也沒法從新賦值

二、變量的解構賦值

• 數組的解構賦值
• 對象的解構賦值
• 字符串的解構賦值
• 數值和布爾值的解構賦值
• 函數參數的解構賦值
• 圓括號問題

三、字符串的擴展

• 字符的 Unicode 表示法
• 字符串的遍歷器接口
• 直接輸入 U+2028 和 U+2029
• JSON.stringify() 的改造
• 模板字符串
• 實例：模板編譯
• 標籤模板
• 模板字符串的限制

四、字符串的新增方法

• String.fromCodePoint()：從 Unicode 碼點返回對應字符
• String.raw()：返回一個斜槓都被轉義（即斜槓前面再加一個斜槓）的字符串，每每用於模板字符串的處理方法。
• codePointAt()：可以正確處理 4 個字節儲存的字符，返回一個字符的碼點。
• normalize()：用來將字符的不一樣表示方法統一爲一樣的形式，這稱爲 Unicode 正規化。
• includes(), startsWith(), endsWith()：是否包含、在頭部、在尾部
• repeat()：返回一個新字符串，表示將原字符串重複n次。
• padStart()，padEnd()：補全頭部、尾部
• trimStart()，trimEnd()：消除頭部、尾部空格
• matchAll()：返回一個正則表達式在當前字符串的全部匹配

五、正則的擴展

• RegExp 構造函數
• 字符串的正則方法
• u 修飾符
• RegExp.prototype.unicode 屬性
• y 修飾符
• RegExp.prototype.sticky 屬性
• RegExp.prototype.flags 屬性
• s 修飾符：dotAll 模式
• 後行斷言
• Unicode 屬性類
• 具名組匹配
• String.prototype.matchAll

六、數值的擴展

• 二進制和八進制表示法
• Number.isFinite(), Number.isNaN()
• Number.parseInt(), Number.parseFloat()
• Number.isInteger()
• Number.EPSILON
• 安全整數和 Number.isSafeInteger()
• Math 對象的擴展
• 指數運算符

七、函數的擴展

• 函數參數的默認值
• rest 參數
• 嚴格模式
• name 屬性
• 箭頭函數
• 尾調用優化
• 函數參數的尾逗號

八、數組的擴展

• 擴展運算符
• Array.from()
• Array.of()
• copyWithin()
• find() 和 findIndex()
• fill()
• entries()，keys() 和 values()
• includes()
• flat()，flatMap()
• 數組的空位

九、對象的擴展

• 屬性的簡潔表示法
• 屬性名錶達式
• 方法的 name 屬性
• 屬性的可枚舉性和遍歷
• super 關鍵字
• 對象的擴展運算符

十、對象的新增方法

• Object.is()
• Object.assign()
• Object.getOwnPropertyDescriptors()
• __proto__屬性，Object.setPrototypeOf()，Object.getPrototypeOf()
• Object.keys()，Object.values()，Object.entries()
• Object.fromEntries()

十一、Symbol

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

十二、Set 和 Map 數據結構

ES6中新的數據結構Set：它相似於數組，可是成員的值都是惟一的，沒有重複的值。

Set自己是一個構造函數，用來生成Set數據結構。

Set結構的實例有四個遍歷方法，能夠用於遍歷成員。

• keys()：返回鍵名的遍歷器
• values()：返回鍵值的遍歷器
• entries()：返回鍵值對的遍歷器
• forEach()：使用回調函數遍歷每一個成員

ES6中Map數據結構：相似於對象，也是鍵值對的集合，可是「鍵」的範圍不限於字符串，各類類型的值（包括對象）均可以看成鍵。

也就是說，Object結構提供了「字符串—值」的對應，Map結構提供了「值—值」的對應，是一種更完善的Hash結構實現。

若是你須要「鍵值對」的數據結構，Map比Object更合適。

1三、Proxy

Proxy 在目標對象以前架設一層「攔截」，外界對該對象的訪問，都必須先經過這層攔截，所以提供了一種機制，能夠對外界的訪問進行過濾和改寫。能夠攔截目標對象的任意屬性

1四、Reflect

• Reflect對象與Proxy對象同樣，也是 ES6 爲了操做對象而提供的新 API。
• 將Object對象的一些明顯屬於語言內部的方法（好比Object.defineProperty），放到Reflect對象上。
• 修改某些Object方法的返回結果，讓其變得更合理。
• 讓Object操做都變成函數行爲。
• Reflect對象的方法與Proxy對象的方法一一對應，只要是Proxy對象的方法，就能在Reflect對象上找到對應的方法。

1五、Promise 對象

 Promise 是異步編程的一種解決方案，能夠將異步操做以同步操做的流程表達出來，避免了層層嵌套的回調函數。此外，Promise對象提供統一的接口，使得控制異步操做更加容易。

缺點：

• 沒法取消Promise，一旦新建它就會當即執行，沒法中途取消。
• 若是不設置回調函數，Promise內部拋出的錯誤，不會反應到外部。
• 當處於pending狀態時，沒法得知目前進展到哪個階段（剛剛開始仍是即將完成）。

1六、Iterator 和 for...of 循環

遍歷器（Iterator）針對四種數據集合【數組（Array）和對象（Object），ES6 又添加了Map和Set】，提供一種接口，爲各類不一樣的數據結構提供統一的訪問機制。任何數據結構只要部署 Iterator 接口，就能夠完成遍歷操做（即依次處理該數據結構的全部成員）。

Iterator 的做用有三個：

一是爲各類數據結構，提供一個統一的、簡便的訪問接口；

二是使得數據結構的成員可以按某種次序排列；

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

1七、Generator 函數的語法

Generator 函數是 ES6 提供的一種異步編程解決方案，語法行爲與傳統函數徹底不一樣。

語法上，Generator 函數是一個狀態機，封裝了多個內部狀態。

形式上，Generator 函數是一個普通函數，可是有兩個特徵。一是，function關鍵字與函數名之間有一個星號；二是，函數體內部使用yield表達式，定義不一樣的內部狀態（yield在英語裏的意思就是「產出」）。

1八、Generator 函數的異步應用

整個 Generator 函數就是一個封裝的異步任務，或者說是異步任務的容器。異步操做須要暫停的地方，都用yield語句註明。

 

1九、async 函數

ES2017 標準引入了 async 函數，使得異步操做變得更加方便。它就是 Generator 函數的語法糖。

async函數就是將 Generator 函數的星號（*）替換成async，將yield替換成await，僅此而已。

async函數對 Generator 函數的改進，體如今如下四點：

（1）內置執行器。

調用函數就會自動執行，輸出最後結果。徹底不像 Generator 函數，須要調用next方法，或者用co模塊，才能真正執行，獲得最後結果。

（2）更好的語義。

async和await，比起星號和yield，語義更清楚了。async表示函數裏有異步操做，await表示緊跟在後面的表達式須要等待結果。

（3）更廣的適用性。

co模塊約定，yield命令後面只能是 Thunk 函數或 Promise 對象，而async函數的await命令後面，能夠是 Promise 對象和原始類型的值（數值、字符串和布爾值，但這時會自動轉成當即 resolved 的 Promise 對象）。

（4）返回值是 Promise。

async函數的返回值是 Promise 對象，這比 Generator 函數的返回值是 Iterator 對象方便多了。你能夠用then方法指定下一步的操做。

20、Class 的基本語法

 class能夠看做只是一個語法糖，它的絕大部分功能，ES5 均可以作到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。

2一、Class 的繼承

 Class 能夠經過extends關鍵字實現繼承，子類必須在constructor方法中調用super方法，必須先經過父類的構造函數完成塑造，獲得與父類一樣的實例屬性和方法，獲得this對象

2二、Module 的語法

ES6 在語言標準的層面上，實現了模塊功能，並且實現得至關簡單，徹底能夠取代 CommonJS 和 AMD 規範，成爲瀏覽器和服務器通用的模塊解決方案。

ES6 模塊的設計思想是儘可能的靜態化，使得編譯時就能肯定模塊的依賴關係，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都只能在運行時肯定這些東西。

模塊功能主要由兩個命令構成：export和import。export命令用於規定模塊的對外接口，import命令用於輸入其餘模塊提供的功能。

一個模塊就是一個獨立的文件。該文件內部的全部變量，外部沒法獲取。若是你但願外部可以讀取模塊內部的某個變量，就必須使用export關鍵字輸出該變量。

2三、Module 的加載實現

瀏覽器加載 ES6 模塊，也使用<script>標籤，可是要加入type="module"屬性。

瀏覽器對於帶有type="module"的<script>，都是異步加載，不會形成堵塞瀏覽器，即等到整個頁面渲染完，再執行模塊腳本，等同於打開了<script>標籤的defer屬性。