## ES6從入門到放棄


1.ES6是什麼，黑歷史，不講，自己百度去。


2.在瀏覽器中如何使用？


​1.babel babeljs.io線上編譯


​2.traceur-----Google出的編譯器，把ES6編譯成ES5


​traceur 編譯


​bootsrap 載入程式，和我們理解的bootstrap css那個框架沒有半毛錢關係。 


```javascript
    <script src="traceur.js"></script>
    <script src="bootstrap.js"></script>
    <script type="module">


    </script>
```
---


3.es6新功能


​1.定義變數


​let 替代var 擁有塊級作用域。


​2const 


​定義常量 常量不可以修改，如果修改會報錯


​3.字串連線


​ES6管它叫模板引擎，其實就是字串連線這個破玩意。


​用鍵盤1左邊那個鍵,反引號。


​


```javascript
var str ='帥';//注意這裡是正常雙引號
var str2 = `你們從我臉上看到了什麼${str},難道不是麼？`;
```


​4.解構賦值


​var [a,b,c] = [12,5,8];


​console.log(a,b,c);//12,5,8 是不是很簡潔？


​5.ES6新技巧


​a)複製陣列


​arr2.from(arr)//再也不用用迴圈了，吼吼，還可不可以更性感一點


​arr2 = [...arr]//簡直是bug級別的用法，不過真心簡單


​b)for of迴圈


​c)map 、delete


​6.箭頭函式 重點，angular 2.x用的不少。


```
/*function show(a){
return a;
}
var s=show(12);
alert(s);*/


var show=(a,b)=>a+b;


var s=show(12,5);
```


相當簡單。


```
([param] [, param]) => {
   statements
}
param => expression
```


解釋：


param 是引數，根據引數個數不同，分這幾種情況： 
() => { … } // 零個引數用 () 表示
x => { … } // 一個引數可以省略 ()
(x, y) => { … } // 多引數不能省略 ()


7.更簡潔的物件語法


```
var name='abb';
        var age=101;
        var preson={
            name,
            age,
            showName(){
               return this.name;
            },
            showAge(){
                return this.age;
            }
        };
        alert(preson.showName());
```


你沒有看錯，bug一樣的語法。


8.重中之重，不懂這個你徹底懵逼，完全看不懂angular2.x在幹啥。類。


​類，真特麼累，一個語法糖，廢柴，然而你還得懂。


​


```
class Person{ //類
            constructor(name,age){
                this.name=name;
                this.age=age;
            }
            showName(){
                return this.name;
            }
            showAge(){
                return this.age;
            }
        }


        var p1=new Person('aaa',10);


        alert(p1.showName());
```


你沒有看錯，這裡面的this就沒有問題的。玩類，不得不說的一個東西就是繼承，這裡得感謝ES6，我們再也不用


apply 和 constructor 混合的方式繼承了，太特麼噁心了，直接用extend,鼓掌，送火箭。


```
        class Person{ //類
            constructor(name='default',age=0){
                this.name=name;
                this.age=age;
            }
            showName(){
                return this.name;
            }
            showAge(){
                return this.age;
            }
        }


        //繼承
        class Worker extends Person{
            constructor(name,age,job='掃地的'){
                super(name,age);
                this.job=job;
            }
            showJob(){
                return this.job;
            }
        }
```


早特麼應該這麼玩，話說吐槽一下，敢不敢把construtor這麼醜逼的東西給我換成真正的建構函式？


再說一個模組化，前方高能，必須必須必須會！！否則你載angular2.x中連程式碼你都組織不起來，不知道你往哪裡寫。


之前我們用過seajs，和require,有了ES6，再也不用這兩個貨了。


定義模組


```
const a = 12;
export a;
```


再來一個angular2.x中的例子


```
class hero{
//屬性
 xxxx
 //方法
}


exports hero;
```


怎麼使用？


```
        import modA from './a.js';
        import modB from './b.js';


        console.log(modA+modB);
```


9.promise


​如果你想玩一些新的庫，肯定離不開資料互動，外面炒的很火。


就是一個物件，用來傳遞非同步操作的資料(訊息)


pending（等待、處理中）—> Resolve(完成、fullFilled)
  —> Rejected(拒絕、失敗)
​使用：


var p1=new Promise(function(resolve,reject){
//resolve  成功了
//reject    失敗了
    });

var p1=new Promise(function(resolve,reject){
if(非同步處理成功了){
resolve(成功資料)
}else{
reject(失敗原因)
}
    });

p1.then(成功(resolve),失敗(reject))√
--------------------------------------------
p1.catch——用來捕獲錯誤
10.生成器Gennerator.


​看起來挺懸，其實就是那麼回事兒，我們看看是什麼鬼。


​一個函式，可以遍歷狀態,感覺就是狀態機，好吧不說了再說就懵逼了。


​語法：


​function *show(){


​}


​注意：


​a)函式名字前有星號


​b)內部用yield 


​c）next執行下一個狀態


```
        function* show(){
            yield 'Hello';
            yield 'World';
            yield 'Es6';
            return 'well';
        }


        var res=show();


        console.log(res.next()); //{value:'Hello', done:false}
        console.log(res.next()); //{value:'World', done:false}
        console.log(res.next()); //{value:'Es5', done:false}
        console.log(res.next()); //{value:'well', done:true}
```


ES6基本上會這麼多就可以了，剩下的時間就可以去泡妹子了,JS大法好，收工！