ES6——再不学就晚了

---

前言

昨天发布文章后，已是深夜，加上一些工作，脑袋里已经是一团浆糊，今天回顾文章，发现少了一些内容，现在就补充上。抱歉！！

ES6基础链接: http://t.csdn.cn/5fafx.
ES6进阶链接 :http://t.csdn.cn/76sGP.

---

一、异步与等待

1、关键字async

语法

async function name([param[, param[, … param]]]) { statements }

• name: 函数名称。
• param: 要传递给函数的参数的名称。
• statements: 函数体语句。

返回值

async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。

代码如下：

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

async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。

2、await

语法

[return_value] = await expression;

• expression: 一个 Promise 对象或者任何要等待的值。

返回值

返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身。
如果一个 Promise 被传递给一个 await 操作符，await 将等待 Promise 正常处理完成并返回其处理结果。

注意

await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ，你只会得到一个语法错误。

代码如下：

// 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("我很中意你",5000);
		 console.log(s2);
		 return s1+s2;
	 }
	 doit()
	 .then(res=>console.log(res))

二、Symbol

概述
ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。

ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ，还新增了 Symbol 。
用法

由于每一个 Symbol 的值都是不相等的，所以 Symbol 作为对象的属性名，可以保证属性不重名。

代码如下：

 // 唯一的,不可变的
	 var sym = Symbol("内容");
	 console.log(sym,typeof sym);
	 var obj= {sym:"abc"};

三、迭代器

作用

可迭代对象都拥有迭代器（可以被for of 遍历对象都是可迭代对象） String Array Set Map

代码如下：

//获取迭代对象
var itr = arr[Symbol.iterator]()
//通过next方法进行迭代
itr.next()

{value:"xxx",done:false}
.....
{value:undefined,done:true}

var arr = [2,6,8];
// 获取数组的迭代器
var iter = arr[Symbol.iterator]();
// iter.next(); //{value: 6, done: false}
// ...
// iter.next();//{value: undefined, done: true}
	 

四、生成器

概述
跟普通函数不同的是，生成器是一个返回迭代器的函数，只能用于迭代操作，更简单点理解生成器就是一个迭代器。

代码如下：

function *gen(){
			// 当生成器函数语言的yield 函数就会暂停，返回值
			yield "小赵";
			yield "小今";
			yield "小麦";
		}
		// 执行完毕生成的是迭代器
		var list = gen();
		// list.next();
		// 可以通过next方法获取yield返回的值和状态
		
		// 遍历迭代器
		for(let v of list){
			console.log(v)

案例
代码如下：

// 写一个生成器，range 参数start= 1，end=100；
		// 创建一个出一可以迭代start 到end数
		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];
		console.log(arr)
		// range 产生由start到end的一个可以迭代对象
		for(var v of list){
			console.log(v);
		}
	 

五、代理prxoy

代码如下：

// 代理就是对原有对象target 二次加工
			var obj = {"name":"mumu",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;
					}
				}
				
			})	 
			// 通过o代理obj 实现对 obj对象的劫持

数据的双向绑定

HTML代码如下：

<input type="text" id="inp">
<p id="myp"></p>

JS代码如下：

	// 获取两个节点
			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]
				},
				// 设置值 o.msg = "abc" 会触发set
				// target obj对象 ；prop msg  ；value "abc";
				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表单添加input事件修改o.msg的值
			inp.oninput = function(){o.msg = inp.value}

思维导图

---

总结

以上就是 ES6 最常用的一些语法。如果有错误望指正，以后将持续更新。

• 创作不易，深夜肝文，如果对大家有帮助，还请大家支持一波~
• 点赞，关注，收藏走一波，感激不尽！
• 好人一生平安，一胎生八个