ES6-總結

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

 

一、語法

    1.一、命令［＊＊＊］

        a、let：提供塊級做用域；不存在變量提高； 暫時性死區；不容許重複聲明。

        b、const：一旦聲明，值不可變；其餘同上2-4；僅當前模塊可用，跨模塊需以下定義：export const A = 1。

        c、全局變量：ES6中，var、function生命的全局變量依舊爲全局對象的屬性；可是let、const、class是聲明的全局變量不屬於全局對象屬性。

    1.二、變量的解構賦值［＊＊］

        解構類型：數組解構［模式匹配、默認值、按次序匹配］、對象解構［按變量名取值、模式匹配］、字符串、函數。

        用途：交換變量、從函數返回多個值、函數參數定義、提取Json數據、函數參數默認值等。

        一句話總結：從複雜的結構中提取想要的數據。 

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

        Iterator：遍歷器，它是一種接口，爲不一樣的數據結構提供統一的訪問機制。

        for...of：部署了Symbol.iterator屬性的數據結構，就能夠使用for...of進行遍歷［ES6新增］。

        其中，數組、Set、Map，能夠使用entries()、keys()、values()三個方法，調用後返回遍歷器接口；其自身也存在遍歷器接口。

 

二、數據變化

    2.一、新增數據類型

        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.二、數據類型的擴展

        a、字符串擴展：主要增長了Unicode的處理方法（雙字節字符）

        b、正則的擴展：主要增長了修飾符 u［檢測Unicode］和 y［至關於帶^的g］

        c、數值的擴展：主要提供了一些特殊值的處理方法：浮點數差的處理；Math增長了高級方法

        d、數組的擴展［＊＊］：提供了建立、填充、查找、遍歷數組的方法

        e、函數的擴展［＊＊＊］：提供了參數方法、箭頭函數［固定this做用域］、尾調用優化策略等

        f、對象的擴展［＊＊＊］：簡寫方法、屬性名錶達式、擴展運算符、屬性操做的新方法：assign()、create()、defineProperty()［含ES5］

 

三、異步相關

    3.一、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.二、Generator［＊＊＊］

        它是一個狀態機、一個遍歷器。

        經過next方法進行遍歷，每次遍歷返回一個狀態對象｛value:, done:boolean｝；經過狀態對象done的狀態決定遍歷是否結束。且每次暫停位置由yield指令決定。亦可經過for...of進行遍歷，返回done爲true的value值，而非狀態對象。

        經過Generator，可按需控制每一個yield的執行時機。

    3.三、co［＊＊］

        其實質是Generator函數的自執行模塊。因爲Generator自身是一種同步機制，若是存在異步操做，其不會等待異步執行結束，因此沒法完成真正的自執行。

        而co模塊，可經過結合Promise實現Generator的自執行。因此使用co模塊的前提條件是，Generator函數的yield命令後面只能是Thunk函數或Promise對象。

        應用：

            控制頁面js執行流，協調ajax、圖片資源加載等異步操做及頁面渲染的時機。

    3.四、async［ES7］

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

 

四、Class［＊＊＊］

      特色：a、相似語法糖，讓類的定義更清晰；

               b、其prototype不可枚舉；

                c、繼承：extends；

                d、使用getter、setter攔截其存取行爲。

                

五、Module模塊［＊＊＊］

    設計思想盡可能靜態化，在編譯時加載。

    優勢：不須要使用UMD模式，服務器、瀏覽器都將支持。

    模塊功能主要由：export［輸出］和import［輸入］命令構成～

    模塊的繼承：export ＊ from ‘circle'

    加載的實質：commonJS模塊是值得拷貝，而ES6是值的引用。ES6爲動態引用，加載時不去運行js；而commonJS加載時運行。

   

內容摘自：http://www.cnblogs.com/hity-tt/p/7048224.html