ES6-进阶2

目录

异步与等待 async和await

Symob符号

迭代器（Iterators）

 Generator生成器

Proxy 代理

总结

---

异步与等待 async和await

async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回ait 关键字仅在 解析值。awasync function 中有效。如果在 async function 函数体外使用 await ，你只会得到一个语法错误

<script>
        function say(msg,time){
            return new Promise((resolve,reject)=>{ 
                setTimeout(()=>resolve(msg),time);
            })
        }
        // 定义async函数
        async function doit(){
            // await 会等待say函数执行完才会向下执行 只能在async中使用
            var s1 = await say("你好",2000);
            console.log(s1);
            var s2 = await say("我中意你啊",3000);
            console.log(s2);
            return s1+s2;
        }
           //await 执行完后会立即执行
        doit()
        .then(res=>console.log(res));
    </script>

Symob符号

Symbol 是一种新的数据类型，它的值是唯一的，不可变的

var sym = Symbol("内容");
    console.log(sym,typeof sym);//'symbol'

这里 Symbol 前面不能使用 new 操作符。如果它被用作一个对象的属性，那么这个属性会是不可枚举的

迭代器（Iterators）

迭代器允许每次访问数据集合的一个元素，当指针指向数据集合最后一个元素时，迭代器便会退出。它提供了 next() 函数来遍历一个序列，这个方法返回一个包含 done 和 value 属性的对象。当done的值为true时集合就遍历完了，并且value的值为undefined。

获取迭代对象
var iter = arr[Symbol.iterator]()

 var arr = [2,6,8];
//获取迭代对象
 var iter = arr[Symbol.iterator]();

在控制台输出 

 iter.next()
{value: 2, done: false}
iter.next()
{value: 6, done: false}
iter.next()
{value: 8, done: false}
iter.next()
{value: undefined, done: true}

 Generator生成器

Generator 函数是 ES6 的新特性，它允许一个函数返回的可遍历对象生成多个值。在使用中你会看到 * 语法和一个新的关键词 yield: 每次执行 yield 时，返回的值变为迭代器的下一个值。

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=50创建一个可以迭代start 到end数

function *range(start,end){
            while(start<end){
                yield start;
                start++;
            }
        }
        var list = range(1,50);
        // renge 产生由start到end的一个可以迭代对象
        for(let v of list){
            console.log(v)
        }

Proxy 代理

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

<script>
        // 代理就是原有对象target 二次加工
        var obj = {"name":"整日发愁",age:20};
        // 用fobj来代理obj
        var fobj = new Proxy(obj,{
            // 当获取fobj对象的属性值执行get方法
            get:function(target,prop){
                // 如果属性名在原对象里面执行
                if(prop in target){
                    return target[prop]
                }
                // 否则返回
                else{
                    return "没有";
                }
            },
            set:function(target,prop,value){
                  target[prop]=value;
           }
        })
        // 通过fobj代理obj 实现对 obj对象的劫持
    </script>

控制台输出：（obj是原对象）

obj 
{name: '整日发愁', age: 18}
fobj
Proxy {name: '整日发愁', age: 18}
fobj.name
'整日发愁'
fobj.age
20
fobj.agess
'没有'

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

总结

async 函数：返回一个 Promise 对象，可以使用 then 方法添加回调函数。await 只能在async函数里面使用当函数遇到await等待await结果，再往下执行，
Symbol：是符号，不可修改，不能重复，
迭代器：可迭代对象都拥有迭代器(可以被for of遍历的对象都是可迭代对象)  String Array Set Map通过next方法进行迭代
生成器：普通函数前面添加*通过yield 关键来控制生成最终函数执行返回一个可迭代元素
代理：对原对象操作的劫持，我们可以在get和set方法里面做一些判断劫持等其他操作