21.ES8新特性

编程之家收集整理的这篇文章主要介绍了21.ES8新特性编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

async 和 await

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

async 函数

  1. async 函数的返回值为 promise 对象
  2. promise 对象的结果由 async 函数执行的返回值决定
//async 函数
async function fn(){
    // 返回一个字符串
    //return 'Study';
    // 返回的结果不是一个 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);
})

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() {
    try {
        let result = await p;
        //
        console.log(result);
    } catch (e) {
        console.log(e);
    }
}
//调用函数
main();
//async与await结合读取文件内容

//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",data) => {
            //如果失败
            if (err) reject(err);
            //如果成功
            resolve(data);
        })
    })
}

function readGuanShu() {
    return new Promise((resolve,reject) => {
        fs.readFile("./resources/观书有感.md",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();
//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=>{})

// 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

  1. Object.values()方法返回一个给定对象的所有可枚举属性值的数组
  2. Object.entries()方法返回一个给定对象自身可遍历属性 [key,value] 的数组

Object.getOwnPropertyDescriptors

方法返回指定对象所有自身属性的描述对象

//声明对象
const school = {
    name:"Study",cities:['北京','上海','深圳'],xueke: ['前端','Java','大数据','运维']
};

//获取对象所有的键
console.log(Object.keys(school));//['name','cities','xueke']
//获取对象所有的值
console.log(Object.values(school));//["Study",Array(3),Array(4)]
//entries
console.log(Object.entries(school));//
//创建 Map
const m = new Map(Object.entries(school));
console.log(m.get('cities'));//['北京','深圳']

//对象属性的描述对象
console.log(Object.getOwnPropertyDescriptors(school));

const obj = Object.create(null,{
     name: {
        //设置值
        value: 'Study',//属性特性
        writable: true,configurable: true,enumerable: true
	} 
});

总结

以上是编程之家为你收集整理的21.ES8新特性全部内容,希望文章能够帮你解决21.ES8新特性所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的ES6相关文章

ES6转ES5(Babel转码器) 前提:必须在VScode中已经安装了Node.js 官网:https://nodejs.org/en/ 一、安装命令行转码工具 npm install --glob
Map介绍 ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。Map也实现了iterator接口,所以可以使用【扩展
Object.fromEntries //二维数组 const result = Object.fromEntries([ [&amp;#39;name&amp;#39;,&amp;#39;Study
扩展运算符 [...]扩展运算符能将【数组】转换为逗号分隔的【参数序列】 //声明一个数组 const tfboys = [&amp;#39;y&amp;#39;,&amp;#39;w&amp;#39
简化对象写法 ES6允许再大括号里面,直接写入变量和函数,作为对象的属性和方法。 遮眼法的书写更加简洁 let name = &amp;#39;study&amp;#39;; let change =
函数参数默认值 ES6允许给函数参数赋值初始值 //1.形参初始值 具有默认值的参数,一般位置要靠后(潜规则) function add(a,b,c=10){ return aʻʼ } let
数值扩展 //0. Number.EPSILON 是 JavaScript 表示的最小精度 EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16
ES6引入rest参数,用于获取函数的实参,用来替代arguments //ES5获取实参的方式 function date(){ console.log(arguments);//对象 } date
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注