ES6——再不学就晚了

本文主要是介绍ES6——再不学就晚了，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

前言
一、异步与等待
- 1、关键字async
- 2、await
二、Symbol
三、迭代器
四、生成器
五、代理prxoy
- - 数据的双向绑定
思维导图
总结

前言

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

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来代理objvar 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");// 定义对象objvar obj = {msg: "我喜欢Vue"};// 使用代理劫持objvar 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}