前端打怪之旅=>Es6入门(迭代器、生成器)

迭代器

迭代器(Iterator)是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口！就可以完成遍历操作。

1. ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for.of消费
2. 原生具备iterator接口的数据（可用for of遍历）

1. Array
2. Arguments
3. Set
4. Map
5. String
6. TypedArray
7. NodeList

3. 工作原理

1. 创建一个指针对象，指向当前数据结构的起始位置
2. 第一次调用对象的next方法，指针自动指向数据结构的第一个成员
3. 接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
4. 每调用next方法返回一个包含value和done属性的对象

使用for

        //声明一个数组
        const xiyou=['玄奘','悟空','悟能','悟净']
        //使用for...of遍历
        for(let v of xiyou){
            console.log(v);
        }

    //声明一个数组
    const xiyou=['玄奘','悟空','悟能','悟净']
    //使用for...of遍历
    for(let v in xiyou){
        console.log(v);
    }

of循环是得到变量的值，in循环是得到索引

使用迭代器

        const xiyou=['玄奘','悟空','悟能','悟净']
        let iterator = xiyou[Symbol.iterator]()
        console.log(iterator.next())
        console.log(iterator.next())
        console.log(iterator.next())
        console.log(iterator.next())

自定义遍历数据

            const cl = {
            name: '高一八班',
            stu: ['小明', '小红', '小亮', '小强'],
                [Symbol.iterator]() {
                    //索引变量
                    let index = 0;
                    //
                    let _this = this;
                    return {
                        next: function() {
                            if (index < _this.stu.length) {

                                const result = {
                                    value: _this.stu[index],
                                    done: false
                                };
                                //下表自增
                                index++;
                                return result;
                            }else{
                                return {value:undefined,done:true}
                            }

                        }
                    };
                }
        }

        //遍历对象 for of
        for (let v of cl) {
            console.log(v)
        }

如果单纯的使用for遍历对象里的元素会报错

        //遍历对象 for of
        for (let v of cl) {
            console.log(v)
        }

    // 迭代器.html:21 
    //Uncaught SyntaxError: Unexpected token 'class' (at 迭代器.html:21:10)
</script>

也就是说，如果我们想自定义遍历某些元素，就要满足他的工作原理，根据他的工作原理来写代码

生成器

定义使用

生成器数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同

            //yield 函数代码的分隔符
            function * gen(){
                // console.log("hello generator")
                console.log(111)
                yield '两只老虎';
                console.log(222)
                yield '爱跳舞';
                console.log(333)
                                
            }
            
            let iterator = gen();
            iterator.next();
            iterator.next();
            iterator.next();
            iterator.next();

通过next方法来控制代码的执行

          function * gen(){
                // console.log("hello generator")
                console.log(111)
                yield '两只老虎';
                console.log(222)
                yield '爱跳舞';
                console.log(333)
            }           
            
            for (let v of gen()){
                console.log(v)
            }

函数参数

生成器可以传参数

可以构造器传参也可以next方法传参

        function * gen(arg){
                console.log(arg)
                let one =  yield 111;
                console.log(one)
                yield 222;
                yield 333;
            }
            let iterator = gen('aaa');
            console.log(iterator.next())
            //next 方法可以传入实参
            console.log(iterator.next('BBB'))