立即前往

活动

天翼云最新优惠活动,涵盖免费试用,产品折扣等,助您降本增效!
查看全部活动
热门活动
  • 智算采购季 热销S6云服务器2核4G限时88元/年起,部分主机可加赠对象存储组合包!
  • 免费体验DeepSeek,上天翼云息壤 NEW 新老用户均可免费体验2500万Tokens,限时两周
  • 云上钜惠 HOT 爆款云主机全场特惠,更有万元锦鲤券等你来领!
  • 算力套餐 HOT 让算力触手可及
  • 天翼云脑AOne NEW 连接、保护、办公,All-in-One!
  • 一键部署Llama3大模型学习机 0代码一键部署,预装最新主流大模型Llama3与StableDiffusion
  • 中小企业应用上云专场 产品组合下单即享折上9折起,助力企业快速上云
  • 息壤高校钜惠活动 NEW 天翼云息壤杯高校AI大赛,数款产品享受线上订购超值特惠
  • 天翼云电脑专场 HOT 移动办公新选择,爆款4核8G畅享1年3.5折起,快来抢购!
  • 天翼云奖励推广计划 加入成为云推官,推荐新用户注册下单得现金奖励
免费活动
  • 免费试用中心 HOT 多款云产品免费试用,快来开启云上之旅
  • 天翼云用户体验官 NEW 您的洞察,重塑科技边界

智算服务

打造统一的产品能力,实现算网调度、训练推理、技术架构、资源管理一体化智算服务
智算云(DeepSeek专区)
科研助手
  • 算力商城
  • 应用商城
  • 开发机
  • 并行计算
算力互联调度平台
  • 应用市场
  • 算力市场
  • 算力调度推荐
一站式智算服务平台
  • 模型广场
  • 体验中心
  • 服务接入
智算一体机
  • 智算一体机
大模型
  • DeepSeek-R1-昇腾版(671B)
  • DeepSeek-R1-英伟达版(671B)
  • DeepSeek-V3-昇腾版(671B)
  • DeepSeek-R1-Distill-Llama-70B
  • DeepSeek-R1-Distill-Qwen-32B
  • Qwen2-72B-Instruct
  • StableDiffusion-V2.1
  • TeleChat-12B

应用商城

天翼云精选行业优秀合作伙伴及千余款商品,提供一站式云上应用服务
进入甄选商城进入云市场创新解决方案
办公协同
  • WPS云文档
  • 安全邮箱
  • EMM手机管家
  • 智能商业平台
财务管理
  • 工资条
  • 税务风控云
企业应用
  • 翼信息化运维服务
  • 翼视频云归档解决方案
工业能源
  • 智慧工厂_生产流程管理解决方案
  • 智慧工地
建站工具
  • SSL证书
  • 新域名服务
网络工具
  • 翼云加速
灾备迁移
  • 云管家2.0
  • 翼备份
资源管理
  • 全栈混合云敏捷版(软件)
  • 全栈混合云敏捷版(一体机)
行业应用
  • 翼电子教室
  • 翼智慧显示一体化解决方案

合作伙伴

天翼云携手合作伙伴,共创云上生态,合作共赢
天翼云生态合作中心
  • 天翼云生态合作中心
天翼云渠道合作伙伴
  • 天翼云代理渠道合作伙伴
天翼云服务合作伙伴
  • 天翼云集成商交付能力认证
天翼云应用合作伙伴
  • 天翼云云市场合作伙伴
  • 天翼云甄选商城合作伙伴
天翼云技术合作伙伴
  • 天翼云OpenAPI中心
  • 天翼云EasyCoding平台
天翼云培训认证
  • 天翼云学堂
  • 天翼云市场商学院
天翼云合作计划
  • 云汇计划
天翼云东升计划
  • 适配中心
  • 东升计划
  • 适配互认证

开发者

开发者相关功能入口汇聚
技术社区
  • 专栏文章
  • 互动问答
  • 技术视频
资源与工具
  • OpenAPI中心
开放能力
  • EasyCoding敏捷开发平台
培训与认证
  • 天翼云学堂
  • 天翼云认证
魔乐社区
  • 魔乐社区

支持与服务

为您提供全方位支持与服务,全流程技术保障,助您轻松上云,安全无忧
文档与工具
  • 文档中心
  • 新手上云
  • 自助服务
  • OpenAPI中心
定价
  • 价格计算器
  • 定价策略
基础服务
  • 售前咨询
  • 在线支持
  • 在线支持
  • 工单服务
  • 建议与反馈
  • 用户体验官
  • 服务保障
  • 客户公告
  • 会员中心
增值服务
  • 红心服务
  • 客户支持计划
  • 专家技术服务
  • 备案管家

了解天翼云

天翼云秉承央企使命,致力于成为数字经济主力军,投身科技强国伟大事业,为用户提供安全、普惠云服务
品牌介绍
  • 关于天翼云
  • 智算云
  • 天翼云4.0
  • 新闻资讯
  • 天翼云APP
基础设施
  • 全球基础设施
  • 产品能力
  • 信任中心
最佳实践
  • 精选案例
  • 超级探访
  • 云杂志
  • 分析师和白皮书
  • 天翼云·创新直播间
市场活动
  • 2025智能云生态大会
  • 2024智算云生态大会
  • 2023云生态大会
  • 2022云生态大会
  • 天翼云中国行
天翼云
  • 活动
  • 智算服务
  • 产品
  • 解决方案
  • 应用商城
  • 合作伙伴
  • 开发者
  • 支持与服务
  • 了解天翼云
    • 关系数据库SQL Server版
    • 企业主机安全
    • 云防火墙
    • CDN加速
    • 物理机
    • GPU云主机
    • 天翼云电脑(政企版)
    • 天翼云电脑(公众版)
    • 云主机备份
    • 弹性云主机
      搜索发现
      关系数据库SQL Server版企业主机安全云防火墙CDN加速物理机GPU云主机天翼云电脑(政企版)天翼云电脑(公众版)云主机备份弹性云主机
    • 文档
    • 控制中心
    • 备案
    • 管理中心
    • 登录
    • 免费注册

    javascript迭代器和生成器(一)

    首页 知识中心 其他 文章详情页

    javascript迭代器和生成器(一)

    2023-06-16 06:03:57 阅读次数:402

    javascript,生成器,迭代器

    在看过官方文档和《你不知道的javascript 中卷》之后,觉得还是应该写点什么总结一下,但是这个涉及到的点很多,感觉不太能够在单篇文章的篇幅之内能描述完全。

    接下来我还是尽可能的描述一下,让大家理解过程,应用的地方有很多。

    目录

    自定义迭代器

    生成器


    自定义迭代器

    比如迭代器,官网给出一个自定义迭代器的例子:

    function makeRangeIterator(start = 0, end = Infinity, step = 1) {
        let nextIndex = start;
        let iterationCount = 0;
    
        const rangeIterator = {
           next: function() {
               let result;
               if (nextIndex < end) {
                   result = { value: nextIndex, done: false }
                   nextIndex += step;
                   iterationCount++;
                   return result;
               }
               return { value: iterationCount, done: true }
           }
        };
        return rangeIterator;
    }
    
    let it = makeRangeIterator(1, 10, 2);
    
    let result = it.next();
    while (!result.done) {
     console.log(result.value); // 1 3 5 7 9
     result = it.next();
    }
    
    console.log("Iterated over sequence of size: ", result.value); // 5

    照着敲一下理解下,这里其实是为了讲解生成器做铺垫,已经构造出了返回的result对象中的两个属性,一个是value,一个是done。

    官网给出的迭代器的解释:

    迭代器和生成器

     

    生成器

    接下来我来重点解释下生成器:

    来,我们开门见山,生成器就是一类特殊的函数,可以一次或多次启动和停止,并不一定非得要完成。

    虽然自定义的迭代器是一个有用的工具,但由于需要显式地维护其内部状态,生成器函数提供了一个强大的选择:它允许你定义一个包含自有迭代算法的函数, 同时它可以自动维护自己的状态。

    来看一下代码:

    function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
        for (let i = start; i < end; i += step) {
            yield i;
        }
    }
    var a = makeRangeIterator(1,10,2)
    a.next() // {value: 1, done: false}
    a.next() // {value: 3, done: false}
    a.next() // {value: 5, done: false}
    a.next() // {value: 7, done: false}
    a.next() // {value: 9, done: false}
    a.next() // {value: undefined, done: true}

    好奇怪,这里出现来一个yield,这个是什么意思呢?yield大家暂时先理解为暂停并返回一个值的意思。

    这里第一个a.next();启动生成器,执行到yield i暂停,并返回i,此时返回的对象里面的value是1

    记住:每次调用next(),会返回一个新的Generator(生成器),但这个Generator只能迭代一次。

    用形象化的语言描述:每次调用next(),就是提出一个问题,生成器要给我的下一个值是什么?而生成器返回的东西有两种返回方式,一种是yield返回,一种是return返回。

    以第一次为例,回答问题:这里生成器返回给next(...)的东西为Generator对象{value: 1, done: false},value值是yield表达式的值。

    然后依次返回的Generator为

    {value: 3, done: false}
    {value: 5, done: false}
    {value: 7, done: false}
    {value: 9, done: false}

    最后一次返回的value是undefined,done为true,表示结束。
    {value: undefined, done: true}

    最后的value为什么是undefined?因为函数结束了??

    生成器返回值来源就是两种,一种yield暂停返回值,一种是return返回值,这里循环结束只剩return了,因为函数没有显示返回,就是默认隐式返回undefined,所以这里是undefined。是不是最后一次返回的生成器对象value都是undefined呢?不是的,我们往下看吧!

     

    理解了吗?接下来我们往下看来测试你是否理解了

    function *foo(x) {
        var y = x * (yield "Hello"); // 暂停并返回"Hello"
        return y;
    }
    
    var it = foo(6); 
    
    var res = it.next(); // {value:"Hello", done:false}
    console.log(res.value); // "Hello"
    
    res = it.next(7); // {value:42, done:true}
    console.log(res.value); // 42

    var it = foo(6);这里it是一个控制生成器的迭代器,当然你也可以理解为引用 it 指向生成器*foo(...)对象,每次构建这样的一个迭代器it,实际上就隐式的构建了生成器的一个实例,然后通过这个迭代器来控制这个生成器实例。

    var res = it.next();留下一个问题,生成器*foo(...)要给我的下一个值是什么?去看生成器,yield "Hello"表达式回答了这个问题,执行到yield "Hello"的时候暂停,并返回value为"Hello"的Generator对象{value:"Hello", done:false}

    res = it.next(7); 留下一个问题,生成器*foo(...)要给我的下一个值是什么?此时传入的7是赋值给了yield表达式,这里就是yield和next(...)的双向消息传递!!(关于双向消息传递我们下一个例子再讲)

    此时没有yield来回答问题了,那么由 return 来回答!返回给next(...)的东西就由return返回。x为上一次的next传入的值6,yield表达式为本次next传入的7,所以y为42,return 42;

    it.next(7)的执行返回的对象为{value:42, done:true},因为函数结束了,done就为true。

    记住:启动生成器时的第一个next()一定要用不带参数的next(),因为所有的浏览器都会丢弃传递给第一个next()的参数

     

    看到这里,我想你应该理解了最后一次返回的时候value是undefined还是具体值的问题,就是看你生成器函数是否显式return,有就是你return的值,没有就是默认undefined.

     

    相似例子说明:

    function *foo(x) {
        var y = x * (yield); // 暂停并返回undefined
        return y;
    }
    
    var it = foo(6); 
    
    var res = it.next(); // {value:undefined, done:false}
    console.log(res.value); // "Hello"
    
    res = it.next(7); // {value:42, done:true}
    console.log(res.value); // 42

    不同点就是只有yield,暂停并返回undefined。

     

    如果你看懂了下一个例子,你就是理解了yield和next(...)的双向消息传递

    function *foo() {
        var x = yield 2;
        ++z;
        var y = yield(x * z);
        console.log(x, y, z);
    }
    
    var z = 1;
    
    var it1 = foo();
    var it2 = foo();
    
    var val1 = it1.next().value; // 2, yield表达式暂停并返回2
    var val2 = it2.next().value; // 2, yield表达式暂停并返回2
    
    val1 = it1.next(val2 * 10).value; // 40
    val2 = it2.next(val1 * 5).value; // 600
    
    it1.next(val2 / 2); // y:300   20  300  3
    it2.next(val1 / 4); // y:10    200 10 3

    val1 = it1.next(val2 * 10).value; //40

    这里it1.next参数传进去val2*10=20,传进去20给yield表达式,然后赋值给x,所以x为20,然后++z,z为2,接着执行到下一个yield暂停,返回表达式的值yield(x * z)就是20*2=40,所以这里是40

    val2 = it2.next(val1 * 5).value; // 600

    这里it2.next传进去的是val1*5=200,传进去200给yield表达式,然后赋值给x,所以x为200,然后++z,z为3,接着执行到下一个yield暂停,返回表达式的值yield(x * z)就是200*3=600,所以这里是600

    最后it1和it2迭代器再次next,这次就是执行到函数结束了,

    it1的next执行后y为300,x,y,z分别为20, 300, 3

    it2的next执行后y为10,x,y,z分别为200, 10, 3

    最后生成器给出的值都为{value:undefined,done:true},没有什么变量接收。

    yield和next(...)双向消息传递就是这个next(...)传参数给上一次暂停的yield表达式,从而进行下一次计算,而执行到下一次yield的时候,暂停返回的生成器对象中的value键的值就是yield表达式的值。

    yield ...和next(...)这一对组合起来,在生成器的执行过程中构成了一个双向消息传递系统。

     

    知识扩展:

    function * iterator02(end_value)
    {
      for(let i = 0; i < end_value; i++)
      {
        yield i;
      }
    }
    
    for (let n of iterator02(10))
    {
      console.log(n) ;
    }
    
    let numbers = [ ... iterator02(20) ] ;
    
    let [a, b, c, ... others] = iterator02(8) ;
    
    console.log(numbers) ;
    console.log(a, b, c) ;
    console.log(others) ;

    运行结果:

    javascript迭代器和生成器(一)

    记住:[...]语法,解构赋值语法,for循环和forEach等循环语法,实质就是iterator.next(),为什么这么说呢?

    来看看,上面的例子稍微变一变!

    function * iterator02(end_value)
    {
      for(let i = 0; i < end_value; i++)
      {
        yield i;
      }
    }
    let a = iterator02(10);
    let numbers = [...a];
    console.log(a.next()); //这个是啥???

    最后打印

    {value: undefined, done: true}

    明明才准备启动生成器,结果迭代已经执行完了,充分说明这[...a]语法是不断next()直到结束!

    记住,凡是能迭代的,原理是iterator.next()去迭代的,都会有

    javascript迭代器和生成器(一)

    这个属性。

    官网给的定义如下:

           为了实现可迭代,一个对象必须实现 @@iterator 方法,这意味着这个对象(或其原型链中的任意一个对象)必须具有一个带 Symbol.iterator 键(key)的属性。

    版权声明:本文内容来自第三方投稿或授权转载,原文地址:https://blog.51cto.com/u_14973569/6422193,作者:砖业洋__,版权归原作者所有。本网站转在其作品的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如因作品内容、版权等问题需要同本网站联系,请发邮件至ctyunbbs@chinatelecom.cn沟通。

    上一篇:4、Mybatis-Plus 通用service的操作

    下一篇:四、消息认证码、认证加密和重放攻击

    相关文章

    2025-04-22 09:40:08

    【ETL工具】kettle 程序报错 Javascript error: TypeError: Cannot call method “trim“ of null

    【ETL工具】kettle 程序报错 Javascript error: TypeError: Cannot call method “trim“ of null

    2025-04-22 09:40:08
    java , javascript , org
    2025-04-14 08:45:36

    一段诡异的JavaScript代码,其实考察的是一些JavaScript的基础知识

    一段诡异的JavaScript代码,其实考察的是一些JavaScript的基础知识

    2025-04-14 08:45:36
    html , javascript
    2025-04-09 09:16:07

    如何入门Python——学习Python的指南针

    Python是一种高级编程语言,它易于学习和使用,因此成为了许多人的首选编程语言。

    2025-04-09 09:16:07
    Python , 代码 , 函数 , 列表 , 生成器 , 编程 , 运算符
    2025-04-09 09:13:17

    python 无监督生成模型

    无监督生成模型在机器学习中扮演着重要角色,特别是当我们在没有标签数据的情况下想要生成新的样本或理解数据的内在结构时。一种流行的无监督生成模型是生成对抗网络(Generative Adversarial Networks, GANs)。

    2025-04-09 09:13:17
    图像 , 样本 , 生成 , 生成器 , 训练
    2025-04-07 10:20:39

    从零开始手撸WebGL3D引擎11: PostProcessing框架(里程碑5了)

    从零开始手撸WebGL3D引擎11: PostProcessing框架(里程碑5了)

    2025-04-07 10:20:39
    javascript
    2025-04-01 09:21:49

    数据结构14-栈常见操作3

    数据结构14-栈常见操作3

    2025-04-01 09:21:49
    html , javascript , Stack , 前端
    2025-03-18 09:58:51

    JavaScript 实战案例解析

    JavaScript 实战案例解析

    2025-03-18 09:58:51
    JavaScript , 代码 , 日期 , 片段 , 生成器 , 解析 , 随机
    2025-03-05 09:22:45

    深入理解Python中的生成器和迭代器

    在Python中,迭代器是一个遵循迭代器协议的对象,它包含两个基本方法:__iter__()和__next__()。迭代器允许程序员遍历一个容器(特别是序列类型,如列表和字符串),但与索引遍历不同,迭代器提供了一种更通用且灵活的方式来处理数据。

    2025-03-05 09:22:45
    使用 , 内存 , 处理 , 数据 , 生成器 , 示例 , 迭代
    2025-03-05 09:11:26

    【Python】使用生成器(yield from)和装饰器封装函数

    【Python】使用生成器(yield from)和装饰器封装函数

    2025-03-05 09:11:26
    yield , 函数 , 生成器 , 计算器 , 输入 , 返回值
    2025-02-26 07:20:25

    Python 之父的解析器系列之七:PEG 解析器的元语法

    Python 之父的解析器系列之七:PEG 解析器的元语法

    2025-02-26 07:20:25
    标识符 , 添加 , 生成 , 生成器 , 编译器 , 解析器 , 语法
    查看更多
    推荐标签

    作者介绍

    天翼云小翼
    天翼云用户

    文章

    32777

    阅读量

    4821993

    查看更多

    最新文章

    javascript特效——页面不停闪烁

    2024-12-19 08:41:28

    设计模式:(生成器模式)

    2024-10-30 08:59:10

    前端工作总结242-uni-提交成功加入表单验证

    2024-09-25 10:15:15

    vue课程72 侦听器-用法总结

    2024-09-25 10:13:57

    前端项目实战230-ant design 5.0 checkbox块级化

    2024-09-24 06:30:42

    使用FullCalendar做日程安排

    2024-09-24 06:30:42

    查看更多

    热门文章

    Jsp Ajax之模拟用户注册

    2022-11-17 12:37:24

    使用axios完成JS文件流式下载文件

    2023-07-26 07:51:41

    js: json的序列化和反序列化

    2023-02-20 10:30:04

    react18-学习笔记14-枚举(Enum)

    2023-03-16 07:13:43

    ajax2-ajax的post请求

    2023-05-15 10:01:00

    好客租房5-React脚手架的应用

    2023-03-13 09:31:59

    查看更多

    热门标签

    linux java python javascript 数组 前端 docker Linux vue 函数 shell git 容器 spring 节点
    查看更多

    相关产品

    弹性云主机

    随时自助获取、弹性伸缩的云服务器资源

    天翼云电脑(公众版)

    便捷、安全、高效的云电脑服务

    对象存储

    高品质、低成本的云上存储服务

    云硬盘

    为云上计算资源提供持久性块存储

    查看更多

    随机文章

    前端工作总结287-pc重置筛选条件

    前端-vue基11-事件基本使用

    node-文件写入操作

    好客租房56-props深入(3props校验-约束规则)

    react学习-类的使用

    前端项目实战131-数组优先排序和次排序

    • 7*24小时售后
    • 无忧退款
    • 免费备案
    • 专家服务
    售前咨询热线
    400-810-9889转1
    关注天翼云
    • 权益商城
    • 天翼云APP
    • 天翼云微信公众号
    服务与支持
    • 备案中心
    • 售前咨询
    • 智能客服
    • 自助服务
    • 工单管理
    • 客户公告
    • 涉诈举报
    账户管理
    • 管理中心
    • 订单管理
    • 余额管理
    • 发票管理
    • 充值汇款
    • 续费管理
    快速入口
    • 权益商城
    • 文档中心
    • 最新活动
    • 免费试用
    • 信任中心
    • 天翼云学堂
    云网生态
    • 甄选商城
    • 渠道合作
    • 云市场合作
    了解天翼云
    • 关于天翼云
    • 天翼云APP
    • 服务案例
    • 新闻资讯
    • 联系我们
    热门产品
    • 云电脑
    • 弹性云主机
    • 云电脑政企版
    • 天翼云手机
    • 云数据库
    • 对象存储
    • 云硬盘
    • Web应用防火墙
    • 服务器安全卫士
    • CDN加速
    热门推荐
    • 云服务备份
    • 边缘安全加速平台
    • 全站加速
    • 安全加速
    • 云服务器
    • 云主机
    • 智能边缘云
    • 应用编排服务
    • 微服务引擎
    • 共享流量包
    更多推荐
    • web应用防火墙
    • 密钥管理
    • 等保咨询
    • 安全专区
    • 应用运维管理
    • 云日志服务
    • 文档数据库服务
    • 云搜索服务
    • 数据湖探索
    • 数据仓库服务
    友情链接
    • 中国电信集团
    • 189邮箱
    • 天翼企业云盘
    • 天翼云盘
    ©2025 天翼云科技有限公司版权所有 增值电信业务经营许可证A2.B1.B2-20090001
    公司地址:北京市东城区青龙胡同甲1号、3号2幢2层205-32室
    • 用户协议
    • 隐私政策
    • 个人信息保护
    • 法律声明
    备案 京公网安备11010802043424号 京ICP备 2021034386号