1,Promise

Role: Resolve asynchronous callback issues

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

Promise.resolve('aa') converts AA to a Promise object and is in the resolve state

"Equivalent to: new Promise (resolve=>{resolve('aa')})

Promise.reject('bb') converts BB to a Promsie object and is rejected

Equivalent to: new Promise (reject=>{reject('bb')})

//hold promise Pack it into an array, p1,p2,p3 All for promise object
//Must ensure that all promise All objects are resolve Status will execute then
Promise.all([p1,p2,p3]).then(res=>{
    let [res1,res2,res3] = res;
    //...
}).catch(err){
    
}

//There is one resolve On returns
Promise.race([p1,p2,p3]).then(res=>{

}).catch(err){

}

2. Modularization

•  CommonJs
• AMD
• CMD

Modules require a server-side environment

Export: export const a = function() {}

　　<script type="module">

//Introduction

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

　　</script>

Import * can be used to import all exported modules of this file

You can alias the module when it is introduced, import {a as b} from'. /. /';

export default a=function(){} can be used when exporting, and no curly braces are required when introducing

Multiple modules can be exported at the same time, such as:

　　export default {

　　　　module1,

　　　　module2

　　}

import is automatically promoted to the top and executed first. If a timer changes a variable in the exported module content, the outside will also be changed.

import() is similar to node require(), but require can be imported dynamically and import cannot

import() returns a promise object

* The es6 modularization defaults to strict mode ('use strict')

3,async,await　

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

await waits for the current code execution to complete before proceeding to the next step

4. class

1) es5 implementation class method

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

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

//perhaps
Object.assign(Person.prototype,{
    showName(){

    },
    showAge(){

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

2)es6

class Person{
    constructor(name,age){//Constructor, new Called automatically when
        this.name=name;
        this.age=age;
    }//No commas
    showName(){
        return this.name;
    }
    showAge(){
        return this.age;
    }
}
let p1 = new Person('liuqiyang',22)

Method names can use variables as follows:

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

    }
    [a+b](){

    }
}
//call
p.strive()
p.strivemethod()

[Note] Classes have no elevation and must be redefined before being called

setter and getter in class

class Person{
    constructor(name,age){//Constructor, new Called automatically when
        this.name=name;
        this.age=age;
    }
    set name(val){

    }
    get age(){
        
    }
}

Static methods on classes: static

class Person{
    constructor(name,age){//Constructor, new Called automatically when
        this.name=name;
        this.age=age;
    }
    static fn(){
        //
    }
}
//call
Person.fn()

inherit

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

//When a child class encounters a method with the same name as the parent class, the child overrides the parent class
showName(){
super.showName();//Simultaneously inherit parent method
//
}

Insert:

Symbol: Add basic data type, return unique value, can be detected by typeof

Create: let syl = Symbol('aaa') cannot use new

The for-in loop cannot be accessed as a key value

5. generator Generator Function

Role: Solving Asynchronous Problems

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

//Use--Manual traversal
let g1 = gen();
g1.next()  //{value:'hello',done:false}
g1.next()  //{value:'world',done:false}
g1.next()  //{value:'hello world',done:true}

//Use for...of loop
for(let value of g1){

}

//Destructuring assignment
let [a,b] =gen()  //a--hello,b--world
let [a,b,c]=gen()  //c--undefined

//Remaining parameters
let[a,...b]=gen()

//Extension Operator
...gen()  //hello world

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

generator can combine axios data requests

Asynchronous solution:

• callback
• event listeners
• publish-subscribe
• Promise
• async