es6学习笔记(二)

1、Promise

  作用:解决异步回调问题

 1 //创建
 2 new Promise((resolve,reject)=>{
 3     if(success){
 4           resolve('success') 
 5      }else{
 6           reject('error')
 7      }    
 8 }) .then(res=>{//返回一个Promise
 9      console.log(res)
10 }) .catch(err=>{
11     console.log(err)
12 })          

  Promise.resolve('aa')   将aa转为Promise对象,且是resolve状态

  相当于:new Promise(resolve=>{resolve('aa')})

  Promise.reject('bb')  将bb转成Promsie对象,且是reject状态

  相当于:new Promise(reject=>{reject('bb')})

//把promise打包放入一个数组,p1,p2,p3都为promise对象
//必须确保所有promise对象都是resolve状态才会执行then
Promise.all([p1,p2,p3]).then(res=>{
    let [res1,res2,res3] = res;
    //...
}).catch(err){
    
}

//有一个resolve就返回的情况
Promise.race([p1,p2,p3]).then(res=>{

}).catch(err){

}

2、模块化

 CommonJs AMD CMD

  模块需要服务端环境

  导出:export const a = function(){     }

  <script type="module">

    //引入

    import {a} from './module/test.js'

  </script>

  可以使用import * 引入该文件所有导出的模块

  可以在引入的时候为模块取别名,import {a as b} from'./../';

  导出的时候可以使用export default a=function(){},在引入时不需要花括号

  可以同时导出多个模块,如:

  export default {

    module1,

    module2

  }

  【注】:import会自动提升到顶部先执行,导出的模块内容里若有定时器改变变量,外面也会被改动

                import()类似于node的require(),但是require可以动态引入而import不可以

      import()返回的是一个promise对象

      es6模块化默认使用严格模式(‘use strict’)

3、async、await 

async function main(){//异步函数
    const mod1 = await import('./module/1.js')
    const mod2 = await import('./module/2.js')
}

await会等待当前代码执行完成之后再执行下一步

4、类class

1)es5实现类的方法

function Person(name,age){
    this.name = name;
    this.age = age
}

Person.prototype.showName(){
    return this.name;
}

//或者
Object.assign(Person.prototype,{
    showName(){

    },
    showAge(){

    }
})
let p1 = new Person('liuqiyang',22)

2)es6

class Person{
    constructor(name,age){//构造函数,new的时候自动调用
        this.name=name;
        this.age=age;
    }//没有逗号
    showName(){
        return this.name;
    }
    showAge(){
        return this.age;
    }
}
let p1 = new Person('liuqiyang',22)

方法名可以使用变量,如下:

let a = 'strive';
let b = 'method';
class Person(){
    constructor(){}
    [a](){

    }
    [a+b](){

    }
}
//调用
p.strive()
p.strivemethod()

【注】:类没有提升功能,必须再定义完再调用

class中的setter和getter

class Person{
    constructor(name,age){//构造函数,new的时候自动调用
        this.name=name;
        this.age=age;
    }
    set name(val){

    }
    get age(){
        
    }
}

类身上的静态方法:static

class Person{
    constructor(name,age){//构造函数,new的时候自动调用
        this.name=name;
        this.age=age;
    }
    static fn(){
        //
    }
}
//调用
Person.fn()

继承

//es5
function Person(name){
    this.name = name;
}
Person.prototype.showName(){
    console.log(this.name)
}
function Student(name,action){
    Person.call(this,name);
    this.action = action;
}
Student.prototype = new Person();

//es6
class Person{
    constructor(name){
        this.name=name;
    }
    showName(){

    }
}
class Student extends Person{
    constructor(name,action){
        super(name);
        this.action = action;
    }
    showAction(){
        
    }
}

//子类遇到与父类同名的方法时,子类会覆盖父类
showName(){
super.showName();//同时继承父类方法
//
}

插入:

  Symbol:新增基本数据类型,返回唯一值,可用typeof检测

  创建:let syl = Symbol('aaa')  不能使用new

  作为key值时,for in循环无法访问

5、generator生成器函数

  作用:解决异步问题

//声明
function * gen(){
    yield 'hello';
    yield 'world';
    return 'hello world'
}

//使用--手动遍历
let g1 = gen();
g1.next()  //{value:'hello',done:false}
g1.next()  //{value:'world',done:false}
g1.next()  //{value:'hello world',done:true}

//使用for...of循环
for(let value of g1){

}

//解构赋值
let [a,b] =gen()  //a--hello,b--world
let [a,b,c]=gen()  //c--undefined

//剩余参数
let[a,...b]=gen()

//扩展运算符
...gen()  //hello world

Array.form(gen())  //[hello,world]

generator可以结合axios数据请求

异步解决方案:

回调函数 事件监听 发布订阅 Promise async