es6学习笔记（二）

2019-08-14 10:33:39来源：博客园阅读 ()

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(){ }

　　　　//引入

　　　　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]