ES6第三天

Generator函數   是一種新的函數類型   用於解決異步編程    容許一個函數分屢次進行

         function  *  gen（）{

               console.log(aaaaa)

                 yield     表示停住 讓步的意思 它只能用在generator函數中

                 要執行的函數體執行到yield所在行

               console.log(bbbbb)

          }

        var g = gen()     注 該函數不能夠用new來調用

        g.next();

yield做用

        1 把控制權交給g.next()

        2 返回內容

g.next()返回的是一個對象   {value， done}

                                      yield後跟什麼value就是什麼    return後跟什麼value就是什麼

                                      done  是否結束

g.next()做用

      1 把控制權再交給generator函數

      2 傳遞參數

Promise   解決異步編程的語法 改變的是代碼的書寫方式

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

                        })   會當即執行

                      resolve ：成功

                      reject：失敗

p是promise的實例化對象  用於監聽成功或者失敗         p.then()方法有2個參數 參數都是函數              注P.then()能夠屢次調用 可是隻有第一次調用的時候區分resolve和reject

                                                                                                                                                              從第二個p.then方法 每次都會執行 且它只有一個參數    後一個then的參數是

                                                                                                                                                              前一個then方法的返回值  

      

p的三個狀態

     1 pending 發送中              pending==>resolve

     2 resolved 已成功              pending==>rejected

     3 rejected  已失敗

如何連續調用Promise

方式一 在第一個promise的then方法中返回一個新的promise（由於promise會當即執行 因此咱們把連續的promise函數裝進一個普通函數中）

 定義第一個任務

2var task1 = function() {
3    // 初始化Promise
4    return new Promise(function(resolve, reject) {
5        // 發送ajax
6        $.ajax({
7            url: "/action1",
8            type: "get",
9            dataType: "json",
10            success: function(data) {
11                if (!data.error) {
12                    resolve(data);
13                } else {
14                    reject(data);
15                }
16            }
17        })
18    });
19}

定義第二個任務

22var task2 = function(data) {
23    return new Promise(function(resolve, reject) {
24        $.ajax({
25            url: "/action2",
26            data: data,
27            type: "get",
28            dataType: "json",
29            success: function(data) {
30                if (!data.error) {
31                    resolve(data);
32                } else {
33                    reject(data);
34                }
35            }
36        })
37    });
38}
39

40
  //執行第一個任務
  var p = task1();
41p.then(function(data) {
42    console.log(data);
43    return task2();
44}, function(data) {
45
46})
  //第二個then方法
47.then(function(data) {
48    console.log(data);
49}, function() {
})

方式二  promise的實例p還有catch方法    

當某一個Promise中調用了reject或者出異常時，會調用catch方法 將全部的失敗行爲統一處理

（這裏是把reject提取出來，只保留resolve方法）

 

1var p = task1();
2p.then(function(data) {
3    console.log("第一個Promise成功");
4    return task2();
5})
6.then(function(data) {
7    console.log("第二個Promise成功");
8})
9.catch(function(data) {
10    console.log(data);
});

 

方法三  Promise.all 這是一個靜態方法   該方法能夠監聽多個請求

            參數是一個數組   數組中的每一項都是promise的實例

            返回值   是promise的實例

            返回值能夠調用then方法，也接收兩個參數 

                             第一個參數  只有在數組中全部的promise狀態都變成resolved時 纔會執行（都成功才能夠成功）

 

           第二個參數 只要有任何一個數組的promise狀態變成rejected時 纔會執行 （有一個失敗就會失敗）

方法四 promise.race 這是一個靜態方法  能夠監聽多個請求

    參數是一個數組  數組中的每一項都是promise的實例

    返回值  是promise的實例

    返回值能夠調用then方法  也接受兩個參數          

           第一個參數：數組中的Promise第一個發生變化且變爲resolved 纔會執行。

 

           第二個參數：數組中的Promise第一個發生變化且變爲rejected 纔會執行

demo：

1// 由於Promise所接收的函數會被當即執行 因此咱們在連續調用多個Promise時，會把每一個Promise都放進一個普通函數內
2var task1 = function() {
3    // 初始化Promise
4    return new Promise(function(resolve, reject) {
5        // 發送ajax
6        $.ajax({
7            url: "/action1",
8            type: "get",
9            dataType: "json",
10            success: function(data) {
11                if (!data.error) {
12                    resolve("任務1 成功");
13                } else {
14                    reject("任務1 失敗");
15                }
16            }
17        })
18    });
19}

 

21// 定義第二個任務
22var task2 = function(data) {
23    return new Promise(function(resolve, reject) {
24        $.ajax({
25            url: "/action2",
26            data: {
27                msg: data
28            },
29            type: "get",
30            dataType: "json",
31            success: function(data) {
32                if (!data.error) {
33                    resolve("任務2 成功");
34                } else {
35                    reject("任務2 失敗");
36                }
37            }
38        })
39    });
40}

42 // 調用race方法
43 var p = Promise.race([task1(), task2()]);
44
45 // 監聽
46 p.then(function(data) {
47	console.log(data);
48 }, function() {
49	console.log(data);
})

類

 class  People {}

初始化 var p = new People（）　

構造函數 ---就是類的一部分 ，用於初始化時執行

 demo：

1 // 定義類
2 class People {
3    // 定義構造函數 該函數能夠定義自身的屬性
4 constructor (name, age, sex) {
5        this.name = name;
6        this.age = age;
7        this.sex = sex;
8    }
9}
10 // 初始化
11 var p = new People("小明", 22, "男");
   console.log(p)

原型方法  之前的方法都在原型上   es6中方法定義在類的內部

1 // 定義類
2 class People {
3    // 定義構造函數 該函數能夠定義自身的屬性
4    constructor (name, age, sex) {
5        this.name = name;
6        this.age = age;
7        this.sex = sex;
8    }
9    // 定義普通方法 
10 sayHello () {
11        console.log("你們好, 個人名字是" + this.name);
12    }
13 }
14 // 初始化
15 var p = new People("小明", 22, "男");
   p.sayHello();

靜態方法---就是類自己調用的方法  static 

1 // 定義類
2 class People {
3    // 定義靜態方法
4 static sayHi() {
5        console.log("我是People類");
6        console.log(this);
7    }
8 }
9 // 調用靜態方法
  People.sayHi();

存取器 ---就能夠訪問實例的getName屬性和setName屬性。同時會觸發響應的函數  給實例使用

1// 定義類
2class People {
3    // 定義構造函數 該函數能夠定義自身的屬性
4    constructor (name, age, sex) {
5        this.name = name;
6        this.age = age;
7        this.sex = sex;
8    }
9    // 定義存取器方法
10 get getAge() {
11        console.log("哈哈哈哈哈");                
12        return this.name;
13    }
14 set setAge(value) {
15        console.log("hehehehehehe");
16        this.name = value;
17    }
18}
19// 初始化
20var p = new People("王老五", 13, "男");
21// 訪問存取器屬性
22console.log(p.getName);

靜態存取器--- 給類使用

1// 定義類
2class People {
3    // 定義構造函數 該函數能夠定義自身的屬性
4    constructor (name, age, sex) {
5        this.name = name;
6        this.age = age;
7        this.sex = sex;
8    }
9    // 定義存取器方法
10 static get getName() {
11        console.log("哈哈哈哈哈");                
12        return this.name;
13    }
14 static set setName(value) {
15        console.log("hehehehehehe");
16    }
17}
18
19// 訪問類的存取器方法
console.log(People.getName);

繼承---extends關鍵字用於繼承

使用方式

class Student extends People {
                  constructor() {
             super(); // 構造函數式繼承
                 }
              }

1 // 定義父類
2 class People {
3    constructor(name, age) {
4        this.name = name;
5        this.age = age;
6    }
     //方法
7 sayHello() {
8        console.log("hello");
9    }
     //靜態方法
10 static hi() {
11        console.log("hi")
12    }
     //存取器
13 get getAge() {
14        console.log("存取器");
15    }
     //靜態存取器
16 static get getName() {
17        console.log(this.name);
18    }
19}
20 // 定義子類
21 class Student extends People {
22    constructor(name, age, sex) {
23        super(name, age); // 構造函數式繼承
24        this.sex = sex;
25     }
26 }
27
28 // 初始化子類
29 var s = new Student("王老五", 22, "男");
30 // 子類原型上沒有該方法
31 s.sayHello();// 調用成功
32 // 子類調用hi方法
33 Student.hi();
34 // 子類調用存取器屬性
35 s.getAge;
36 // 子類調用靜態存取器
37 Student.getName;
   // 最終：父類的一切均可以繼承

轉換es6爲es5代碼

  須要的模塊  babel-loader@7、babel-core、babel-preset-env

  須要創建一個webpack.config.js配置文件

 

1 module.exports = {
2     entry: "./module/main",
3 output: {
4         path: __dirname,
5         filename: "./bundle.js"
6     },
7 module: {
8         rules: [ 9             {
10                 test: /\.es6$/,
11                 loader: "babel-loader",
12                 options: {
13                     presets: ["env"]
14                 }
15             }
16         ]
17     }
 }