新增ES6你不知道的几件事(3)

目录

一、Promise

二、异步与等待

三、Symbol

四、迭代器

五、生成器

六、代理  Proxy

---

一、Promise

• 定义：执行异步任务,避免回调地狱
• 创建：

<script>
// Promise 主要做异步任务（需要时间等待）任务
// 小何对她承诺，明天我们我请你去吃海底捞
// 小何不能立即对象需要5000毫秒执行
		 var p = new Promise((resolve,reject)=>{
			 setTimeout(()=>{
				 var n = Math.random();
				 if(n>.5){
					 // 可以兑现
					 resolve("明我请你去吃海底捞")
				 }else{
					 // 拒绝
					 reject("不是说了吗？明天!")
				 }
			 },5000)
		 })

</script>

• 实例：

<script>        
		p.then(res=>{
			console.log(res);
		})
		.catch(function(err){
			console.log(err)
		})	
	
     // .then 等待 凭据 p里面的 resolve执行
     // .catch 等待 凭据p 里面的 reject执行
</script>

• 其他：

<script>
//等待异步列表中全部resolve执行
Promise.all([,,,])
.then()
</script>

<script>
//异步列表中最resolve的值
Promise.race([,,,])
.then()
</script>

• 封装Promise

  <script>
  function say(msg,time){
  		 return new Promise((resolve,reject)=>{
  		 ...
  		 resolve(msg)
  		 })
  		 }
  		 say("msg",500)
  		 .then(res=>{
  		 console.log(res)
  		 return say("say",123)
  		 })
  		 .then(res=>console.log(res))
  </script>

  二、异步与等待

• async:

<script>
 // 用asyc装饰函数 返回的是promise对象
		async function say(){
			return "你好ES6"
		}
		say()
		.then(res=>console.log(res)) 
</script>

• await:

<script>
	 // awiat 只能在aync函数里面
	 function say(msg,time){
		 return new Promise((resolve,reject)=>{
			 setTimeout(()=>resolve(msg),time)
		 })
	 }
	 
	 // 2秒后说你好
	 // 3秒后说我很中意你
	 // 定义async函数
	 async function doit(){
		 // await会等待say函数执行完才会向下执行
		 var s1 = await say("你好",2000);
		 console.log(s1);
		 var s2 = await say("我很中意你",10000);
		 console.log(s2);
		 return s1+s2;
	 }
	 doit()
	 .then(res=>console.log(res))	 
		
		</script>

三、Symbol

• 符号：

      不重复

       不可修改

• var sym = Symbol("标识")
• 可以使sym作为唯一的key或者标识符

        eg：{sym:"abc"}  

四、迭代器

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

        String

        Array 

        Set

        Map

• 获取迭代对象

  <script>
          var arr = [2,6,8];
  		// 获取数组的迭代器
  		var iter = arr[Symbol.iterator]();
  </script>

• 通过next方法进行迭代

  <script>
       	iter.next(); //{value: 6, done: false}
  		...
  		iter.next();//{value: undefined, done: true}
  </script>

  五、生成器

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

eg:

<script>
		// 生成一个生成器，range 参数start= 1，end=100；
		// 创建一个可以迭代start 到end数
		function *range(start,end,step){
			while(start<end){
				yield start;
				start+=step;
			}
		}

        //生成一个1-100的可迭代元素
		var list = range(2,101,2);
		//转换为数组
		var arr = [...list];
		console.log(arr);

		// range 产生由start到end的一个可以迭代对象
		for(var v of list){
			console.log(v);
		}	 
		
		</script>

• 当函数执行到yield关键字会等待；

六、代理  Proxy

• 对原对象操作的劫持

eg:

     <script>
			// 定义对象obj
			var obj = {
				msg: "我喜欢Vue"
			};

			// 使用代理劫持obj
			var o = new Proxy(obj, {
				get(target, prop) {
					return target[prop]
				},				
				set(target, prop, value) {				
					target[prop] = value;
				}
			})
     </script>

• p.msg 会执行get方法
• p.msg="abc"会执行set方法      
• 我们可以在get和set方法里面做一些判断劫持等其他操作
• console.log(p.msg)，获取p的msg值，执行p代理里面的get方法，return obj["msg"]
• p.msg="abc"；设置p的msg值，执行p代理的set方法，obj["msg"]="abc";