es6进阶（2）

一、可迭代对象

书接上回

只要可以被for of遍历的对象都是可迭代对象，

例如

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

可用的键有：

keys() 键集合
values() 值集合
enteries() 键与值集合

二、异步与等待async和await

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

async function say(){
   return  "abc"
}
say()
.then(res=>{})

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

async function doit(){
   var m1 = await say("msg",1000)
   var m2 = await say("msg2",2000)
  return m1+m2;
}
doit()
.then(res=>console.log(res))

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

**

三、Symbol 符号

Symbol 是一种新的数据类型，它的值是唯一的，不可变的
可以是sym作为唯一的key或者标识符{sym:“abc”}

var sym = Symbol( "符号" );
console.log(typeof sym);

**

四、迭代器

迭代器允许每次访问数据集合的一个元素，当指针指向数据集合最后一个元素时，迭代器便会退出。它提供了 next() 函数来遍历一个序列，这个方法返回一个包含 done 和 value 属性的对象。
可迭代对象都拥有迭代器（可以被for of 遍历对象都是可迭代对象） String ，Array ，Set ，Map
获取迭代对象
var itr = arrSymbol.iterator
示例

var arr = [11,12,13];
var itr = arr[Symbol.iterator]();
 
itr.next(); // { value: 11, done: false }
itr.next(); // { value: 12, done: false }
itr.next(); // { value: 13, done: false }
itr.next(); // { value: undefined, done: true }

五、生成器

Generator 函数是 ES6 的新特性，它允许一个函数返回的可遍历对象生成多个值。

在使用中你会看到 * 语法和一个新的关键词 yield:

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

生成一个1-100的可迭代元素

var list = range(1,100);

转换为数组

list = [...list]

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

六、代理proxy

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

Proxy(target, handler), 这里的 handler 可以是 set get has hasOwn keys 等等方法

       // 代理就是对原有对象target二次加工
        var obj = {"name":"hsj",age:18};
        // 用o代理obj
        var o = new Proxy(obj,{
            // 获取o的属性值执行get方法
            get:function(target,prop){
                // 如果属性名在源对象里
                if(prop in target){
                    // 返回源对象属性
                    return target[prop]
                }else{
                    // 否则返回what is up
                    return "what`s up"
                }
            },set:function(target,prop,value){
            if(prop==="age"){
                if(value>200||value<0){
                    throw RangeError("这不是人")
                }
                else{
                    target[prop]=value;
                }
                
            }
            else{
                target[prop]=value;
            }
        }
        }
        
        )

o.name 会执行get方法
o.name=“abc” 会执行set方法
我们可以在get和set方法里面做一些判断劫持等其他操作