在最近進行的項目中,已經全面使用到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加載時運行。
內容摘自:http://www.cnblogs.com/hity-tt/p/7048224.html