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     }
 }