JS高級第二天：ES6、Promise、async、class

ES6(常用的、重點的)

數組API、正則API、字符串API都不講

模板字符串

• 模板字符串的基本用法

    var s1 = `abc`

• 模板字符串的優勢：

    var obj={ name:"",age:5 };
    var s1 ="我叫："+obj.name+"，今年："+obj.age+"歲。"

解構賦值

• 對象的解構賦值

    var obj={name:"張三",age:18}

    var {name,age}=obj; 
    //生成2個變量，
    //  name值來自於obj.name、
    //  age值來自於obj.age

    var {name:title}=obj;
    //生成一個變量：title，值來自於obj.name

• 函數參數的解構賦值

    function f1(obj){
        console.log(obj.age);
        console.log(obj.height)
    }
    //等價於
    function f1({ age,height }){
        console.log(age);
        console.log(height)
    }

    f1({age:5,height:180})

• 補充：屬性的簡寫

    var a = 3 ; 
    var c = 10;
    var b = { a,c } ;   
    //b對象有一個a屬性，a屬性的值，來自於a變量  ，
    //還有一個c屬性，c屬性的值來自於c變量
    console.log(b)

函數的擴展

rest參數

• 使用背景：es6的
• 優點：arguments是僞數組，而rest參數是真數組

    function fn(...args){
        console.log(args);  //數組：[1,2,3,4,5]
    }
    fn(1,2,3,4,5)

箭頭函數

• 場景：用於替換匿名函數
• 基本用法：

    //匿名函數
    div.onclick=function(){
        console.log("你好")
    }
    //箭頭函數
    div.onclick=()=>{
        console.log("你好")
    }

• 有一個參數的箭頭函數

    var fn=(a)=>{
        console.log("abc");
    }
    //等價於：
    var fn=a=>{
        console.log("abc");
    }

• 有2個及更多參數的箭頭函數

    var f=(a,b,c)=>{
        console.log("abc")
    }

• 箭頭函數和普通匿名函數有哪些不同？
  • 函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。
  • 不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤。
  • 不可以使用arguments對象，該對象在函數體內不存在。如果要用，可以用 rest 參數代替。
  • （不常用）不可以使用yield命令，因此箭頭函數不能用作 Generator 函數。
    • generator函數現在經常用async替代

對象的擴展

• Object.assign：實現拷貝繼承
• 對象擴展運算符

    var obj1={ age:5,gender:"男" }
    var obj2={ ...obj1 }
    var obj3={ ...obj1 , age:10 }

Promise

爲什麼要有promise：解決回調地獄的問題

回調地獄：

    $.get("/getUser",function(res){
        $.get("/getUserDetail",function(){
            $.get("/getCart",function(){
                //...
            })
        })
    })

Promise函數基本用法

    var promise=new Promise((resolve,reject)=>{
        $.get("/getUser",res=>{
            resolve(res)
        })
    })
    promise.then(res=>{
        console.log(res);
    })

Promise函數實現多層回調

    new Promise((resolve,reject)=>{
        $.get("/getUser",res=>{
            resolve(res)
        })
    }).then(res=>{
        //用戶基本信息
        return new Promise(resolve=>{
            $.get("/getUserDetail",res=>{
                resolve(res)
            })
        })
    }).then(res=>{
        //用戶詳情
        return new Promise(resolve=>{
            $.get("/getCart",res=>{
                resolve(res)
            })
        })
    }).then(res=>{
        //購物車信息
    })

Promise函數錯誤處理

• 第一種方式

    new Promise((resolve,reject)=>{
        $.ajax({
            url:"/getUser",
            type:"GET",
            success:res=>{
                resolve(res);
            },
            error:res=>{
                reject(res)
            }
        })
    }).then(resSuccess=>{
        //成功的返回值
    },resError=>{
        //失敗的返回值
    })

• 第二種方式

    new Promise((resolve,reject)=>{
        $.ajax({
            url:"/getUser",
            type:"GET",
            success:res=>{
                resolve(res);
            },
            error:res=>{
                reject(res)
            }
        })
    }).then(resSuccess=>{
        //成功的返回值
    }).catch(resError=>{
        //失敗的返回值
    })

async

    async function get(){
        console.log('開始執行');
        var res = await timer()
        console.log('執行結束：',res);
    }
    function timer(){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve("你好");
            },1000)
        })
    }
    get();

class

定義一個類

    class Person {
        constructor(name) {
            this.name=name;
        }
    }
    //相當於：
    function Person(name){
        this.name=name;
    }

添加實例方法

    class Person {
        constructor(name,age) {
            this.name=name;
            this.age=age;
        }
        //定義方法
        say() {
            console.log("大家好，我叫："+this.name+"，今年："+this.age+"歲");
        }
        travel(){
            console.log("坐着飛機去巴厘島");
        }
    }

添加靜態方法

    class Animal {
        constructor(){

        }
        static born(){
            console.log("小呆萌出生了")
        }
    }
    //訪問靜態方法
    Animal.born();

類的繼承

    class Person {
        constructor(name){
            this.name=name;
        }
    }
    class Student extends Person {
        constructor(name,grade){
            super(name);    //調用父類構造函數
        }
    }

module

基本用法

• 導出模塊：

    //common.js
    export default { name:"abc" }

• 導入模塊：

    //b.js
    import common from "common.js"

    console.log( common.name ) //"abc"

模塊有多個導出

    //person.js
    export const jim = { country :"France" }
    export const tony = { color:"gray" }
    //默認的導出
    export default { name:"abc" }

    //index.js
    import person , { jim , tony } from "person.js"

    //person：{ name:"abc" }
    //jim：{ country :"France" }
    //tony：{ color:"gray" }

模塊導入導出取別名

    //person.js
    export const tony = { color:"gray" }
    export { tony as Tony }

    //index.js
    import { Tony } from "person.js"
    import { Tony as man} from "person.js"

    console.log(man)    //{ color:"gray" }