美文网首页
010JavaScript-ES7&&ES8

010JavaScript-ES7&&ES8

作者: 东邪_黄药师 | 来源:发表于2020-11-25 15:49 被阅读0次

ES7

Array.prototype.includes

  • Includes 方法用来检测数组中是否包含某个元素,返回布尔类型值
 const mingzhu = ['西游记','红楼梦','三国演义','水浒传'];
  //判断
 console.log(mingzhu.includes('西游记')); //true
 console.log(mingzhu.includes('皮皮鲁外传')); //fasle

指数操作符

  • 在 ES7 中引入指数运算符「**」,用来实现幂运算,功能与 Math.pow 结果相同
 console.log(2 ** 10);//es7 1024
console.log(Math.pow(2, 10)); // es5 1024

ES8

async 和 和 await

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

async

  1. async 函数的返回值为 promise 对象,
  2. promise 对象的结果由 async 函数执行的返回值决定
 //async 函数
        async function fn(){
            // 返回一个字符串
            // return '尚硅谷';
            // 返回的结果不是一个 Promise 类型的对象, 返回的结果就是成功 Promise 对象
            // return;
            //抛出错误, 返回的结果是一个失败的 Promise
            // throw new Error('出错啦!');
            //返回的结果如果是一个 Promise 对象
            return new Promise((resolve, reject)=>{
               // resolve('成功的数据');
                reject("失败的错误");
            });
        }

      const result = fn()
        //调用 then 方法
        result.then(value => {
            console.log(value);
        }, reason => {
            console.warn(reason);
        })
        console.log(result) //Promise

await 表达式

  1. await 必须写在 async 函数中
  2. await 右侧的表达式一般为 promise 对象
  3. await 返回的是 promise 成功的值
  4. await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理
        //创建 promise 对象
            const p = new Promise((resolve, reject) => {
                //resolve("用户数据");
                reject("失败啦!");
            })
            // await 要放在 async 函数中
            async function main() {
                //结果是Promise成功的值

                try {
                    //成功的值
                    let result = await p
                    console.log(result)
                } catch (e) {
                    //失败的值
                    console.log(e)
                }

            }
            //调用函数
            main()

async和await结合读取文件(node)

//1. 引入 fs 模块
const fs = require("fs");

//读取『为学』
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 函数
async function main(){
    //获取为学内容
    let weixue = await readWeiXue();
    //获取插秧诗内容
    let chayang = await readChaYangShi();
    // 获取观书有感
    let guanshu = await readGuanShu();

    console.log(weixue.toString());
    console.log(chayang.toString());
    console.log(guanshu.toString());
}

main();
运行结果.png

async与await封装AJAX请求

  // 发送 AJAX 请求, 返回的结果是 Promise 对象
        function sendAJAX(url) {
            return new Promise((resolve, reject) => {
                //1. 创建对象
                const x = new XMLHttpRequest();

                //2. 初始化
                x.open('GET', url);

                //3. 发送
                x.send();

                //4. 事件绑定
                x.onreadystatechange = function () {
                    if (x.readyState === 4) {
                        if (x.status >= 200 && x.status < 300) {
                            //成功啦
                            resolve(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 测试  axios
        async function main(){
            //发送 AJAX 请求
            let result = await sendAJAX("https://api.apiopen.top/getJoke");
            //再次测试
            let tianqi = await sendAJAX('https://www.tianqiapi.com/api/?version=v1&city=%E5%8C%97%E4%BA%AC&appid=23941491&appsecret=TXoD5e8P')

            console.log(tianqi);
        }

        main();
        

Object.values 和 和 Object.entries

相关文章

  • 010JavaScript-ES7&&ES8

    ES7 Array.prototype.includes Includes 方法用来检测数组中是否包含某个元素,返...

网友评论

      本文标题:010JavaScript-ES7&&ES8

      本文链接:https://www.haomeiwen.com/subject/vskniktx.html