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

最好的人啊

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

阅读量1k

点赞数 5

CC 4.0 BY-SA版权

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

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

本文链接：https://blog.youkuaiyun.com/qq_52499703/article/details/125859172

特殊二：执行特殊需要调用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 }
                        }
                    }
                }
            }
        }

        fo