Es6迭代器与生成器

1.Proxy代理

 // 原定人

    var person={

        name:'喜羊羊',

        age:16,

       

    }

    // 代理人

    var per=new Proxy(person,{

        // obj参数表示所要拦截的目标对象

        // key定制拦截行为

        get(obj,key){

            return obj[key]//获取

        },

        set(obj,key,value){

            //修改值

            obj[key]=value

        },

        has(obj,key){

            if(obj[key]==undefined){

                return false

            }

            else{

                return true

            }

        }

    })

    per.test='灰太狼'

    console.log(per.name);

    console.log(per.test);

    // ownKeys方法 拦截过滤Object.keys()对对象的属性遍历

    var per=new Proxy(person,{

        ownKeys(obj){

            return['name']

        }

    })

    console.log(Object.keys(person));

    console.log(Object.keys(per));

    // has方法  拦截key in object的操作，结果会返回一个布尔值

    console.log('name' in per);

    // apply方法   对象类型的变量可以被代理，函数也可以被代理

    let fn=()=>{

        alert('我是投资人')

    }

    let fnlest=new Proxy(fn,{

        apply(){

            alert('我承办投资')

        }

    })

    // fn()

    // fnlest()

    // proxy.revocable方法  取消代理

    let leave=Proxy.revocable(fn,fnlest)

    fnlest()

2.遍历器

原理： 原理;当可遍历对象被for...of遍历的时候，[Symbol.iterator]()就会被调用，返回一个iterator对象。其中还有一个很重要的方法：next( )；

 let arr = [1, 2, 3, 4]

        //调用数组symbol.iterator方法

        let iter = arr[Symbol.iterator]()

        console.log(iter.next());

        console.log(iter.next());

        console.log(iter.next());

        console.log(iter.next());

        console.log(iter.next());

        // {value: 1, done: false}  value内容  done状态（true，false）

        // for of 对象 加自定义遍历器

        let obj = {

            name: "张三",

            age: 19,

            say(){

                console.log(111);

            }

        }

        // console.log([obj]);

        // 给对象添加迭代器

        obj[Symbol.iterator] = function () {

            let index = 0;

            let keys = Object.keys(this)

            return {

                next: () => {

                    let value = {

                        key: keys[index],

                        value: this[keys[index]]

                    }

                    let done = index === keys.length;

                    index++

                    return {

                        value,

                        done

                    }

                }

            }

        }

        for (let item of obj) {

            console.log(item);

        }

3.生成器

 function* Hello(name) {

            yield `hello ${name}`;

            yield `how are you`;

            yield `bye`;

        }

        var test = Hello('web')

        console.log(test);

        console.log(test.next()); //hello web

        // console.log(test.next());

        console.log(test.next(test.next()));//bye 下一个

        // 关键字‘yield*

        //声明Generator函数：gen1  

        function* gen1() {

            yield "gen1 start";

            yield "gen1 end";

        }

        //声明Generator函数：gen2

        function* gen2() {

            yield "gen2 start";

            yield "gen2 end";

        }

        //声明Generator函数：start

        function* start() {

            yield "start";

            yield* gen1();

            yield* gen2();

            yield "end";

        }

        //调用start函数

        var ite = start();

        //创建一个生成器

        console.log(ite.next());

        //{value: "start", done: false}

        console.log(ite.next());

        //{value: "gen1 start", done: false}

        console.log(ite.next());

        // //{value: "gen1 end", done: false}

        // ite.next();

        // //{value: "gen2 start", done: false}

        // ite.next();

        // //{value: "gen2 end", done: false}

        // ite.next();

        //{value: "end", done: false}

4.for   of

 可遍历的对象包括数组，字符串，set和map结构等具有iterator 接口的数据结构。

// for...in也可遍历数组

        var arr = [1, 2, 3]

        // var Arr=[]

        // for(var key in arr){

        //     Arr[key]=arr[key]

        // }

        // console.log(Arr);

        for (var key of arr) {

            if (key == 2) {

                continue;

            }

            console.log(key);

        }

        // keys()得到数组中数字类型索引

        for (let index of arr.keys()) {

            console.log(index);

        }

        // 遍历字符串

        let str = 'web前端'

        for (let strlist of str) {

            console.log(strlist);

        }

        // 遍历dom元素

        var li = document.querySelectorAll('li')

        for (let lilist of li) {

            console.log(lilist);

        }

    // for of不能遍历对象 如遍历需加遍历器

5.类的使用

   // 声明类 大写

    class Animal{

        // 构造函数存在名字

        style(color){

            this.color=color

        }

        say(){

            console.log('叫');

        }

    }

    // 实例化对象

    var mydog=new Animal('white')

    console.log(mydog.color);

    mydog.say()