迭代器和生成器

迭代器 iterator

1. 什么是迭代？ 从一个数据集合中按照一定的顺序，不断取出数据的过程

2. 迭代和遍历的区别？ 迭代强调依次取出，不能确定取出的数据有多少，也不能保证数据取完 遍历保证知道了数据的长度，，循环不断地全部取出，针对于数据量过大的时候使用遍历会花费很多事件

3. 迭代器 对迭代过程的封装，通常表现为对象的数据形式（也有数组的形式），不同的语言中，表现出来的形式是不一样

4. 迭代器满足的条件 1.有得到下一个数据的能力 2.判断是否有后续数据的能力

 js中的迭代器：

 js规定，如果一个对象有next方法，并且返回一个对象，就认为该对象为迭代器

 cosnt obj = {
        next(){
            return {
                value : xxx,// 写一个数据
                done : xxx//判断是否有后续数据的能力 一般为boolean
            }
        }
    }

ES6之后数组对象Array就已经有迭代器的方法，可以直接使用 在ES6后，如果对象原型上具有知名符号属性Symbol.iterator方法，则表示该对象可迭代

注意：扩展运算符（...）的展开功能只能在可迭代对象上使用

案例：

 <script>
        // 声明一个数组
        const city = ['武汉', '杭州', '北京', '上海'];
        // 使用 for...of 遍历数组
        for (let cs of city) {
            console.log(cs);
        }
        let iterator = city[Symbol.iterator]();
        // 调用对象的next方法
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        // 重新初始化对象，指针也会重新回到最前面
        let iterator1 = city[Symbol.iterator]();
        console.log(iterator1.next());
    </script>

运行结果 ：

 

生成器 generator

1. 什么是生成器？ 生成器就是通过构造函数Genterator创建出来的对象，生成器就是一个迭代器，同时又是一个可迭代对象
2. 如何创建？ new Generator() 错误的 只需要把函数当成Generator函数 加修饰符*
3. 生成气的内部执行
4. 生成器的作用：控制函数内部代码的执行

 

生成器注意的点

1. 生成器有返回值，出现在最后一次done为true的value值
2. 调用生成的next方法是，可以传递参数，传递的参数会交给yield表达式上的返回值
3. 第一调用next函数的时候，传递的参数是没有任何含义的

案例 :

    <script>
        // 需求：1s后控制台输出111 再过2s后控制台输出222 再过3s后控制台输出333
        // 一种做法：回调地狱
        setTimeout(() => {
            console.log(111);
            setTimeout(() => {
                console.log(222);
                setTimeout(() => {
                    console.log(333);
                }, 3000)
            }, 2000)
        }, 1000)
    </script>

 运行结果:

 <script>
        // 需求：1s后控制台输出111 再过2s后控制台输出222 再过3s后控制台输出333
        // 另一种做法
        function one() {
            setTimeout(() => {
                console.log(111);
                iterator.next();
            }, 1000)
        }

        function two() {
            setTimeout(() => {
                console.log(222);
                iterator.next();
            }, 1000)
        }

        function three() {
            setTimeout(() => {
                console.log(333);
                iterator.next();
            }, 1000)
        }

        function* gen() {
                yield one();
                yield two();
                yield three();
            }
            // 调用生成器函数
        let iterator = gen();
        iterator.next();
    </script>

二种方法都可以实现但是第一种会产生回调地狱