ES6 —— 迭代器，生成器的基本使用

最好的人啊

已于 2022-07-19 08:36:02 修改

阅读量712

点赞数 5

分类专栏： ES6基础文章标签： es6 前端 ecmascript vscode javascript

于 2022-07-18 20:46:01 首次发布

本文链接：https://blog.csdn.net/qq_52499703/article/details/125859172

版权

ES6基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

特殊二：执行特殊需要调用iterator.next方法才会执行

特殊三：在生成器函数可以生成yield语句

生成器传参

定义：next('BBB')传入的参数作为上一个next方法的返回值。

生成器函数小案例

案例一：模拟获取用户数据订单数据商品数据

案例三：点击按钮，加载数据....，数据加载完成后影藏（加载数据文字）

一，迭代器（iterator）

定义：是一种遍历机制，有两个核心

1.迭代器是一个接口，能够快捷的访问数据，通过Symbol.iterator来创建迭代器，通过迭代器的next方法获取迭代之后的结果

返回的结果是迭代器对象

2.可以把迭代器当做是用于遍历数据结构的指针

        const arr = ['a','b','c'];
        let myIte = arr[Symbol.iterator]();//arr本身就具备迭代器接口 ，拿到这个iterator接口 
                                  //next() 方法 done如果为false表示遍历继续 如果为true表示遍历完成
        console.log(myIte.next());//当第一次调用时指针指向值的是 {value: 'a', done: false}
        console.log(myIte.next());//当第二次调用时指针指向值的是{value: 'b', done: false}
        console.log(myIte.next());//当第三次调用时指针指向值的是{value: 'c', done: false}
        console.log(myIte.next());//当第四次调用时数组中 没有{value: undefined, done: false}

效果图：

原理：

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

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

3.接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员

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

遍历对象小案例

        const Person = {
            classroom: 'web2209',
            subject: ['科学', 'PE', 'Chinese', 'English'],
            //添加一个[Symbol.iterator]()方法
            [Symbol.iterator]() {
                //索引变量
                let i = 0;
                return {
                    next: () => {
                        if (i < this.subject.length) {
                            const result = { value: this.subject[i], done: false }
                            //索引自增
                            i++;
                            //返回结果
                            return result;
                        } else {
                            return { value: undefined, done: true }
                        }
                    }
                }
            }
        }

        for(let v of Person){
            console.log(v);
        }

效果图

二，生成器

含义：生成器其实就是一个特殊的函数

异步编程纯回调函数

特殊一：需要补一个 * 号

        function * item() {  
                            
                      }

特殊二：执行特殊需要调用iterator.next方法才会执行

        function* item() {
            console.log('hello,everybody!');
        }

        let iterator = item();
        iterator.next()

特殊三：在生成器函数可以生成yield语句

可以将 yield 看做是函数代码的分隔符

        function* item() {
            // console.log(111);
            yield '魏大勋';
            // console.log(222);
            yield '胡歌';
            // console.log(999);
            yield '彭于晏';
            // console.log(888);
        }
        迭代器的返回结果
       let iterator = item();
       console.log( iterator.next());
       console.log( iterator.next());
       console.log( iterator.next());
       console.log( iterator.next());

效果图：

生成器传参

定义：next('BBB')传入的参数作为上一个next方法的返回值。

        function* cook(person) {
            console.log(person);
            let a1 = yield '盛米';
            console.log(a1);
            let a2 = yield '淘米';
            console.log(a2);
            let a3 = yield '煮米';
            console.log(a3);
        }

        let cook_step = cook('张三');
        cook_step.next();//张三
        cook_step.next('a1');//a1
        cook_step.next('a2');//a2
        cook_step.next('a3');//a3

效果图

生成器函数小案例

案例一：模拟获取用户数据订单数据商品数据

 function getuser() {
            setTimeout(() => {
                let data = '用户数据'
                //调用 next方法 ，并且将数据传入
                iterator.next(data);
            }, 1000);
        }
        function getorders() {
            setTimeout(() => {
                let data = '订单数据'
                //调用 next方法 ，并且将数据传入
                iterator.next(data);
            }, 2000);
        }
        function getgoods() {
            setTimeout(() => {
                let data = '商品数据'
                //调用 next方法 ，并且将数据传入
                iterator.next(data);
            }, 3000);
        }
        // 声明一个生成器函数
        function* item() {

            console.log(yield getuser());

            console.log(yield getorders());

            console.log(yield getgoods());
        }
        //调用生成器函数        
        let iterator = item();
        iterator.next();

案例三：点击按钮，加载数据....，数据加载完成后影藏（加载数据文字）

   let btn = document.getElementById('btn');
        let date = document.getElementById('date')
        function item() {
            btn.addEventListener('click', () => {
                setTimeout(() => {
                    let data = '正在加载数据...'
                    iterator.next(data);
                }, 1000);
            })
        }

        function information() {
            setTimeout(() => {
                let person = "姓名: 张三, 年龄: 19, 班级: web2209"

                iterator.next(person);
            }, 2000);
        }

        function yincang() {
            setTimeout(() => {
                let str = '';
                iterator.next(str);

            })
        }

        function* items() {
            date.innerHTML = yield item();
            date.innerHTML = yield information();
            yield yincang();

        }

        let iterator = items();
        iterator.next()

效果图：