ES6

1、let和const命令

2、變量的解構賦值

3、字符串的擴展

4、數值的擴展

5、正則的擴展

6、數組的擴展

7、函數的擴展

8、對象的擴展

9、symbol

10、proxy和reflect

11、二進制數組

12、set和map數據結構

十3、iterator和for...of循環

十4、generator函數

十5、promise對象

十6、異步操做和async函數

十7、Class

十8、修飾器 （ES7 但babel支持）

十9、module

二10、編程風格［可參閱jscs.info］

 

1、let和const命令

    1.一、let

            {

                let a = 10;

            }

        僅在代碼塊中使用有效；

        不存在變量提高：須要在聲明後使用；

        暫時性死區：只要塊級做用域內存在let，其變量便綁定了該區域，不受外部影響；

        不容許重複聲明：不容許相同做用域聲明同一個變量；

 

    1.二、塊級做用域

        因爲不存在變量提高，塊級做用域之間的元素互不影響。

 

    1.三、const命令

        聲明常量，一旦聲明，其值不能改變；

        只有聲明所在的塊級做用域有效；

        不存在變量提高，有暫時性死區；

        對於對象、數組等指針型變量，不能改變的是指針，而非內部內容，若是須要防止內容的改變，使用object.freeze方法。

 

    1.四、跨模塊的常量

    // constants.js 模塊

        export const A = 1; 

        export const B = 2;

        export const C = 3;

    // test1.js  模塊

        import * as constants from ‘./constants’;

        console.log(constants.A);

     // test2.js  模塊    

        import {A, B} from ‘./constatns’;

        console.log(A);

 

    1.5 全局對象屬性

        window下，全局對象爲window；nodejs環境下指的global對象。

        ES6下，var、function命令聲明的仍爲全局變量；let、const、class命令不屬於全局對象屬性。

 

2、變量的解構賦值

    2.1 數組的解構賦值

        [a, b, c, d] = [1, 2, 3, 4]，這種屬於「模式匹配」，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。

        [head, …tail] = [1, 2, 3, 4] // head == 1; tail == [2, 3, 4]

        若是解構不成功，則會賦值undefined

        默認值：[x = 1, y] = [2, 3] or [x = f(), y] = [2, 3];若是默認值爲表達式，僅在使用時，纔會執行表達式。

 

    2.2 對象的解構賦值

        對象按照屬性名取值，數組按照次序取值。

        var {foo: baz, bar: tr} = {foo:’aaa’, bar: ‘bbb’};真正被複制的是baz，而非foo；

        {x} = {x:1} //容易出錯，通常會解析成代碼塊，最佳方式：（{x}={x:1}）

 

    2.3 字符串的解構賦值

        const [a, b, c, d, e] = ‘hello’;// a=‘h’,b=‘e’…

        let {length: len} = ‘hello’;// len = 5;

 

    2.4 數值與布爾值的解構賦值

        若是右邊是數值或布爾值，會先轉換成對象。

 

    2.5 函數參數的解構賦值

         undefined會觸發函數參數的默認值。

        [1, undefined, 3].map((x = ‘yes’) => x) // [1, ‘yes’, 3]

 

    2.6 圓括號問題

        解析結構是表達式仍是模式不容易，因此不要在模式中放置圓括號。

 

    2.7 用途

        a、交換變量

        b、函數返回多個值

        c、函數參數的定義

        d、提取json數據

        e、函數參數的默認值

        f、遍歷map結構

 

3、字符串的擴展

    ES6增強了對Unicode的支持，而且擴展了字符串對象。

    javascript容許採用\uxxxx形式表示一個字符，其中xxxx表示字符的碼點。

    3.1 字符的Unicode表示法

 

    3.2 codePointAt() 能夠判斷字符是否爲4個字節，返回字符對應的碼點

 

    3.3 string.fromCodePoint()  參數爲碼點，可返回字符值

 

    3.4 字符串的遍歷器接口

        for (let codePoint of ‘foo’) {

            // ‘f’, ‘o’, ‘o’    其可自動識別四個字節的字符

        }

 

    3.5 at() 可返回四個字節的字符（漢字） 等價兩字節的charAt()。

 

    3.6 normalize() 將字符的不一樣表示方法統一爲一樣的形式。

 

    3.7 includes(), startsWith(), endsWidth() 表示是否找到參數字符串，返回布爾值

 

    3.8 string.repeat(n) 表示將原字符串重複n次

 

    3.9 padStart, padEnd，用來補全字符串

        ‘x’.padStart(5, ‘ab’) //ababx  接受兩個參數，第一個爲總長，第二個爲重複的字符。

 

    3.10 模板字符串

        使用反引號標識，嵌入變量${}

        $(‘#result’).append(’there are <b>${count}</b>items.’);

 

    3.11 模板編譯

 

    3.12 標籤模板

        可以使用其嵌入其餘語言，如jsx。

         函數調用的一種特殊形式，標籤指函數，緊跟其後的模版字符串是參數。

        tag`hello ${a + b} world ${a * b}` => function tag([‘hello’, ‘ world’, ‘’], 15, 50)

 

    3.13 string.raw() 充當模板字符串的處理函數，返回一個反斜線都被轉移的字符串。

        

4、正則的擴展

    4.1 RegExp構造函數 new RegExp(/abc/ig, ‘i’).flag // ‘i’

 

    4.2 將四個正則方法：match、replace、search、split四個方法都定義在了RegExp的對象上

 

    4.3 u修飾符 爲正則添加了u修飾符，含義爲’unicode模式’

        a、點字符 .表示任意字符，對於四字節字符，沒法匹配，配合修飾符u，可正確判斷。

        b、unicode字符表示法 新增了大括號表示Unicode字符 /u{61}/u.test(‘a’)

        c、量詞 /接{2}/u.test('接’) //true

        e、預約義模式/^\S$/u.test(‘接’) // true

        f、i修飾符

 

    4.4 y修飾符 ‘粘連’修飾符 與g功能相同，不一樣之處y默認帶^，下一位置就必須可以匹配上。

 

    4.5 sticky屬性 表示是否設置了y修飾符 var r = /hello/y;  r.sticky // true

 

    4.6 flags屬性 返回正則的修飾符

 

    4.7 RegExp.escape() 還未經過審覈

 

5、數值的擴展

    5.1 二進制和八進制數值表示法

        0b || 0B 爲二進制； 0o || 0O表示八進制

 

    5.2 Number.isFinite(), Number.isNaN() 分別用來檢查 Infinite 和 NaN這兩個特殊值。

        傳統的這兩個方法，會先調用Number()轉爲數字，在判斷；而新方法不轉換，直接判斷。

 

    5.3 Number.parseInt(), Number.parseFloat() 其行爲不變，只是移植到了Number對象上。

 

    5.4 Number.isInteger()用來判斷是否爲整數，3和3.0視爲同一值。

 

    5.5 Number.EPSILON 一個極小的常量，爲了減少浮點數相減的偏差而設，若是偏差小於這個常量，則正確。

        5.5545656563e-17 < Number.EPSILON

 

    5.6 安全整數和Number.isSafeInteger()  

        ES6提供了兩個常量，Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER

 

    5.7 Math對象的擴展

        增長了17個與數學相關的方法。

        a、Math.trunc() 去除數字的小數部分，返回整數部分。

        b、Math.sign() 判斷一個數是正數、負數仍是零，+1正數；-1負數；+0; -0; NaN

        c、Math.cbrt() 計算一個數的立方根

        d、Math.clz32() 返回一個32位無符號整數形式（使用二進制表示的）有多少個前導0

        e、Math.imul() 返回兩個數以32位帶符號整數相乘的結果

        f、Math.fround() 返回一個數的單精度浮點數形式

        g、Math.hypot() 返回全部參數的平方和的平方根

        對數方法：

        h、Math.epm1(x) 返回e^x-1

        i、Math.log1p(x) 返回 1/ln(1+x)

        j、Math.log10(x) 返回10爲底的x的對數 Math.log10(10000) //4

        k、Math.log2(x) 返回以2爲底x的對數

        三角函數方法：

        l、Math.sinh(x)   返回x的雙曲正弦

        m、Math.cosh(x) 返回x的雙曲餘弦

        n、Math.tanh(x)    返回x的雙曲正切

        o、Math.asinh(x)    返回x的反雙曲正弦

        p、Math.acosh(x)    返回x的反雙曲餘弦

        q、Math.atanh(x)    返回x的反雙曲正切

　　5.8 指數運算符 **

　　　2 ** 3 = 8

 

6、數組的擴展

    6.一、Array.from() 將兩類對象轉換成真正的數組：類數組的對象及可遍歷的對象（即必須有length屬性）

        如dom操做的nodeloost集合、函數內部arguments對象及ES6的Set和Map方法

        document.querySelectorAll(‘p’)

        tips: 運算符...也可將某些結構轉換成數組；from能正確的識別unicode字符

        Array.from(spans, s => s.textContent);其轉換數組的同時，具有map的功能。

 

    6.二、Array.of()

        用於將一組值轉換爲數組。Array.of(3, 11, 8) // [3, 11, 8]

 

    6.三、copyWithin(target, start = 0, end = this.length)

        將數組內部指定位置的成員複製到其餘位置上

 

    6.四、find()和findIndex()

        find找出第一個符合條件的數組成員，返回成員或者undefined

        [1, 4, -5, 10].find((n) => n<0) //－5

        findIndex()與上同，返回成員位置，不然返回－1

 

    6.五、fill(x, start, end)

        填充數組[‘a’, ‘b’].fill(7, 1, 2) // [‘a', 7]

 

    6.六、 entries()、keys()、values() 

        用於遍歷數組，返回一個遍歷器對象，可用for..of遍歷

        entries爲遍歷鍵值對；keys爲遍歷鍵值；values爲遍歷值

        for (let [index, elem] of [‘a’, ‘b’].entries()) // 0 ‘a’

 

    6.七、includes(x, start, end)

        返回一個布爾值，表示某個數組是否包含給定的值

 

    6.八、數組的空位

        [, , ,]空位不表明undefined

        ES5對空位的處理不一致，而ES6進行統一，將空位都轉換爲undefined，空位不會被忽略掉。儘可能避免空位出現。

 

    6.九、數組推導

        var a1 = [1, 2, 3,4];

        var a2 = [for (i of a1) i* 2]; //[2, 4, 6, 8]

        var a3 = [for (i of a1) if (i > 2) i]; //[3, 4]

        其可替代map()及filter()方法

 

7、函數的擴展

    7.一、函數參數的默認值

         function log(x, y = ‘hello’){}

        a、參數的解構賦值：重點區分參數的默認值與解構賦值的默認值。

        b、默認參數：非顯示的輸入undefined，觸發該參數等於默認值，null沒有這個效果。

        c、length屬性：指定默認值的參數，不計入length，致使length失真。

        d、做用域：當前函數做用域與全局做用域

            try catch err throw

 

    7.二、rest參數 「…變量名」

        rest參數搭配的變量是一個數組，將多餘的參數放入其中；rest參數以後不能再有參數。

 

    7.三、擴展運算符

        ‘…’，將一個數組轉爲用逗號分隔的參數序列。

        a、替代apply()

        b、合併數組：[1, 2, …more]

        c、與解構賦值結合：[1, 2, …rest] = list;     

            tips:擴展運算符用於數組賦值時，只能放在末尾。

        d、字符串：[…’hello’] //[‘h’, ‘e’, ‘l’, ‘l’, ‘o’]

            可正確返回字符的長度(可識別unicode字符)；[...string].length

        e、類數組對象：可轉變成數組.

 

    7.四、name屬性

        function foo(){} foo.name // 「foo"

 

    7.五、箭頭函數

        使用箭頭定義函數；

        a、var f = v => v;  等同於 var f = function(v) {return v};

        b、函數不須要參數或者須要多個參數，就用()代替：

             var f = () => v;  等同於 var f = function(a, b) {…… return v};

        c、因爲大括號被解析成代碼塊，若是須要返回對象，須要加上括號：

            var fun = id => ({id: id, name: ‘hity’});

        d、若是代碼塊多餘一條語句，就須要用大括號包起來。

        e、嵌套箭頭函數

        tips：

            a、函數體內的this，是定義時的對象，而非運行時；

            b、不可當構造函數；

            c、arguments對象不存在，可用rest參數代替；

            d、不可以使用yield命令，沒法用做generator函數；

            e、箭頭函數無本身的this做用域，this指向父級this；因此沒法使用apply、call、bind改變this指向

            f、無arguments、super、new.target；

 

    7.六、函數綁定

            ‘::’能夠將左邊對象做爲上下文綁定到右邊的函數上。能夠採用鏈式的寫法，返回的仍是原對象。

 

    7.七、尾調用優化

            概念：指某個函數的最後一步是調用另一個函數：function f(x){ return g(x);}

            尾調用優化，去掉外層的調用幀。

                tips：僅當內部函數不須要使用外部函數的變量時，優化纔會進行。

            尾遞歸：遞歸很是消耗內存，將其轉變爲尾遞歸將只有o(1)的複雜度。

                tips：尾遞歸僅嚴格模式下可用：「use strict」，這種狀況下函數的信息都將移除～

  

8、對象的擴展

    8.一、屬性的簡潔表示法

        {x, y} == {x: x, y: y};

        var obj = {

            birth,

            method() {

                return ‘hello';

            }

        }

 

    8.二、屬性名錶達式

        let obj = {

            [prop]: true,

            [‘a’ + ‘b’]: 123

        }

 

    8.三、方法的name屬性

        (new Function()).name //anonymous

        bind創造的方法，name屬性返回「bound」加原函數名。

 

    8.四、Object.is()

        比較兩個值是否嚴格相等。與 === 基本一致。(+0, -0)//false  (NaN, NaN)// true

 

    8.五、Object.assign(targetObj, srcObj)

        做用：將srcObj的全部可枚舉對象複製到targetObj上；其只複製自身屬性，不可枚舉的和繼承的不會被複制。

 

    8.六、屬性的可枚舉性

        object.getOwnPropertyDescriptor(obj, ‘foo’)；

        // {value: 123, writable: true, enumerable: true, configurable: true}

        有三個操做會忽略enumerable爲false的屬性：

            a、for…in：遍歷自身和繼承的可枚舉屬性；

            b、Object.keys()：返回對象自身的可枚舉屬性鍵名；

            c、JSON.stringify()：串行化對象自身的可枚舉屬性；

            d、Object.assign()：複製自身可枚舉的屬性；

            e、Reflect.enumerate():返回全部for...in循環會遍歷的屬性

        tips：全部Class的原型的方法都不可枚舉。

 

    8.七、屬性的遍歷

        ES6共6種方法遍歷對象的屬性：

        for…in：（無symbol）

        Object.keys()：（無symbol）

        Object.getOwnPropertyNames(obj)：返回數組，包含對象自身全部屬性（無symbol）

        Object.getOwnPropertySymbols(obj)：返回數組，包含對象自身的全部symbol屬性

        Reflect.ownKeys(obj)：返回數組，包含對象自身全部的屬性

        Reflect.enumerate(obj)：返回一個Iterator對象，遍歷對象自身和繼承全部可枚舉屬性（無symbol）

 

    8.八、__proto__屬性、Object.setPrototypeOf()、Object.getPrototypeOf()

        __proto__屬性用來設置、讀取當前對象的prototype對象；但最好不用，而是使用object.setPrototypeOf(object, prototype)、object.getPrototypeOf()、object.create()代替。

 

    8.九、對象的擴展運算符

        rest亦可用於對象，使用方法相同。

        tips：

            a、其爲淺複製，若是一個鍵的值爲複合類型，則複製這個值的引用。

            b、不能複製繼承自原型對象的屬性。

            c、rest對象中存在取值函數get，這個函數會當即執行。

 

9、symbol

    9.一、概述

        引入的緣由：解決擴展他人對象屬性時的命名衝突。

        javascript的第7種數據類型爲：symbol，屬性名屬於symbol就是獨一無二的。

        tips：symbol值不能與其餘值運算，它不能添加屬性，相似字符串。

             symbol值可轉爲字符串、布爾值；

 

    9.二、做爲屬性名的symbol

        a {[mySymbol]:  ‘hello’}

 

    9.三、消除魔術字符串

        指在代碼之中屢次出現、與代碼造成強耦合的某一個具體的字符串或者數字。

 

    9.四、屬性名的遍歷

        能夠設置一些非私有又但願僅內部使用的方法。

 

    9.五、symbol.for(), symbol.keyFor()

        symbol.for(name)：查找對應的symbol，查到則返回，並登記在全局中，不然建立一個新的symbol。

        symbol.keyFor(s1)：返回已登記的symbol key（即name）。

 

    9.六、內置的symbol值

        

10、Proxy和Reflect

    proxy代理，能夠理解成目標對象前架設一「攔截」層，外界訪問必須先經過該攔截。

    new Proxy(target, handle);

    10.一、實例方法

        a、get()：用於攔截某個屬性的讀取操做；

        b、set()：用於攔截某個屬性的賦值操做；

        c、apply(): 用於攔截函數的調用、call和apply操做；

        d、has(): 用於隱藏某些操做，不被in操做符發現；

        e、construct(): 用於攔截new命令；

        f、deleteProperty: 用於攔截delete操做，使得屬性不被delete；

        g、defineProperty：用於攔截object.defineProperty(添加新屬性)操做；

        h、enumerate()：用於攔截for...in循環；

        i、getOwnPropertyDescriptor()：用於攔截object.getOwnPropertyDescriptor;

        j、getPrototypeof()：用於攔截其運算，以及其餘一些操做；

        k、 isExtensible()：用於攔截其操做；[若是對象是可擴展的（這表示可向對象添加新屬性），則爲 true；不然爲 false。]

        l、ownKeys()：用於攔截object.keys操做；

        m、preventExtensions()：用於攔截其操做，必須返回布爾值；

        n、setPrototypeOf()：用於攔截其方法。

 

    10.二、proxy.revocable()

        返回一個可取消的proxy實例。

 

    10.三、reflect概述

        其設計目的：

        a、將object上明顯屬於語法層面的方法放到reflect上；

        b、修改某些object的返回結果，讓其變得更合理；

        c、讓object操做都變成函數行爲；

        d、reflect對象的方法與proxy對象的方法一一對應，這樣能夠直接讓proxy對象調用reflect對象完成默認行爲。

 

11、二進制數組（大略的過，須要理解內存之類的計算機原理等）

    設計目的：爲了讓開發者可以經過javascript與操做系統的原生接口進行二進制通訊。

    二進制數組分三類：

    a、arrayBuffer對象：表明原始的二進制數據；

    b、typedArray視圖：用於讀寫簡單類型的二進制數據；

    c、dataView視圖：用於讀寫複雜類型的二進制數據。

    typedArray有九種類型數據：int八、uint八、uint8C、int1六、uint1六、int3二、uint3二、float3二、float64

    dataView有除uint8C外的八種數據類型。

    API用到了二進制數組操做二進制數據的有一下瀏覽器：

        File API、XMLHttpRequest、Fetch API、Canvas、WebSocket

 

    11.一、arrayBuffer對象

        var buf = new ArrayBuffer(32);

        arrayBuffer.prototype.byteLenth：因爲分配內存的操做不必定成功，因此須要經過該字段來判斷是否成功；

        arrayBuffer.prototype.slice()：容許將內存區域的一部分複製生成一個新的arrayBuffer對象；

        arrayBuffer.isView()：返回布爾值，表示參數是否爲arrayBuffer的一個試圖實例。

 

    11.二、typedArray視圖

        其有九個構造函數，對應不一樣的數據類型；

        造成的數組成員都是一種類型；

        成員都是連續的，不會有空位；

        默認值爲0。

 

    11.三、dataView視圖

 

    11.四、二進制數組的應用

        a、ajax 返回的類型能夠爲二進制，設置爲arraybuffer or blob;

        b、canvas 類型值爲uint8clampedarray

        c、websocket 經過arraybuffer發送或者接收二進制數據；

        d、fetch API 取回的數據爲arrayBuffer對象；

        e、file API 若是知道文件爲二進制數據類型，也能夠將其讀取爲arrayBuffer對象。

 

12、set和map數據結構

    12.一、set

    set是一種新的數據結構，其與數組的區別是，沒有重複值，成員值都惟一。set自己爲構造函數。

    set接受一個數組做爲參數，var set ＝new Set([1, 2, 3, 4, 4]); // [1, 2, 3, 4]。

    set加入的值，不會進行類型轉換，判斷相等使用的是 ===。 

    set實例的屬性和方法：

        set.prototype.size: 返回set成員的總數；

        add(value): 添加某個值，返回set結構自己；

        delete(value)：刪除某個值，返回一個布爾值；

        has(value): 返回一個布爾值；

        clear()：清除全部成員，沒有返回值。

    遍歷方法：keys()、values()、entries()、forEach()

 

    12.二、weakSet

        爲不重複的值的集合，與set的區別：

            a、其成員只能是對象；

            b、其對象爲弱對象，垃圾回收機制不考慮它的引用，所以，它是不可遍歷的。

        方法：add()、delete()、has()；

        其用處爲：儲存DOM節點，而不用擔憂這個節點從文檔中移除時會發生內存泄漏。

 

    12.三、map

        map相似對象，區別在於鍵不一樣，對象的鍵限制只容許字符串，map的鍵不受限：

            對象爲「字符串－值」的對應，map爲「值－值」的對應。

        須要堤防一種狀況，鍵爲引用地址的狀況：如

            map.set([‘a’], 123);

            map.get([‘a’]); // undefined

            因爲數組做爲鍵時，標記的是數組所在的引用地址。

            var k1 = [‘a’];

            map.set(k1, 1234);

            map.get(k1) // 1234

        map的鍵是跟內存綁在一塊兒的，只要內存地址不同，就視爲兩個鍵。如此解決了同名屬性碰撞的問題。

        map的屬性和方法：

            size屬性：返回成員總數；

            set(key, value)：設置鍵值，並返回整個map的結構；

            get(key)：讀取key對應的值，找不到則返回undefined；

            has(key)：返回布爾值，確認鍵是否存在；

            delete(key)：刪除某個鍵，返回布爾值；

            clear()：清除全部成員，沒有返回值。

        遍歷方法：keys()、values()、entries()、forEach()。

        可以使用運算符（...）轉換成數組。

        轉換：

            a、map轉數組（…）

            b、數組轉map；

            c、map轉對象；

            d、對象轉爲map；

            e、map轉爲son（鍵名爲字符串）；

            f、json轉爲map（鍵名爲字符串）。

 

    12.四、weakmap

        weakmap與map相似，但其只接受對象做爲鍵名，鍵名指向的對象不計入垃圾回收機制。其有助於內存泄漏。

 

十3、iterator和for...of循環

    iterator接口爲各類不一樣的數據提供統一的訪問機制。只要部署iterator接口，就可完成遍歷操做。

    做用：

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

        b、使得數據結構的成員可以按照某種次序排列；

        c、es6創造了一種新的遍歷命令for...of循環，iterator接口主要供其消費。

    遍歷過程：

        step一、建立指針對象，指向當前數據結構的起始位置；

        step二、第一次調用指針對象的next方法，指向第一個成員；

        step三、第二次調用next方法，指向第二個成員；

        step四、不斷調用，直到結束。

    step2時，會返回數據結構當前的成員信息；具體是返回一個包含value和done的對象，value爲成員值，done爲布爾值，表示遍歷是否結束。

    iterator接口須要經過symbol.iterator來部署。

 

    13.三、調用iterator接口的場合

        解構賦值、擴展運算符、其餘場合：for...of、array.from()、map()、set()、weakmap()、weakest()、promise.all()、promise.race()。

 

    13.四、字符串的iterator接口

        var string = 「lala」;

        var iterator = string[Symbol.iterator]();

        修改遍歷器對象。

 

    13.五、iterator接口與generator函數

        Symbol.iterator方法最簡單的實現仍是generator函數。

 

    13.六、遍歷器對象的return()、throw()

        next方法是必須部署的方法，return方法用於for...of循環提早退出時（break、continue或者出錯），調用。return方法必須返回一個對象。throw方法配合generator使用。

 

    13.七、for...of循環

        一個數據結構只要部署了Symbol.iterator屬性，就能夠用for...of循環遍歷其成員。

        for… in、for…of

        數組、set、類數組對象［string］：for (let v of arr)

        map:for (var [name, value] of  es6)

 

十4、generator函數

    14.一、簡介

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

        Generator是狀態機，也是遍歷器對象生成器，返回一個遍歷器對象。它的兩個特徵：a、function命令與函數名之間有一個星號；b、內部使用yield定義內部狀態。最大特色，暫緩執行函數；經過next作暫緩和停頓。

        其調用後，不執行，而是返回一個iterator對象，需用next方法調用，才執行。

        yield語句沒法用在普通函數中，不然出錯；且用於表達式中時，須要放在圓括號內。

 

    14.二、next方法的參數

        next方法的參數爲yield的執行結果，可向函數體內注入值。

        yield返回值一般爲undefined；若是next帶有參數，則返回該參數。next傳遞的參數每每爲上一次yield的返回值。

 

    14.三、for…of循環

 

    14.四、Generator.prototype.throw()，可在函數體外拋出錯誤，函數體內執行。

 

    14.五、Generator.prototype.return()

        可返回給定的值，並終結Generator函數的遍歷。

        g.return(「foo」) //{value: 「foo」, done:true}

        若是函數內部有try...finally代碼塊，那麼return方法會推遲到finally代碼執行完再執行。

 

    14.六、yield語句

        若是Generator函數內部調用另外一個Generator函數，默認狀況下無效；使用yield*，則生效。yield*表示在函數內部部署了一個for...of循環。

 

    14.七、做爲對象屬性的Generator函數

        let obj = {

            * myGeneratorMethod() {}

        }

 

    14.八、Generator函數的this

        構造函數返回的是一個內部的指針，可經過bind一個對象，賦予做用域，將this綁定在對象上。

 

    14.九、Generator函數推導

        let squard = (for (n of generator()) n * n);

 

    14.十、含義

        Generator與狀態機，其自己包含狀態機，不須要額外的外部變量保存狀態。

 

    14.十一、應用

        a、異步操做的同步表達

            function* main() {

                var result = yield request(url);

                var resp = JSON.parse(result);

            }

 

            function request(url) {

                makeAjaxCall(url, function(response) {

                    it.next(response);

                });

            }

 

            var it = main();

            it.next();

        b、控制流管理

        c、部署iterator接口

                利用Generator函數能夠在任意對象上部署Iterator接口。

        d、做爲數據結構

            其能夠返回一系列的值。

 

十5、promise對象

    15.一、promise的含義

        所謂promise就是一個對象，用來傳遞異步操做的消息。其有兩個特色：

            a、其狀態不受外界影響；其有三種狀態：pending（進行中）、resolved (已完成，又稱」fulfilled」)、rejected（已失敗）；

            b、一旦狀態改變就不會再變，任什麼時候候均可以獲得這個結果；

        有了promise對象就能夠將異步操做以同步操做的流程表達出來，避免了層層嵌套的回調。

        缺點：

            沒法取消promis e；若是不設置回調，promise內部拋出的錯誤不會反應到外部；通常說來，若是事件不斷髮生，使用stream模式比部署promise更好。

 

    15.二、基本用法

            兩個異步之間的調用：

                var p1 = new Promise(function (resolve, reject){})

                var p2 = new Promise(function (resolve, reject){

                    resolve(p1);

                })

            p2的狀態爲(p1 與 p2)的並集。只要一個爲rejected，則爲rejected；所有爲resolved則爲resolved。

 

    15.三、Promise.prototype.then()

        then方法返回一個promise實例（並不是前一個實例），此時能夠鏈式的調用then。

 

    15.四、Promise.prototype.catch()

        其是.then(null, rejection)的別名，用於指定發生錯誤的回調函數；promise在resolve後再拋出錯誤，並不會被捕獲。

        promise的錯誤具備「冒泡」性質，會一直向後傳遞，直到捕獲爲止。最好不在then的第二個參數定義rejected狀態的回調，而應使用catch方法。

        catch方法也是返回一個promise實例。

 

    15.五、promise.all()

        promise.all方法用於將多個promise實例包裝成一個新的promise實例。

        var p = Promise.all([p1, p2, p3]);其參數必須具備iterator接口，且返回的每一個成員都是Promise實例。

        p的狀態爲：

            a、三者都爲resolved，則它爲resolved；

            b、只要一個爲rejected，則它爲rejected；此時第一個被rejected的實例的返回值會傳遞給回調函數。

 

    15.六、promise.race()

        亦是將多個promise實例包裝成一個新的promise實例。只要其中有一個實例改變狀態，p的狀態也跟着改變。

 

    15.七、promise.resolve()

        其可將現有對象轉爲promise對象；

        promise.resolve(‘foo’) 等價於 new Promise(resolve => resolve('foo’));

 

    15.八、promise.reject()

        返回一個promise的實例，狀態爲rejected。

 

    15.九、兩個附加方法

        done()：爲了最終捕獲任何可能出現的錯誤；

        finally()：指定無論promise對象最後狀態如何都會執行的操做。

 

    15.十、應用

        a、加載圖片

        b、Generator與Promise（管理 流程＋異步 混合操做）

 

    15.十一、async函數（亦是用於取代回調函數解決異步操做）

 

十6、異步操做和async函數

    在ES6誕生前，異步編程的方法大概有4種：

        a、回調函數；

        b、事件監聽；

        c、發佈、訂閱；

        d、promise對象。

        

    16.一、Generator函數

        協程，相似線程，執行到一半轉移執行權。yield命令將執行權交給其餘協程。

        其數據交換及錯誤處理：next(x);try{}catch{}.

        fetch返回promise對象。

 

    16.二、thunk函數（結合generator函數進行自動流程管理）

        編譯器的「傳名調用」，將參數放到一個臨時函數中，再將臨時函數傳入函數體內。這個臨時函數就叫thunk函數。

 

    16.三、co模塊

        co模塊用於Generator函數的自動執行。

        var co = require(‘co’);

        co(gen);

        co(gen).then(function() {

            console.log(‘generator函數執行完畢');

        });

        如何交回generator的執行權：

            a、回調函數。將異步包裝成thunk函數，在回調函數中交回執行權。

            b、promise對象。將異步操做包裝成promise對象，用then 方法交回執行權。

        co模塊是將兩種自動執行器包裝成了一個模塊，使用co的前提條件是，yield命令後面只能是thunk函數活着promise對象。

 

    16.四、async函數（屬於es7）

        async函數：

            a、內置執行器；

            b、更好的語義；

            c、更廣的適應性，async函數的await命令後面可使promise對象和原始類型值；

            d、返回值爲promise對象。

 

十7、Class

    17.一、基本語法

        定義類：

            class Point {

                constructor(x, y) {

                    this.x = x;

                    this.y = y;

                }

 

                toString() {

                    return ‘(‘ + this.x + ‘, ‘ + this.y + ‘)’;

                }

            }

    類的數據類型就是函數，類自己就指向構造函數。

    類的內部定義的全部方法都是不可枚舉的。

    不存在變量提高。

 

    17.二、class的繼承

        class之間經過extends關鍵字實現繼承；經過super方法，指向父類的this對象。

        class ColorPoint extends Point {

            constructor(x, y, color) {

                super(x, y); //調用父類的constructor(x, y)

                this.color = color;            

            }

        }

    es5的繼承實質上是先創造子類的實例對象this，而後再將父類的方法添加到this上（parent.apply(this)）;

    es6的繼承實質上是先建立父類的實例對象this（調用super方法），而後再用子類的構造函數修改this。

    類的prototype屬性和__proto__屬性：

        a、子類的__proto__屬性表示構造函數的繼承，指向父類；

        b、子類的prototype的__proto__屬性表示方法的繼承，指向父類的prototype屬性。

    extends的繼承目標：

        只要具備prototype屬性，就能被繼承。

        object.getPrototypeOf()方法從子類上獲取父類。

        super關鍵字表明父類的實例。

 

    17.三、原生構造函數的繼承

        es5沒法繼承，es6能夠。

 

    17.四、class的取值函數(getter)和存值函數(setter)

        與es5同樣，在class內部可使用get和set關鍵字對某個屬性設置存值函數和取值函數，攔截該屬性的存取行爲。

 

    17.五、class的generator方法

        class Foo {

            constructor(…args) {

                this.args = args;

            }

            *[Symbol.iterator]() {

                for (let arg of this.args) {

                    yield arg;

                }

            }

        }

    

        for (let x of new Foo(‘hello’, ‘world’)) {

            console.log(‘x');

        }

 

        // hello //world

 

    17.六、class的靜態方法

        定義：在一個方法上加static關鍵字，就表示該方法不會被實例繼承，而是直接經過類調用，成爲「靜態方法」。

        經過使用extends，可讓實例繼承。

 

    17.七、class的靜態屬性

        定義：指class自己的屬性，而不是定義在實例對象（this）上的屬性。

 

    17.八、new.target屬性

        new是從構造函數生成實例的命令。該屬性能夠肯定構造函數是怎麼調用的。

        function Person(name) {

            if (new.target === Person) {

                this.name = name;

            } else {

                throw new Error('必須使用new生成實例’)；

            }

        }

        var person = new Person(‘hit') //正確

        var notAPerson = Person.call(person, ‘張三’); // 報錯

 

    17.九、mixin模式的實現

        定義：將多個類的接口「混入」另外一個類：

        

十8、修飾器 （ES7 但babel支持）

    18.一、類的修飾器

        @testable

        class MyTestableClass {}

        其中的@testable爲修飾器，修改了類的行爲，增長了一個靜態屬性。

 

    18.二、方法的修飾

        class Person {

            @readonly

            name() {

                return `${this.first} ${this.last}`

            }

        }

        修飾器函數共接受3個參數，修飾的目標對象；修飾的屬性名；屬性的描述對象。

        function readonly(target, name, descriptor) {

            descriptor.writable = false;

            return descriptor;

        }

 

        Object.definePrototype(Person.prototype, ’name’, descriptor);

 

    18.三、爲什麼修飾器不能用於函數

        修飾器職能用於類及類的方法，由於其存在函數提高。

 

    18.四、core-decorators.js

        其是一個第三方模塊，提供了幾個常見的修飾器。

        a、@autobind 使得方法中的this對象綁定原始對象。

        b、@readonly使得屬性或者方法不可寫；

        c、@override檢查子類方法是否正確覆蓋父類的同名方法；

        d、@deprecate在控制檯顯示一條警告，表示該方法將廢除；

        e、@suppressWarnings 修飾器抑制decorated修飾器致使的console.warn調用。

 

    18.五、使用修飾器實現自動發佈事件

        「發佈／訂閱」庫postal.js

 

    18.六、mixin

        在修飾器的基礎上能夠實現mixin模式，就是對象繼承的一種替代方案，在對象中混入另外一個對象的方法。

 

    18.七、trait

        效果與mixin相似，但提供更多的功能，好比防止同名方法的衝突、排除混入某些方法、爲混入的方法起別名等。第三方模塊：traits-decorator。

 

十9、module

    ES6的class只是面向對象編程的語法湯，升級了ES5構造函數的原型鏈繼承的寫法，並無解決模塊化問題。

    commonjs模塊是對象，輸入時必須查找對象屬性，其實質是總體加載模塊，而後使用方法，這種爲「運行時加載」。

    es6模塊不是對象，而是經過export命令顯示的制定輸出的代碼，輸入時採用靜態命令的形式。

    import{ start, exists, readFile} from ‘fs’;

    以上實質是從fs模塊加載3個方法，其餘方法不加載。這種加載稱爲「編譯時加載」

    效率比commonjs高。

    ES6模塊化的其餘優勢：

        a、再也不須要UMD模塊格式；

        b、未來瀏覽器的新API能夠用模塊格式提供，再也不須要作成全局變量或者navigator對象的屬性；

        c、再也不須要對象做爲命名空間，將來這些功能可經過模塊實現。

    19.一、嚴格模式 ［lottery插件完成後作詳細瞭解］

        模塊化自動採用嚴格模式，限制以下：

            a、變量必須聲明後使用；

            b、函數的參數不能有同名屬性，不然報錯；

            c、不能使用with語句；

            d、不能對只讀屬性賦值，負責報錯；

            e、不能使用前綴0表示八進制，不然報錯；

            f、不能刪除不可刪除的屬性，不然報錯；

            g、不能刪除變量(delete prop)，會報錯，職能刪除屬性(delete global[prop])；

            h、eval不會再外層做用域引入變量；

            i、eval和arguments不能被從新賦值；

            j、arguments不會自動反映函數參數的變化；

            k、不能使用arguments.callee;

            l、不能使用arguments.caller；

            m、禁止this指向全局變量；

            n、不能使用fn.caller和fn.arguments獲取函數調用的堆棧；

            o、增長保留字段（protected、static和interface）。

 

    19.二、export命令

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

        // profile.js

        export { f1 as firstName, lastName, year};

 

    19.三、import命令

        import {firstName as f1, lastName, year} from ‘./profile’;

 

    19.四、模塊的總體加載

        除了指定加載某個輸出值，還可使用總體加載，即用（*）指定一個對象，全部輸出值都加載在這個對象上。

        import * as circle from ‘./circle’。

 

    19.五、module命令

        module可取代import命令，達到總體輸入模塊的做用。

        module circle from ‘./circle’。

 

    19.六、export default命令

        export default function() {};

        import cc32 from ‘crc32’;

    vs

        export function cc32() {};

        import {crc32} from ‘crc32’;

        留意大括號的區別(「{}」)。

 

    19.七、模塊的繼承

        export * from ‘circle’

        表示輸出circle模塊的全部屬性和方法。

 

    19.八、ES6模塊加載的實質

        ES6模塊加載機制與commonjs模塊徹底不一樣。commons模塊輸出的是一個值的拷貝，而ES6模塊輸出的是值的引用。

 

    19.九、循環加載

        commonjs模塊的加載原理：加載時執行，即代碼在require 時就會所有執行；一旦出現「循環加載」，就只輸出已經執行的部分，還未執行的部分不輸出。

        ES6模塊是動態引用，遇到模塊加載命令import時不會去執行模塊，只是生成飲用，開發者本身保證取值時可以真正取到值。

 

    19.十、ES6模塊的轉碼

        除babel能夠轉外，一下兩種方法也能夠：

        a、ES6 module transpiler

        b、systemJS 

 

二10、編程風格［可參閱jscs.info］

    20.一、塊級做用域

        let 取代 var；

        全局常量和線程安全：建議使用const而非let；

 

    20.二、字符串

        一概使用單引號或者反引號；const b = `foo${a}bar`;

 

    20.三、解構賦值

        數組成員對變量賦值，優先解構賦值。

 

    20.四、對象

        a、單行定義的對象，最後一個成員不以逗號結尾。多行定義的對象須要。

        b、對象儘可能靜態化，一旦定義，就不得隨意添加新的屬性。

            const a = {x: null};

            a.x = 3;

        c、若是對象屬性名是動態的，在建立時，使用屬性表達式定義。

            const obj ＝ {

                id: 5,

                [getKey(‘enabled’)]: true

            }

        d、對象的屬性和方法儘可能採用簡潔表達法，易於描述和書寫：

            const atom = {

                ref, //ref: ref

                addValue(value) {

                    return atom.value + value;

                }

            }

 

    20.五、數組

        使用擴展運算符（...）複製數組。

        const itemsCopy = […list];

 

    20.六、函數

        a、當即執行函數使用箭頭函數

            (() => {

                console.log(‘Welecome to the Internet.');

            })();

        b、使用函數表達式的場合，使用箭頭函數

            [1, 2, 3].map([x] => {

                return x*x;

            })

        c、箭頭函數代替Function.prototype.bind，不該再用self/_this/that綁定this.

            const boundMethod = (…params) => method.apply(this, params);

        d、簡單的、單行的、不會複用的函數，建議採用箭頭函數。

        e、全部配置項都應該集中在一個對象，放在最後一個參數，布爾值不能夠直接做爲參數：

            function divide(a, b, {option = false} = {})

        f、再也不函數體內使用arguments變量，使用(…)代替：

            function all(…args) {

                return args.join('');

            }

        g、默認值語法設置函數參數的默認值：

            function handle(opts = {}){}

 

    20.七、map結構

        注意區分object和map，若是隻是須要key:value的數據結構，則使用map。

 

    20.八、class    

        a、用class取代須要prototype的操做。

        b、使用extends實現繼承

 

    20.九、模塊

        a、module語法是javascript模塊的標準寫法，使用import取代require；

        b、使用export取代module.exports;

        c、export default不要與普通export同時使用；

        d、不要再模塊輸入中使用通配符*;

 

    20.十、eslint的使用

        其是一個語法規則和代碼風格檢查工具，能夠確保語法正確、風格統一。 

摘自：http://www.cnblogs.com/hity-tt/p/6511019.html