ES6-總結


在最近進行的項目中,已經全面使用到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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM