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

目录

一,迭代器(iterator)

定义:是一种遍历机制,有两个核心

​编辑原理:

遍历对象 小案例

 二,生成器

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

特殊一:需要补一个 * 号

特殊二:执行特殊 需要调用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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值