js中迭代器和生成器

目录

迭代器 Iterator 一种接口

生成器 Generator

生成器函数的应用

---

迭代器 Iterator 一种接口

        任何数据，只要部署iterator接口就能完成遍历操作，ES6创造一种新的遍历命令for...of循环，iterator用for...of

        其中 Array Arguments Set Map String TypeArray Nodelist 原生具备iterator接口数据

工作原理：

        1.创建一个指针对象，指向当前数据结构的起始位置

        2.每一次调用对象的next方法，指针自动指向数据结构的第一个成员

        3.每次调用next方法，返回一个包含value和done属性的对象

生成器 Generator

ES6提供的一种异步编程解决方案

        生成器就是一个特殊的函数

       

 function* gen() {
            console.log(11);
            yield "第一刀"
            console.log(22);
            yield "第二刀"
            console.log(33);
            yield "第三刀"
            console.log(44);
        }
        var iterator = gen();//调用生成器 会生成迭代器对象
        // 直接点用生成器函数  代码不直接执行
        // console.log(iterator);
        // console.log(iterator.next());//返回值是一个对象 包含value 就是yield 语句值   done属性
        // console.log(iterator.next());
        // console.log(iterator.next());
        // console.log(iterator.next());
        iterator.next()
        iterator.next()
        iterator.next()
        iterator.next()

        // for (var v of iterator) {
        //     console.log(v);
        // }

yield语句 算是代码的分隔符 把函数代码分块

next方法可以传递实参 实参就是上一个yield语句返回的结果

生成器函数的应用

        解决回调地狱

        

//1s之后控制输出111  2s之后控制台输出222 再过3s之后控制台输出333
        //回调地狱
        // setTimeout(() => {
        //     console.log(111);
        //     setTimeout(() => {
        //         console.log(222);
        //         setTimeout(() => {
        //             console.log(333);
        //         }, 3000)
        //     }, 2000)
        // }, 1000)


        //生成器函数
        function one() {
            setTimeout(function () {
                console.log(111);
                iterator.next();
            }, 1000)
        }
        function two() {
            setTimeout(function () {
                console.log(222);
                iterator.next();
            }, 2000)
        }
        function three() {
            setTimeout(function () {
                console.log(333);
            }, 3000)
        }

        function* gen() {
            yield one();
            yield two();
            yield three();
        }
        var iterator = gen();
        iterator.next();