ES6详细总结（3）

月凉笙

已于 2022-02-24 09:59:05 修改

阅读量566

点赞数 2

文章标签： javascript p2p 前端

于 2022-02-23 20:29:21 首次发布

本文链接：https://blog.csdn.net/qq_44769099/article/details/123097320

版权

异步与等待

async 异步

async装饰的函数返回的是一个promise对象

async实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			async function say(){
				return "abc"
			}
			var f = say()
			console.log(f);
		</script>
	</body>
</html>

执行结果

await 等待

await只能在async函数里面使用，当函数遇到await时会等待await结果，再继续向下执行

await实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function say(msg,time){
				return new Promise((resolve,reject)=>{
					setTimeout(()=>resolve(msg),time)
				})
			}

			// 定义async函数
			async function doit(){
				// await 会等待say函数执行完才会向下执行

				var s1 = await say("你好",2000)	
			    // 两秒后说你好
				console.log(s1)

				var s2 = await say("我很中意你",3000)
			    // 三秒后说我很中意你
				console.log(s2)

				return s1+s2
                //跟随s2一起执行
			}
			doit()
			.then(res=>console.log(res))
		</script>
	</body>
</html>

Symbol

定义：

表示独一无二的值，一般用于定义对象的唯一属性名，不可修改，不可重复

使用方法:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			let sym = Symbol("内容");
			console.log(sym,typeof sym);
			var obj={sym:"abc"};
		</script>
	</body>
</html>

打印结果

迭代器

定义

可迭代对象都是拥有迭代器(可以被for of 遍历的对象都有迭代器)

Array数组，String字符串，Set集合，Map图

使用方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var arr=[2,6,8];
			// 获取数组的迭代器
			var iter = arr[Symbol.iterator]();
			// iter.next() 执行结果
			// iter.next();//{value:2,done:false}
			// iter.next();//{value:6,done:false}
			// iter.next();//{value:8,done:false}
			// iter.next();//{value:undefined,done:true}
		</script>
	</body>
</html>

生成器

定义

普通函数前面添加 * 通过yield关键来控制生成最终函数执行返回一个可迭代元素

内容包含start,不包含end

使用方法

function *range(start,end,step=1){
   while(start<step){
   yield start;
  start+=step;
   }
}

实例

编写打印从2到101,步为2的生成器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function *range(start,end,step){
				while(start<end){
					yield start;
					start+=step;
				}
			}
			var list = range(2,101,2);
			// var arr = Array.from(list);
			// var arr = [...list];
			// range 产生有start到end的一个可迭代对象
			for(var v of list){
				console.log(v);
			}
			
		</script>
	</body>
</html>

代理Proxy

定义

代理就是对原有对象target进行二次加工

实例

修改obj的age属性的值，限定在0~200之间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 代理就是对原有对象target二次加工。、
			var obj = {"name":"月凉笙",age:18};
			//用o来代理obj
			var o = new Proxy(obj,{
				// 当获取o对象的属性值进行get方法
				get:function(target,prop){
					//如果属性名在原对象里
					if(prop in target){
						// 返回原对象属性
						return target[prop]
					}else{
						// 返回 无名
						return "无名"
					}
				},
				set:function(target,prop,value){
					if(prop==="age"){
						if(value>200||value<0){
							// 发送一个范围错误
							throw RangeError('这个年龄恐怕不是人类')
						}else{
							target[prop]=value;
						}
					}else{
						target[prop]=value;
					}
				}
				
			})
		</script>
	</body>
</html>

页面中有一个输入框与一个p标签，修改文本框内容，p的内容跟随改变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="inp"/>
		<p id="myp"></p>
		
		<script>
			// 获取两个节点
			var inp = document.getElementById("inp");
			var myp = document.getElementById("myp");
			
			// 定义obj
			var obj = {
					msg:"我喜欢VUE"
				};
			// 使用代理劫持obj
			var o = new Proxy(obj,{
				// get劫持
				get(target,prop){
					return target[prop]
				},
				// set劫持
					// 原对象  属性  值
				set(target,prop,value){
					// 只要被设置,value 就会输出
					// console.log(value);
					if(prop==="msg"){
						myp.innerText=value;
						inp.value=value;
					}
					target[prop]=value;
				}
				
			})
			// 设置节点的值和文本
			inp.value = o.msg;
			myp.innerText=o.msg;
			
			// 目标，input发生变化，p也跟随变化
			inp.oninput=function(){
				o.msg=inp.value
			}
		</script>
	</body>
</html>

月凉笙

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6详细总结（3）

目录异步与等待async 异步async实例执行结果 await 等待 await实例Symbol 定义：使用方法:打印结果迭代器定义使用方法生成器定义使用方法实例代理Proxy定义实例异步与等待async ...
复制链接

扫一扫