ES6 新特性(筆記)

1.定義變量

    let

        a).塊做用域 , 不一樣於var的函數做用域

        b).不能夠重複定義同一個變量名

 

        注： 

            {} + let 組合使用，

            能夠替代之前的封閉空間 : (function(){})();

 

    const  

        a).常量賦值 ：須要當即初始化 且 初始化後不能夠修改。

        b).和let同樣 ， 不可重複聲明同一變量。

 

 

2.字符串 拼接

    let str = `my english ${x} ` ;

 

3.解構賦值

    let [a,b,c] = [10,20,30];          // 和順序有關

    let [a,[b,c],d] = [1,[2,3],4] ;

    let {a,b,c} = {b:12 , a:6 , c:4}; // 和順序無關

 

    let {a = 1, b = 2} = {};             // 賦了默認值

 

4.複製數組

    let arr1 = [1,2,3];

    let arr2 = Array.from(arr1);  //方式一

    let arr3 = [...arr1] ;              //方式二

    

    補：‘...’的其餘小技巧

        function method_1(...args){

            arguements.push(99);// 報錯，沒有push方法

            args.push(99); //這樣就是個數組 能夠push

        }

 

 

5. for-of 循環

    a).能夠循環數組 ，不能夠循環json

    b).是用於循環map的

        for( let [k,v] of xx_map){

            console.log(k,v);

        }

 

6.Map 

    map.keys() ; 

    map.entries();

    map.values();

    map.get();

    map.delete();

 

7.箭頭函數 =>

    寫法 ：let show = () => {}

    注意 ：

        箭頭函數中的this指向window

        不能使用arguments 實例

 

8.面向 對象語法

    選項卡例子 繼承方式實現 自動切換 // todo

    

9.函數給默認值 

    function move(a = 1 , b){}

 

10.模塊化

    導出模塊

        const a = 12 ;

        export default a ;

    引用模塊

        先引入bebel.js/traceur.js等編譯器

        再引入bootstrap.js(和css中的bootstrap無關）

        <!-- 而且 type 必須爲 module -->

        <script type = 'module' >

            import modA from './xxx.js' ;

        </script>

 

    多模塊導出 及引入

        導出

            const a = 5 ;

            const b = 12 ;

        

            export default {a,b};

 

        引入並使用

            import xxx from './xx.js' ;

            console.log(xxx.a + xxx.b);

 

11. Promise

    用來傳遞異步操做的數據(消息)

 

    pending(等待，處理中) --> Resolve (完成,fullFilled)

                                         --> Reject (拒絕，失敗)

 

 

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

        if(成功了){

            resolve('成功數據');

        }else{

            reject('失敗緣由');

        }

    });

 

    後續 ： p1.then(成功func(resolve),失敗func(reject));

 

    例如：

        p1.then(function(val){

            alert(`成功了${val}`);

            return `${val}恩恩` ;

        },function(val){

            alert(`失敗了${val}`);

            return `${val}嗚嗚` ;    

        });

 

        若是p1走到了 if語句 ， 那麼結果就是 ： 成功了成功數據

        反之，走到else , 那麼結果就是 ： 失敗了失敗緣由

        也就是說 new Promise() 中的函數 只是用來 自定義成功失敗邏輯的

        而真實的對 成功/失敗的數據的 處理 是放在後續的then中操做的。

        注意then中的函數若是有返回值，這個值會返回到下一個then的對應參數中。

 

    catch的用法：

         p1.then(function(val){

            alert(val);

            throw '強行拋出';

         }).catch(function(ex){

            alert(ex);

         });

 

    Promise.all()用法：

        var p2 = Promise.resolve(3);

        var p3 = Promise.reject();

 

        //all()中全部的promise對象都成功了，纔會走成功函數

        // 因爲p3是失敗了的 Promise對象， 因此,會走失敗的分支；和true/false無關

        Promise.all([false,p2,p3]).then(function(){

            alert('成功了');

        },function(val){

            alert('失敗了');

        });

 

 

    Promise.race() --挑最快的用

        

        var p4 = new Promise(function(){

            setTimeout(resolve,500,'one');

        });

 

        var p5 = new Promise(function(){

            setTimeout(resolve,100,'two');

        });

 

        Promise.race([p4,p5]).then(function(val){

            console.log(val); //display 'two'

        });

 

    Promise.resolve(value);

    Promise.resolve(promise);

    Promise.resolve(array);

 

 

 

12.Generator --生成器

    是一個函數 , function緊接着加個*

    能夠遍歷，因此就是個迭代器

    語法:

        function* show(){

            yield 'Hello';

            yield 'World';

            yield 'ES6';

        }

 

        var res = show();

        console.log(res.next());//{value:Hello , done:false}

        console.log(res.next());

        console.log(res.next());

        注意：yield自己沒有返回值

        next()能夠帶參數，給上一個yield了

 

    for-of能夠循環generator函數：

        function* fn(){

            yield 1 ; yield 2 ;yield 3 ;

            return 6;

        }

 

        for(var r of fn()){

            r.next();

        }

 

    generator在json對象中寫法：

        var json = {

            * show(){

                yield 'xx' ;

            }

        };