task xtend 協調 瀏覽器 正則 bool 變量名 加載 深入

在最近進行的項目中，已經全面使用到ES6，這裏對ES6進行整理總結。用得比較多的是帶＊的內容，這些語法、新增類型、模塊調用等從代碼量上、可讀性上、操作上給項目帶來了不少便利。

1、語法

1.1、命令［＊＊＊］

a、let：提供塊級作用域；不存在變量提升； 暫時性死區；不允許重復聲明。 b、const：一旦聲明，值不可變；其他同上2-4；僅當前模塊可用，跨模塊需如下定義：export const A = 1。 c、全局變量：ES6中，var、function生命的全局變量依舊為全局對象的屬性；但是let、const、class是聲明的全局變量不屬於全局對象屬性。

1.2、變量的解構賦值［＊＊］

解構類型：數組解構［模式匹配、默認值、按次序匹配］、對象解構［按變量名取值、模式匹配］、字符串、函數。 用途：交換變量、從函數返回多個值、函數參數定義、提取Json數據、函數參數默認值等。 一句話總結：從復雜的結構中提取想要的數據。

1.3、循環（Iterator、for...of）［＊＊］

Iterator：遍歷器，它是一種接口，為不同的數據結構提供統一的訪問機制。 for...of：部署了Symbol.iterator屬性的數據結構，就可以使用for...of進行遍歷［ES6新增］。 其中，數組、Set、Map，可以使用entries()、keys()、values()三個方法，調用後返回遍歷器接口；其自身也存在遍歷器接口。

2、數據變化

2.1、新增數據類型

a、Symbol： 概念：獨一無二的值。 方法：查找symbol： Symbol.for()：創建新的symbol；先查找現有symbol是否存在，如果存在則使用現有的； Symbol()：生成新的symbol； Symbol.keyFor()：返回已登記的symbol類型值的key。 應用：消除魔法字符等 b、Set數據結構［＊＊＊］：相當於無重復值的數組。［並集、交集、差集的實現簡單］ WeakSet數據結構：成員只能是對象；其中的對象為弱引用，即垃圾回收機制不考慮。所以，其對象無法引用，weakSet本身也無法遍歷。 c、Map數據結構［＊＊＊］：類似對象，其鍵值僅為字符串［字符串－值］，Map結構的鍵值可以是任何類型［值－值］； WeakMap：僅對象為鍵名；且鍵名所指對象不計入垃圾回收機制。（weap對象隨時會被回收） d、Proxy［對象處理方法］：對目標對象架設“攔截”層，外界的訪問需通過“攔截”層。且提供一種機制，對外界的訪問進行過濾和改寫。 e、Reflect［對象處理方法］：Object的優化對象。 f、二進制數組：該接口的設計目的與WebGl有關，對動畫性能有提升［未深入了解］

2.2、數據類型的擴展

a、字符串擴展：主要增加了Unicode的處理方法（雙字節字符） b、正則的擴展：主要增加了修飾符 u［檢測Unicode］和 y［相當於帶^的g］ c、數值的擴展：主要提供了一些特殊值的處理方法：浮點數差的處理；Math增加了高級方法 d、數組的擴展［＊＊］：提供了創建、填充、查找、遍歷數組的方法 e、函數的擴展［＊＊＊］：提供了參數方法、箭頭函數［固定this作用域］、尾調用優化策略等 f、對象的擴展［＊＊＊］：簡寫方法、屬性名表達式、擴展運算符、屬性操作的新方法：assign()、create()、defineProperty()［含ES5］

3、異步相關

3.1、Promise ［all、race、then、catch等］［＊＊＊］

特點：對象的狀態不受外界影響； 一旦狀態改變就不會再變； 優點：可以將異步操作，同步表達出來。 與jquery promise的區別： （1）ES6 Promise是一個構造函數，jquery Promise為對象； （2）ES6在new Promise對象時，傳入函數，在該函數內部設置resolve、reject［狀態不受外界影響］； jquery Promise可以任意位置設置狀態。 （3）ES6 Promise的異步處理函數將進入事件循環的任務消息隊列，優先級比一般的網絡、延時異步更高，且該隊列為microtask，將在同一事件循環中得到處理。

3.2、Generator［＊＊＊］

它是一個狀態機、一個遍歷器。 通過next方法進行遍歷，每次遍歷返回一個狀態對象｛value:, done:boolean｝；通過狀態對象done的狀態決定遍歷是否結束。且每次暫停位置由yield指令決定。亦可通過for...of進行遍歷，返回done為true的value值，而非狀態對象。 通過Generator，可按需控制每個yield的執行時機。

3.3、co［＊＊］

其實質是Generator函數的自執行模塊。由於Generator自身是一種同步機制，如果存在異步操作，其不會等待異步執行結束，所以無法完成真正的自執行。 而co模塊，可通過結合Promise實現Generator的自執行。所以使用co模塊的前提條件是，Generator函數的yield命令後面只能是Thunk函數或Promise對象。 應用： 控制頁面js執行流，協調ajax、圖片資源加載等異步操作及頁面渲染的時機。

3.4、async［ES7］

其關鍵字： async、await， 類似co模塊實現的Generator自執行機制，同步執行異步操作。

4、Class［＊＊＊］

特點：a、類似語法糖，讓類的定義更清晰； b、其prototype不可枚舉； c、繼承：extends； d、使用getter、setter攔截其存取行為。

5、Module模塊［＊＊＊］

設計思想盡量靜態化，在編譯時加載。 優點：不需要使用UMD模式，服務器、瀏覽器都將支持。 模塊功能主要由：export［輸出］和import［輸入］命令構成～ 模塊的繼承：export ＊ from ‘circle‘ 加載的實質：commonJS模塊是值得拷貝，而ES6是值的引用。ES6為動態引用，加載時不去運行js；而commonJS加載時運行。

ES6 筆記（二）－ 總結