ES8新特性

1、async和await

async 函数，使得异步操作变得更加方便，它其实就是 Generator 函数的语法糖。它有更好的语义，并且返回值是Promise。
 
async用于定义一个异步函数，该函数返回一个Promise或非Promise对象。
 
await用于一个异步操作之前，表示要“等待”这个异步操作的返回值。await也可以用于一个同步的值。

初始async：

async function test() {
    console.log("test")
    return new Promise((resolve, reject) => {
        //resolve("suc-111")
        reject("err-222")
    })
}
//console.log(test()) //primise
let res = test()
res.then(res => {
    console.log("success", res)
}).catch(err => {
    console.log("err", err)
})
/*小结：
    1. async返回值是非promise对象，状态为fulfilled，则进入then
    2. async返回值是promise对象，状态为fulfilled 或 reject，则进入then 或 catch
*/

结合await：

function ajax1() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            //resolve("data-111")
            reject("err-111") //执行reject后会直接进入catch，没有catch就会报错
        }, 1000)
    })
}
function ajax2() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("data-222")
        }, 1000)
    })
}
async function test() {
    //await后面可以接非promise对象或promise对象
    //let res = await "twj"
    let res1 = await ajax1()
    //会等待resolve()执行完才继续执行，如果是reject()则不会执行下面的代码，直接抛出异常或进入catch
    console.log(res1) 
    let res2 = await ajax2(res1)
    console.log(res2)
    return res2
}
test().then(res => {
    console.log(res)
    //渲染页面
}).catch(err => {
    console.log("err", err)
    //处理错误
})

使用try…catch处理错误：

async function test() {
    try {
        let res1 = await ajax1()
        console.log(res1) //会等待resolve()执行完才继续执行
        let res2 = await ajax2(res1)
        console.log(res2)
        //渲染页面
        console.log("渲染页面")
    } catch (error) {
        //处理错误
        console.log("err", error)
    }
}
test()

链式异步操作，完善之前的案例：

function ajax(url) {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest()
        xhr.open("get", url, true)
        xhr.send()
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    resolve(xhr.responseText)
                } else {
                    reject(xhr.responseText)
                }
            }
        }
    })
}
// async function test() {
//     let res1 = await ajax("1.json")
//     console.log(res1)
//     let res2 = await ajax("2.json")
//     console.log(res2)
// }
// test()
//通过all()实现都返回了promise对象才走下一步
async function test() {
    console.log("show loading")
    let res = await Promise.all([ajax("1.json"), ajax("2.json")])
    console.log(res)
    console.log("show loading")
}
test()

2、对象方法扩展

基本用法：

let obj = {
    name: "twj",
    age: 100
}
//Object.keys(对象名)：得到对象中所有key
console.log(Object.keys(obj))
//Object.values(对象名)：得到对象中所有value
console.log(Object.values(obj))
//Object.entries(对象名)：得到对象中所有键值对
console.log(Object.entries(obj))
//通过entries可以快速将对象转换成map
let m = new Map(Object.entries(obj))
console.log(m)
//Object.getOwnPropertyDescriptors(对象名)：得到对象属性的所有属性修饰符
console.log(Object.getOwnPropertyDescriptors(obj))

完美克隆对象：

let obj = {
    name: "twj",
    age: 100,
    location: {
        province: "邵阳",
        city: "大连"
    },
    get city() {
        return this.location.city
    },
    set city(value) {
        return this.location.city = value
    },
    get uppername() {
        console.log("get")
        return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
    },
    set uppername(value) {
        //console.log("set", value)
        this.name = value
    }
}
let obj1 = {}
//将obj中所有属性都复制给obj1，但是get/set并不会复制过去
//Object.assign(obj1, obj)
//不仅能复制所有属性，get/set也能复制
Object.defineProperties(obj1, Object.getOwnPropertyDescriptors(obj))

3、字符串填充

//padStart()、padEnd()方法可以使得字符串达到固定长度，有两个参数，字符串目标长度和填充内容。
let str = "kerwin"
console.log(str.padStart(10, "x")) //xxxxkerwin
console.log(str.padEnd(10, "x")) //kerwinxxxx
console.log(str.padStart(5, "x")) //kerwin
console.log(str.padEnd(5, "x")) //kerwin

4、函数参数的末尾加逗号

【末尾逗号】在添加新的参数、属性、元素时是有用的，你可以直接新加一行而不必给上一行再补充一个逗号，这样使版本控制工具的修改记录也更加整洁。

---

上一篇文章	下一篇文章
ES7新特性	ES9新特性