【ES6+】010-ES8新特性：async和await、对象方法扩展

最新推荐文章于 2023-10-19 23:47:19 发布
最新推荐文章于 2023-10-19 23:47:19 发布
阅读量388 收藏
点赞数
分类专栏： Web 文章标签： js javascript es8
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29689343/article/details/111462765
版权

目录

一、ES8功能概述

二、async和await、对象方法扩展

1、概述

2、async 函数

概述：

代码实现：

3、await 表达式

概述：

代码实现：

4、async和await读取文件案例

代码实现：

运行结果：

5、async 和 await 结合发送ajax请求

代码实现：

运行结果：

6、对象方法扩展

Object.values、Object.entries和Object.getOwnPropertyDescriptors：

代码实现：

运行结果：

一、ES8功能概述

1、async 和 await

  • 简化异步函数的写法；

2、对象方法扩展

  • 对象方法扩展；

 

二、async和await、对象方法扩展

1、概述

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

简化异步函数的写法；

 

2、async 函数

概述：

  1. async 函数的返回值为 promise 对象；

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

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>async函数</title>
	</head>
	<body>
		<script>
			// async函数：异步函数
			async function fn(){
				// return 123; // 返回普通数据
				// 若报错，则返回的Promise对象也是错误的
				// throw new Error("出错啦！");
				// 若返回的是Promise对象，那么返回的结果就是Promise对象的结果
				return new Promise((resolve,reject)=>{
					// resolve("成功啦！");
					reject("失败啦！");
				})
			}
			const result = fn();
			// console.log(result); // 返回的结果是一个Promise对象
			// 调用then方法
			result.then(value => {
				console.log(value);
			},reason => {
				console.warn(reason);
			});
		</script>
	</body>
</html>

 

3、await 表达式

概述：

  1. await 必须写在 async 函数中；

  1. await 右侧的表达式一般为 promise 对象；

  2. await 返回的是 promise 成功的值；

  3. await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理；

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>await表达式</title>
	</head>
	<body>
		<script>
			// async函数 + await表达式：异步函数
			// 创建Prmise对象
			const p = new Promise((resolve,reject)=>{
				resolve("成功啦！");
			})
			async function fn(){
				// await 返回的是 promise 成功的值
				let result = await p;
				console.log(result); // 成功啦！
			}
			fn();
		</script>
	</body>
</html>

 

4、async和await读取文件案例

代码实现：

// 导入模块
const fs = require("fs");

// 读取
function readText() {
    return new Promise((resolve, reject) => {
        fs.readFile("../resources/text.txt", (err, data) => {
            //如果失败
            if (err) reject(err);
            //如果成功
            resolve(data);
        })
    })
}

function readTest1() {
    return new Promise((resolve, reject) => {
        fs.readFile("../resources/test1.txt", (err, data) => {
            //如果失败
            if (err) reject(err);
            //如果成功
            resolve(data);
        })
    })
}

function readTest2() {
    return new Promise((resolve, reject) => {
        fs.readFile("../resources/test2.txt", (err, data) => {
            //如果失败
            if (err) reject(err);
            //如果成功
            resolve(data);
        })
    })
}

//声明一个 async 函数
async function main(){
    //获取为学内容
    let t0 = await readText();
    //获取插秧诗内容
    let t1 = await readTest1();
    // 获取观书有感
    let t2 = await readTest2();

    console.log(t0.toString());
    console.log(t1.toString());
    console.log(t2.toString());
}
main();

 

运行结果：

 

5、async 和 await 结合发送ajax请求

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>async 和 await 结合发送ajax请求</title>
	</head>
	<body>
		<script>
			// async 和 await 结合发送ajax请求
			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<=299){
								// 成功
								resolve(x.response);
							}else{
								// 失败
								reject(x.status);
							}
						}
					}
				});
			}
			// 测试
			// const result = sendAjax("https://api.apiopen.top/getJoke");
			// result.then(value=>{
			// 	console.log(value);
			// },reason=>{
			// 	console.warn(reason);
			// })
			// 使用async和await
			async function main(){
				let result = await sendAjax("https://api.apiopen.top/getJoke");
				console.log(result);
			}
			main();
		</script>
	</body>
</html>

 

运行结果：

 

6、对象方法扩展

Object.values、Object.entries和Object.getOwnPropertyDescriptors：

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

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

  3. Object.getOwnPropertyDescriptors()该方法：返回指定对象所有自身属性的描述对象；

 

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象方法扩展</title>
	</head>
	<body>
		<script>
			// 对象方法扩展
			let school = {
				name : "訾博",
				age : 24,
				sex : "男"
			}
			// 获取对象所有的键
			console.log(Object.keys(school));
			// 获取对象所有的值
			console.log(Object.values(school));
			// 获取对象的entries
			console.log(Object.entries(school));
			// 创建map
			const map = new Map(Object.entries(school));
			console.log(map);
			console.log(map.get("name"));
			// 返回指定对象所有自身属性的描述对象
			console.log(Object.getOwnPropertyDescriptors(school));
			// 参考内容：
			const obj = Object.create(null,{
				name : {
					// 设置值
					value : "訾博",
					// 属性特性
					writable : true,
					configuration : true,
					enumerable : true
				}
			});
		</script>
	</body>
</html>

 

运行结果：

 

 

 

 

 

 

 

訾博ZiBo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Phaser-ES6-NS-Shaft：移相器+ ES6 + Webpack-> NS-Shaft
02-04
NS轴从重建。
Redux-cnode：react + react-router + redux + es6 + antd-mobile + webpack版本的Cnode
02-05
项目介绍基于webpack + react + react-router + redux +更少+ ant + es6的cnode社区非常感谢cnode提供的api以及react china社区的各位大神，真的提供了很多的帮助，里面也有很多的例子，都值得去学习运行项目...
【 javascript】JS语法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性
weixin_55846296的博客
06-16 8369
本文集合了 ES6 至 ES11 常用到的特性，包括还在规划的 ES12，只列举大概使用，详细介绍的话内容量将十分巨大.。PS：使用新特性需要使用最新版的 bable 就行转义。
【JavaScript】ES7、ES8、ES9、ES10、ES11、ES12都增加了哪些新特性？
SunPeng的博客
06-28 2620
【JavaScript】ES7、ES8、ES9、ES10、ES11、ES12都增加了哪些新特性？
JavaScript ES8新特性
肥晨开发的学习之路
06-27 688
这些是JavaScript ES8的一些主要特性。ES8还引入了一些其他小的语法和API改进，可以提供更好的开发体验和效率。
JavaScript进阶（二十四）：ES8 中 async 与 await 使用方法详解
IT全栈 华强工作室
05-24 5180
在前期博文中，针对异步编程，提出了Promise解决方案。从语法上说，Promise是一个对象，从它可以获取异步操作的消息，解决回调函数嵌套过多的情况。ES2017标准引入了async函数，使得异步操作变得更加方便。async是“异步”的简写，比如Ajax中就有这个，代表异步请求；因为await只能出现在async函数中的语法规定，await可以认为是async wait的简写。所以应该很好理解async用于声明一个function是异步的，而await用于等待一个异步方法执行完成。
11 js高级 es8-es12
yunbabac的博客
12-27 366
比较重要知识的会单独写文字，这篇是常用api ES8 Object values:获取一个对象所有的value ES8 Object entries:获取到一个数组，数组中会存放可枚举属性的键值对数组 ES8 - String Padding:对其进行前后的填充，来实现某种格式化效果 ES8 - Trailing Commas:允许在函数定义和调用时多加一个逗号 ES8 - Object Descriptors:获取对象描述符，前面已讲 ES10 - flat flatMap:数组降维 ES1
es6-jspm-gulp-starter:使用jspm和Gulp开发ES6 +应用程序的入门模板
05-03
使用jspm和Gulp开发ES6 +应用程序的入门模板。 这非常适合单页应用程序（“ SPA”），但也可以进行修改以用于常规网站。 主要技术 使用自动转换ES6 + 使用软件包管理 使用和朋友进行开发和构建 入门功能 使用jspm...
es6-css-minify：轻松缩小VS Code中CSS和JavaScript
02-05
JS＆CSS缩小器 如果您发现此扩展有用，并希望支持进一步的开发，请考虑。 操作系统状态Linux和MacOS 视窗 一个简单的Javascript和CSS缩小器。 当打开.js或.css文件时，状态栏中将出现一个Minify按钮。 您也可以通过...
react-es6-sass-webpack-boilerplate:react + es6 + sass Webpack样板
05-15
从零开始搭建webpack+react开发环境
JavaScript-ES7~ES8新特性使用教程
weixin_45203607的博客
07-13 830
因为ES6的内容太多了, 如果想学ES6的新特性, 那么可以看 超级全, 吐血编写includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。 使用 includes() 判断字符串和字符时是区分大小写的 语法: 该方法与indexOf()的区别在于，indexOf()不会识别NaN和稀疏数组中的缺失元素。而includes()方法可以。 指数运算符-求幂运算符** 在ES7中引入了指数运算符，具有与Math.pow()等效的计算结果
ES新特性（ES8~ES11）
d15203845255的博客
05-05 380
ES6之后的新特性，对于开发代码简洁以及开发效率的提升有很大帮助。
深入学习JavaScript ES8函数式编程：特性与实践指南
热门推荐
努力是为了站在万人之中，成为别人的光
09-06 1万+
在深入研究ES8的新特性之前，让我们回顾一下函数式编程的核心概念。函数式编程是一种编程范式，它将计算视为数学函数的组合。在函数式编程中，函数被视为一等公民，它们可以作为参数传递给其他函数，也可以作为返回值返回。函数式编程强调不可变性（immutable data）、纯函数（pure functions）和无副作用（side-effect-free）的概念。JavaScript ES8引入的函数式编程特性使得函数式编程在现代前端开发中更具吸引力。
深入理解JavaScript ES8的新特性
最新发布
猫头虎：授渔优于赠鱼，兴趣引领智慧，探索之乐尤显珍贵。商务合作：Libin9iOak，共赴知识与乐趣的探索之旅！
10-19 273
作为猫头虎博主，我将带您深入研究JavaScript ES8的新特性，探索这些功能如何改进了JavaScript编程体验。本文将介绍ES8中引入的关键特性，包括异步/等待、对象和数组操作、Rest/Spread操作符等，为您提供全面的指南，以帮助您更好地利用现代JavaScript编程。JavaScript ES8的新特性为现代JavaScript编程带来了许多便利。从Async/Await异步编程到对象和数组操作，再到Rest/Spread操作符，这些功能使我们的代码更加干净、高效。
JavaScript——ES8新特性
Fulling的博客
03-21 696
ES8新特性一、async 和 await1. async 函数2. await 表达式3. 实例二、对象方法扩展 一、async 和 await async 和 await 两种语法结合可以让异步代码像同步代码一样。 1. async 函数 async 函数的返回结果是一个 promise 对象； promise 对象的结果由 async 函数执行的返回值决定。 async function fn() { // return; // 返回非 promise 对象就是成功 // thr
对象属性值的黑魔法：ES8的简化语法让你的代码更简洁
你若盛开，清风自来
06-30 182
当定义对象字面量时，如果属性名和变量名相同时，可以使用简化语法。例如{ x, y }等同于。ES8引入的对象属性值定义的简化语法（Object Property Value Shorthand）可以使对象字面量的定义更加简洁和方便。以下是对其详细解释：ES8的简化语法允许我们在定义对象字面量时省略属性名，使其直接采用变量名作为属性名，从而减少冗余的代码。x , y };这里的{ x, y }等同于，通过简化的语法，我们可以更清晰地表达属性与变量之间的关系。
JS语法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性
油墨香^-^的博客
12-09 358
const promise3 = new Promise((resolve, reject) => reject('我是失败的Promise_1'));const promise4 = new Promise((resolve, reject) => reject('我是失败的Promise_2'));const promise2 = new Promise((resolve, reject) => reject('我是失败的Promise_2'));
ES7/ES8新特性总结
qq_43641110的博客
12-19 417
es7，es8新特性总结
JavaScript语法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性汇总
油墨香^-^的博客
05-30 2565
本文汇总了 ES6 至 ES11 使用十分常用的特性，包括正在规划的 ES12，仅涵盖了全部的 ES 特性。详细介绍将使用到 ES6 至 ES11 最新版的可用特性。 新特性ES6（2015） 1、类（类） class Man { constructor(name) {this.name=有课前端网; } console() { console.log(this.name); }}constman=newMan(有课...
es6es7es8新特性
08-21
ES6、ES7、ES8 是 ECMAScript 的不同版本，每个版本都引入了一些新的特性和语法，让开发人员能够更方便地编写现代化的 JavaScript 代码。 一些 ES6 的新特性包括： 1. 块级作用域变量声明（let 和 const） 2. 箭头...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值