您现在的位置是:首页 > 正文

JS高级 迭代器-生成器:Iterator-Generator

2024-02-01 00:42:39阅读 2

 Iterator

 写一个针对数组的初级迭代器

    const name = [123, 222, 555]

    function creatArrayIterator(arr) {
      let index = 0
      const iterator = {
        next: function () {
          if (index < arr.length) {
            return { done: false, value: arr[index++] }
          }
          else {
            return { done: true }
          }

        }
      }
      return iterator
    }

    const arrIterator = creatArrayIterator(name)
    console.log(arrIterator.next());//123
    console.log(arrIterator.next());//222
    console.log(arrIterator.next());//555

在函数里面定义了一个iterator对象,里面有next方法,返回值是一个包含done与value的对象,这就是一个迭代器

可迭代对象

我们获取一个数组的时候,需要自己创建一个index变量再创建一个所谓的迭代器对象;这看起来好像没什么用

事实上我们可以对上面的代码进行进一步的封装,让其变成一个可迭代对象

比如下面这个name对象是不能迭代的

    const name  = {
      friends:[123,222,333],

    }

但是如果在里面加入迭代器,他就是可迭代对象

可迭代对象有两个要求

1、必须实现[Symbol.iterator]方法,只是JS的规定写法

2、该方法必须返回一个迭代器

    const name = {
      friends: [123, 222, 333],
      [Symbol.iterator]: function () {
        let index = 0
        const iterator = {
          next: function () {
            if (index < name.friends.length) {
              return { done: false, value: name.friends[index++] }
            }
            else {
              return { done: true }
            }
          }
        }
        return iterator
      }
    }

    const arrIterator = name[Symbol.iterator]()
    console.log(arrIterator.next());//123
    console.log(arrIterator.next());//222
    console.log(arrIterator.next());//555

其实很多基本可迭代对象,例如数组,内部都有[Symbol.iterator]方法,是已经封装好的

    const arr = [123,22,222]
    console.log(arr[Symbol.iterator]);
    console.log(arr[Symbol.iterator]());

如果想迭代的是对象中的键值对,可以改为:

    const name = {
      friends: 2,
      age:4,
      name:[122,222,333,444],
      [Symbol.iterator]: function () {
        let keys = Object.keys(name)
        let index = 0
        const iterator = {
          next: ()=> {
            if (index < keys.length) {
              return { done: false, value: keys[index++] }
            }
            else {
              return { done: true }
            }
          }
        }
        return iterator
      }
    }
    for(let item of name){
      console.log(item);
    }

其是对于对象来说,基本上不会去迭代其键值对,因为Object.keys等方法就已经提供了可迭代对象,所以一般是对对象中的某一个属性进行迭代,例如上面的name

迭代器使用场景

 那这个东西有什么用啊?

可迭代对象可以使用很多方法,例如for of方法

    for(let item of name){
      console.log(item);//123 222 33
    }

 迭代器中断

当我迭代name到222时,中断迭代

    const name = {
      friends: 2,
      age:4,
      name:[122,222,333,444],
      [Symbol.iterator]: function () {
        let index = 0
        const iterator = {
          next: ()=> {
            if (index < this.name.length) {
              return { done: false, value:this.name[index++] }
            }
            else {
              return { done: true }
            }

          }
        }
        return iterator
      }
    }

    for(let item of name){
      console.log(item);//122  222
      if(item == 222){
        break;
      }
    }

 现在我想要迭代器监听这个中断,可以使用return方法

    const name = {
      friends: 2,
      age:4,
      name:[122,222,333,444],
      [Symbol.iterator]: function () {
        let index = 0
        const iterator = {
          next: ()=> {
            if (index < this.name.length) {
              return { done: false, value:this.name[index++] }
            }
            else {
              return { done: true }
            }
          },
          return:()=>{
            console.log('中断');
            return { done: true }
          }
        }
        return iterator
      }
    }

 Generator

 给一个最基本的例子

    function* foo(){
      console.log(111);
      console.log(222);
      yield
      console.log(333);
      yield
      console.log(444);
    }

    const generator = foo()
    generator.next()//111 222
    generator.next()//333
    generator.next()//444

创建生成器函数foo,直接调用它是不会有任何输出 的

foo的返回值其实是一个迭代器,在foo函数中添加yield,调用迭代器的next()函数,可以依次执行yield前的代码

next函数可以输出值


    function* foo(){
      console.log(111);
      console.log(222);
      yield 'aaaa'
      console.log(333);
      yield 'bbbb'
      console.log(444);
      yield 'cccc'
    }

    const generator = foo()
    console.log(generator.next())
    console.log(generator.next());
    console.log(generator.next());
    

 甚至可以通过next传参数

    function* foo(name1){
      console.log(111,name1);
      console.log(222,name1);
      const name2 = yield 'aaaa'
      console.log(333,name2);
      const name3 = yield 'bbbb'
      console.log(444,name3);
      yield 'cccc'
    }

    const generator = foo('next1')
    console.log(generator.next())
    console.log(generator.next('next2'));
    console.log(generator.next('next3'));
    

这个地方需要注意的是,传的参数对应yield下面的代码的,而且第一个next是一般不传参数的,而是在函数调用时直接传

也可以提前结束,使用生成器的return方法

这里直接在next2处直接结束

因为在next2处没有next,所以333根本不会输出,而是直接给了一个结果,其done:true

    function* foo(name1){
      console.log(111,name1);
      console.log(222,name1);
      const name2 = yield 'aaaa'
      console.log(333,name2);
      const name3 = yield 'bbbb'
      console.log(444,name3);
      yield 'cccc'
    }

    const generator = foo('next1')
    console.log(generator.next())
    console.log(generator.return('next2'));
    console.log(generator.next('next3'));
    console.log(generator.next('next4'));
    

 

 生成器代替迭代器

回顾本文最开始的数组迭代器写法 

    const name = [123, 222, 555]

    function creatArrayIterator(arr) {
      let index = 0
      const iterator = {
        next: function () {
          if (index < arr.length) {
            return { done: false, value: arr[index++] }
          }
          else {
            return { done: true }
          }

        }
      }
      return iterator
    }

    const arrIterator = creatArrayIterator(name)
    console.log(arrIterator.next());//123
    console.log(arrIterator.next());//222
    console.log(arrIterator.next());//555

现在利用生成器进行优化

因为creatArrayIterator这个函数我们的目的是返回一个迭代器,而生成器函数本身就能返回一个迭代器,在每个数组值处加一个yield就可以

    const name = [123, 222, 555]

    function* creatArrayIterator(arr) {
      for(let i=0;i<arr.length;i++){
        yield arr[i]
      }

    }

    const arrIterator = creatArrayIterator(name)
    console.log(arrIterator.next());//123
    console.log(arrIterator.next());//222
    console.log(arrIterator.next());//555

甚至可以更简化,前提是yiled*   后面接可迭代对象

    const name = [123, 222, 555]

    function* creatArrayIterator(arr) {
      yield* arr  
    }
    const arrIterator = creatArrayIterator(name)
    console.log(arrIterator.next());//123
    console.log(arrIterator.next());//222
    console.log(arrIterator.next());//555

 但是这个东西必须写在生成器函数中,例如对于之前写的

    const name = {
      friends: 2,
      age:4,
      name:[122,222,333,444],
      [Symbol.iterator]: function () {
        let keys = Object.keys(name)
        let index = 0
        const iterator = {
          next: ()=> {
            if (index < keys.length) {
              return { done: false, value: keys[index++] }
            }
            else {
              return { done: true }
            }
          }
        }
        return iterator
      }
    }
    for(let item of name){
      console.log(item);
    }

可以改为

    const name = {
      friends: 2,
      age:4,
      name:[122,222,333,444],
      [Symbol.iterator]:function* () {
        yield* this.name

      }
    }

    for(let item of name){
      console.log(item);
    }

或者

    const name = {
      friends: 2,
      age:4,
      name:[122,222,333,444],
      *[Symbol.iterator]() {
        yield* this.name
      }
    }

异步请求

现在模拟一个异步请求

    function requestData(url){
      const promise = new Promise((resolve,reject)=>{
        setTimeout(()=>{
          resolve(url)
        },2000)
      })
      return promise
    }

    //发送网络请求
    requestData('http://why').then(res=>{
      console.log(res);
    })

需求是,我想请求多次,每次请求都要等上一次请求结束

方式一   多层嵌套(回调地狱)

将下一次的请求直接放进上一次请求的then函数中

    function getdata(){
      requestData('aaa').then(res1 =>{
        console.log('第一次',res1);
        requestData(res1+'bbb').then(res2 =>{
          console.log('第二次',res2);
          requestData(res2 +'ccc').then(res3=>{
            console.log('第三次',res3);
          })
        })
      })
    }

    getdata()

方式二  使用Promise进行重构(解决回调地狱)

    function getdata(){
      requestData('aaa').then(res1 =>{
        console.log('第一次',res1);
        return requestData(res1+'bbb')
      }).then(res2=>{
        console.log('第二次',res2);
        return requestData(res2+'cccc')
      })
    }

    getdata()

这里每次then都返回了一个新的promise请求,那么下次的then的对象就是这个新的promise,避免了多层嵌套

方式三 使用生成器函数

    function* getdata() {
      const res1 = yield requestData('aaaa')
      console.log('第一次', res1);
      const res2 = yield requestData(res1 + 'bbbb')
      console.log('第二次', res2);
      const res3 = yield requestData(res2 + 'cccc')
      console.log('第三次', res3);

    }

    const generator = getdata()

    generator.next().value.then(res1 => {
      generator.next(res1).value.then(res2 => {
        generator.next(res2).value.then(res3 => {
        })
      })
    })

requestData('aaaa')返回一个promise,generator.next().value拿到这个promise,执行then函数,再嵌套下一个generator.next().value

利用递归

    function* getdata() {
      const res1 = yield requestData('aaaa')
      console.log('第一次', res1);
      const res2 = yield requestData(res1 + 'bbbb')
      console.log('第二次', res2);
      const res3 = yield requestData(res2 + 'cccc')
      console.log('第三次', res3);

    }

    function autoget(genfn){
      const generator = genfn()
      console.log(generator);

      function exec(res){
        const result = generator.next(res)
        if(result.done) return
        result.value.then(res =>{
          exec(res)
        })
      }
      exec()
      
    }

    autoget(getdata)

 这个的好处是不管getdata要请求多少次,autoget函数都不需要改变了

方式四 最终写法

    async function getdata() {
      const res1 = await requestData('aaaa')
      console.log('第一次', res1);
      const res2 = await requestData(res1 + 'bbbb')
      console.log('第二次', res2);
      const res3 = await requestData(res2 + 'cccc')
      console.log('第三次', res3);

    }

    const generator = getdata()

async await 继续查看: 

JS高级:async await_独憩的博客-CSDN博客

网站文章

  • 一文带你入门Python

    一文带你入门Python

    Python入门1.简介2.变量、运算符与数据类型2.1.注释2.2.运算符2.2.1.算术运算符2.2.2.比较运算符2.2.3.逻辑运算符2.2.4.位运算符2.2.5.三元运算符2.2.6.其他...

    2024-02-01 00:42:31
  • 【Ruby学习笔记】18.Ruby 数据库访问 - DBI 教程

    【Ruby学习笔记】18.Ruby 数据库访问 - DBI 教程

    本章节将向您讲解如何使用 Ruby 访问数据库。Ruby DBI 模块为 Ruby 脚本提供了类似于 Perl DBI 模块的独立于数据库的接口。

    2024-02-01 00:42:05
  • 因为月薪过高,我的工资发放失败了。。。

    因为月薪过高,我的工资发放失败了。。。

    上一篇:国家数据局正式揭牌!首次招聘启动!来源:稀土掘金作者:野生的码农码农卫师傅,在忙碌地写了一个月 bug 后,迟迟未能收到工资,紧接着又经历了20元巨款的不翼而飞。这究竟是道德的沦丧,还是人性的...

    2024-02-01 00:41:58
  • Android 音频开发——AudioTrack播放

     AudioTrack类用来管理、播放单个音频资源,它只能播放PCM数据,其他音频格式(aac、amr、opus、flac等)需要经过解码成PCM才能使用。运行模式AudioTrack可以运行两种模式...

    2024-02-01 00:41:50
  • 网站服务器内存满了,云服务器内存满了怎么办

    网站服务器内存满了,云服务器内存满了怎么办

    很多站长在使用云服务器的时候,总是会遇到内存不足的情况,这种现象就是我们在家用电脑时的内存不足时一样,令人烦恼,因为内存不足,将影响正常的使用,它是服务器的核心点,那么云服务器内存满了怎么办?有没有可...

    2024-02-01 00:41:20
  • 基金投资入门教程-----开扒各种基金

    基金投资入门教程-----开扒各种基金

    基金投资入门教程-----开扒各种基金2、开扒各种基金基金的分类按投资品种分货币基金与债券基金股票基金与混合基金按交易渠道分按运作方式分按投资方式分基金投资入门教程-----开扒各种基金2、开扒各种基金基金的分类按投资品种分货币基金与债券基金股票基金与混合基金按交易渠道分按运作方式分按投资方式分...

    2024-02-01 00:41:13
  • 为什么Redis不直接使用C语言的字符串

    为什么Redis不直接使用C语言的字符串

    众所周知Redis有以下几种常见的数据类型 String(字符串)、List(列表)、Set(集合)、Hash(哈希)、Sorted set(有序集合)、Stream(流)、Geo(地理空间索引)、Bitmap(位图)、HyperLogLog(基数统计)等。我们最常用的就是String(字符串)类型,String类型既可以存储字符串,也可以存储数字,甚至可以直接进行数值运算。

    2024-02-01 00:41:06
  • 新型作战概念下的军用通信系统发展趋势

    新型作战概念下的军用通信系统发展趋势

    公众号转载的文章及图片出于非商业性的教育和科研目的供大家参考和探讨,并不意味着支持其观点或证实其内容的真实性。版权归原作者所有,如转载稿涉及版权等问题,请立即联系我们删除。源自:防务快讯 ...

    2024-02-01 00:40:58
  • poj2376 贪心

    如题:http://poj.org/problem?id=2376 Cleaning Shifts Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12069 Accepted: 3140 Description Farmer John is assigni

    2024-02-01 00:40:30
  • 计算机数据库原理与应用,普通高等学校计算机科学与技术应用型规划教材:数据库原理与应用...

    《数据库原理与应用》系统全面地阐述数据库系统的基础理论、基本技术和基本方法。全书共分为10章,主要介绍了数据库基础理论、关系模型、关系数据库标准语言SQL、关系数据库设计理论、数据库安全保护、数据库设...

    2024-02-01 00:40:25