ES8的新特性

_洋

已于 2022-10-24 20:55:55 修改

阅读量781

点赞数

分类专栏： ES6 文章标签： javascript 前端 typescript

于 2022-05-16 19:26:55 首次发布

本文链接：https://blog.youkuaiyun.com/mantou_riji/article/details/124803437

版权

ES6 专栏收录该内容

16 篇文章

订阅专栏

文章目录

async 和 await
ES8对象方法扩展

async 和 await

async和 await两种语法结合可以让异步代码像同步代码一样

async函数

async函数的返回值为promise对象
promise对象的结果由 async函数执行的返回值决定

async函数的定义格式

        async function 函数名 (){
           函数体
        }

eg：

        async function fn (){
           return 'yang'
        //    无论return什么，async的返回结果都是Promise
        }
        const result = fn()
        console.log(result)

在这里插入图片描述

async返回结果的解析

如果return的不是一个Promise类型的对象，那么async返回的Promise的状态是成功，而且Promise的值是return的值
eg：

        async function fn (){
           return 'yang'
        }
        const result = fn()
        console.log(result)

在这里插入图片描述

如果抛出错误，那么async返回的Promise的状态是失败，而且Promise的值是抛出的错误值。
eg：

        async function fn (){
           throw new Error('出错啦!')
        }
        const result = fn()
        console.log(result)

在这里插入图片描述

如果return的是Promise对象，那么async返回的Promise的状态和值与return的Promise对象一致

        async function fn (){
          return new Promise((resolve,reject)=>{
              resolve('成功的数据')
          })
        }
        const result = fn()
        console.log(result)

在这里插入图片描述

await表达式

await必须写在 async函数中
await右侧的表达式一般为promise对象
如果promise没有.then，await返回的是promise的reslove或reject的值；
如果promise有.then，await返回的是.then中回调函数的返回值；
await 的 promise失败了，就会抛出异常，需要通过try.catch 捕获处理
eg：

        const p =new Promise((resolve,reject)=>{
            resolve("成功的值")
        })
        async function main (){
           let result = await p
        //    await p 的返回结果是p指向的Promise对应的值
            console.log(result)
        }
        main()

在这里插入图片描述
失败情况下：

        const p =new Promise((resolve,reject)=>{
            reject("失败的值")
        })
        async function main (){
            try{
                let result = await p
                console.log(result)
            }catch(e){
                console.log(e)
            }   
        }
        main()

在这里插入图片描述

async和await结合实现异步

需求：读取3个文件
js文件：

// 引入fs
const fs = require("fs")

// 读取为学，返回值是Promise函数
function readWeiXue (){
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/为学.md", (err, data) => {
            if (err) reject(err)
            resolve(data)
        })
   })
}

// 读取插秧诗
function readChaYangShi (){
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/插秧诗.md", (err, data) => {
            if (err) reject(err)
            resolve(data)
        })
   })
}

// 读取观书有感
function readGuanShu (){
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/观书有感.md", (err, data) => {
            if (err) reject(err)
            resolve(data)
        })
   })
}

async function main (){
    let weixue = await readWeiXue()
    let chayangshi = await readChaYangShi()
    let guanshu = await readGuanShu()

    console.log(weixue.toString())
    console.log(chayangshi.toString())
    console.log(guanshu.toString())
} 
main()

在这里插入图片描述

async和await结合发送ajax请求

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        // 发送AJAX请求,返回的结果是 Promise对象
        function sendAJAX (url){
        return new Promise((reslove,reject)=>{
            //    创建对象
        const xhr = new XMLHttpRequest();
        // 初始化对象
        xhr.open('GET',url)
        // 发送
        xhr.send()
        // 事件绑定
        xhr.onreadystatechange = function (){
           if(xhr.readyState===4){
               if(xhr.status>=200&&xhr.status<300){
                   reslove(x.response)
               }else{
                   reject(x.status)
               }
           }
        }

        })
        }
    
        // Promise then 测试
       sendAJAX("https://api.apiopen.top/getJoke").then(value=>{
        console.log(value)
       },reason =>{
           console.log(reason)
       })

    //    async 与 await测试
       async function main (){
          let result = await sendAJAX("https://api.apiopen.top/getJoke")
          console.log(result)
       }
       main()
        
    </script>
</body>
</html>

ES8对象方法扩展

Object.values()

Object.values()方法返回一个给定对象的所有可枚举属性值的数组

Object.entries()

Object.entries()方法返回一个给定对象自身可遍历属性[key,value]的数组

Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors()该方法返回指定对象所有自身属性的描述对象。
返回的是对象属性的描述对象。
对象属性的描述对象是什么？如：

 const obj = Object.create(null,{
     name:{//对属性的描述
         // 设置值
         value:'yang',
         // 属性特性,
         writable:true,
         configurable:true,//是否可以删除
         enumerable:reue//书否可以枚举
     }
 })

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        const school={
            name:"nefu",
            city:"哈尔滨",
            xueke:['java','web','python']
        }

        // 获取所有的键
        console.log(Object.keys(school))
        // 获取对象所有的值
        console.log(Object.values(school))
        // entries
        console.log(Object.entries(school))
        // entries的返回结果可以作为Map的值
        const m = new Map(Object.entries(school))
        console.log(m.get('city'))

        //获取对象属性的 描述对象 
        console.log(Object.getOwnPropertyDescriptors(school))        
    </script>
    
</body>
</html>

输出：
在这里插入图片描述