说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

【探秘ES6】系列专栏:生成器

HTML文档下载 WORD文档下载 PDF文档下载
新一代JavaScript标准,ES6即将发布。【探秘ES6】系列专栏将一一剖析ES6的诸多新特性,让Web开发者对此有清晰全面的了解。本文为系列的第三篇,带你了解ES6的生成器。

ES6作为新一代JavaScript标准,即将与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该系列进行翻译,供大家学习借鉴。本文为该系列的第三篇。

ES6生成器介绍

什么是生成器呢?

请先看看以下代码。

function* quips(name) {  yield "hello " + name + "!";  yield "i hope you are enjoying the blog posts";  if (name.startsWith("X")) {    yield "it's cool how your name starts with X, " + name;  }  yield "see you later!";}

这是一段有关汤姆猫(talking cat)的代码。它看上去像是一个函数,是吗?在ES6中,它的名字是生成器函数,其与普通函数有很多相似的地方。但有两点不同:

  • 生成器函数以function*开头;
  • 在生成器函数中,yield是一个关键字,如同return。yield可以多次使用,作用是中断生成器,

    而在需要的时候可以恢复生成器的执行

所以生成器函数最大的特点是可以中断自己,但普通函数不可以。

生成器的作用

当使用quips()生成器函数时会出现什么情况呢?

> var iter = quips("jorendorff");  [object Generator]> iter.next()  { value: "hello jorendorff!", done: false }> iter.next()  { value: "i hope you are enjoying the blog posts", done: false }> iter.next()  { value: "see you later!", done: false }> iter.next()  { value: undefined, done: true }

对于普通quips(),它会马上执行直到出现返回或异常抛出等情况。在生成器函数中,调用方式是类似的:quips("jorendorff"),但是它不会马上执行。取而代之的是,它会返回一个已暂停的生成器对象(如上述代码的iter)。你可以把生成器对象看成是一个被暂停的函数调用。要特别说明的是生成器对象在生成器函数开始时被冻结,即第一行代码执行之前。

每当调用生成器对象的.next()方法时,函数恢复运行直至遇到下一个yield表达式,其作用是用于迭代。因此iter.next()的目的是为了返回不同的字符串。在最后的iter.next()中,使用done:true表示结束。到达函数末端意味着返回的结果是undefined,所以代码片段中使用value: undefined结尾。

从技术角度来看,每当生成器执行yield操作时,它的堆栈帧包括本地变量、参数、临时值等都会从堆中被移出。但是生成器对象会保留(拷贝)对该帧的引用,所以.next()可以重新激活它然后继续执行。这里特别要说明的是,生成器不是线程。当一个生成器执行时,它与其调用者都处于同一个线程,是按次序执行而不是并行运行。

可见生成器的作用是暂停本身的运行,然后恢复并继续执行,那么这究竟有何用处呢?

生成器就是迭代器

ES6迭代器不是内建的,可尝试通过使用[Symbol.iterator]()和.next()来进行创建。但是这种类似接口的做法不是最简便的方法。请看下面一个range迭代器例子,它的作用类似于C的for(;;)循环。

// This should "ding" three timesfor (var value of range(0, 3)) {  alert("Ding! at floor #" + value);}

具体的实现代码:

class RangeIterator {  constructor(start, stop) {    this.value = start;    this.stop = stop;  }  [Symbol.iterator]() { return this; }  next() {    var value = this.value;    if (value < this.stop) {      this.value++;      return {done: false, value: value};    } else {      return {done: true, value: undefined};    }  }}// Return a new iterator that counts up from 'start' to 'stop'.function range(start, stop) {  return new RangeIterator(start, stop);}

要查看运行情况请点击这里。

可见迭代器的生成并不是件简单的事情。那么如果采用生成器来实现,应该如何编写呢?

function* range(start, stop) {  for (var i = start; i < stop; i++)    yield i;}

要查看运行情况请点击这里。

对比是很明显的,上述代码仅需4行代码就完成了相同的功能,因为生成器就是迭代器。所有生成器都内建了对.next()和[Symbol.iterator]()的支持,你只需要负责循环的实现就可以了。

除此以外,作为迭代器使用的生成器还可以实现哪些功能呢?

  • 使任何对象可迭代。方法是编写一个生成器函数,然后对每个值进行迭代。然后使用对象的[Symbol.iterator]方法与生成器函数进行绑定。
  • 简化数组功能。如果要实现以数组形式返回函数结果,可以这样写:

// Divide the one-dimensional array 'icons'// into arrays of length 'rowLength'.function splitIntoRows(icons, rowLength) {  var rows = [];  for (var i = 0; i < icons.length; i += rowLength) {    rows.push(icons.slice(i, i + rowLength));  }  return rows;}

如果使用生成器编写,可以把代码简化为:

function* splitIntoRows(icons, rowLength) {  for (var i = 0; i < icons.length; i += rowLength) {    yield icons.slice(i, i + rowLength);  }}

后者与前者的区别是不是一次就计算所有结果并返回一个数组,而是先返回一个迭代器,然后按次序按需进行计算。

  • 返回特殊长度数组。数组是有长度限制的,但是透过生成器迭代特性,可以产生无限的序列。
  • 重构复合循环。当编写一个复杂的循环时,可以提出产生数据的部分,把它改写为一个独立的生成器函数。例如(var data of myNewGenerator(args))。
  • 进行迭代运算的配套工具。ES6并没有提供有关筛选、映射、迭代数据集操作的扩展库。但是借助生成器,我们可以围绕它来简单地创建相关工具。

例如,要在DOM节点上实现与Array.prototype.filter类似的功能,可以这样编写:

function* filter(test, iterable) {  for (var item of iterable) {    if (test(item))      yield item;  }}

可见,生成器真的妙不可言。借助生成器可以方便地实现定制的迭代操作,而迭代是ES6中贯穿始终的新的数据和循环标准。

生成器和异步代码

请看一段代码:

}).on('close', function () {  done(undefined, undefined);}).on('error', function (error) {  done(error);});

异步APIs提供的是错误处理而非异常处理,不同APIs有不同的处理方法。而大多数错误定义是默认的,所以进行异步编程时需要花一定时间去了解。生成器则提供了新的处理方式。

Q.async()是一个实验性的类似于同步代码的异步代码生成方法,请看代码:

// Synchronous code to make some noise.function makeNoise() {  shake();  rattle();  roll();}// Asynchronous code to make some noise.// Returns a Promise object that becomes resolved// when we're done making noise.function makeNoise_async() {  return Q.async(function* () {    yield shake_async();    yield rattle_async();    yield roll_async();  });}

两者的主要区别是异步代码必须使用yield关键字来执行异步函数。因此生成器为新的异步编程模型带来了新的思路,更符合人的思维习惯。

写在最后

限于篇幅,生成器还有两个方法留待后续讲解,.throw()和.return()。多看官方文档多动手练习,你会发现ES6更多精彩。(译者:伍昆 责编:陈秋歌)

原文链接:ES6 In Depth: Generators

本译文遵循Creative Commons Attribution Share-Alike License v3.0 

相关阅读:

【探秘ES6】系列专栏:ES6简介

【探秘ES6】系列专栏:迭代器和for-of循环

欢迎加入CSDN前端交流群:218126086,进行前端技术交流。  

在Delphi的DBGrid中插入其他可视组件 在Delphi的Socket编程中如何从服务器向指定的客户机发送信息? 在Delphi动态生成定义数据库 在Delphi中处理数据库日期型字段的显示与输入 在Delphi中简单实现多重查询 在Delphi中建立和使用别名 在DELPHI中使用ADO对象存取ODBC数据库 在Delphi中使用DBF数据 在Delphi中随意控制DBGrid 每一行的颜色 在Delphi中自动检测、建立数据库别名和表格 在存储过程中使用use database-Delphi资料 在一个Dbgrid中显示多数据库-Delphi资料 在运行期创建表-Delphi资料 怎样把可以使用的表名输出到一个选择框?-Delphi资料 怎样发布基于Microsoft SQL Server的程序-Delphi资料 怎样解决打开一个DBF表时的Index not found..错误-Delphi资料 怎样向SQL Server插入带有Image字段的记录-Delphi资料 怎样在Paradox表中加密码?-Delphi资料 自动Login数据库-Delphi资料 自动检测、建立数据库别名和表格-Delphi资料 自动注册Paradox-Delphi资料 Delphi 4增訂的Object Pascal Delphi 5 Enterprise版10大特点 Delphi 插件创建、调试与使用应用程序扩展 Delphi 程序制作要点 Delphi 中面向对象编程之我见 Delphi”程序级触发器”功能的实现 Delphi4.0系统提示信息的汉化 Delphi5优化 Delphi编程技巧十则 Delphi程序制作要点 Libran() 请进 什么关键时候信赖全球通??屁话,大家来帮忙鄙视一下移动!!! 如何设置Log文件,记录数据库的操作信息? 请问哪里可以买到数据线把手迹和电脑联起来 蓝天,我有一个CELL表格的问题? 请问那里有bcb6.0下载(100)分 用DataGrid进行自定义分页后,页面切换时,如何方便的记录嵌在DataGrid中的Checkbox的状态? 关于GHOST的问题,现在的版本是否能刻WIN2000,以及域网中广播式刻录的问题,急!!!!!!!!!!!!!!!!!! 图片显示问题 请问有关程序员的考试 AntBrother(蚁哥) 请进 AntBrother(蚁哥) 请进 帮忙,如何屏闭TextBox控件的其它字符输入,只能输入数字!!!! 下的一段代码,在BCB怎是报错 大难题:在Win2000或者WinXP上安装Oracle7.3.3 ???? 一个很菜的问题:怎么查看所有的变量或属性值? 请问VB.NET如何获取IE收藏夹的位置? 迷惑不解,请教了 怎么用按钮来控制复选框的全部选中呀??? Excel中宏的问题!急 大难题:在Win2000或者WinXP上安装 Oracle7.3.3 ??? 关于窗口的大小和位置的问题 视图指针问题,高手帮忙!谢谢! 寻觅图象处理高手共同合作,欢迎朋友们去偶的站点申请免费主页空间 中秋佳节,兄弟们发Cash了吗 ? 寻觅图象处理高手共同合作,欢迎朋友们去偶的站点申请免费主页空间 寻觅图象处理高手共同合作,欢迎朋友们去偶的站点申请免费主页空间 用户控件 高手请进!!关于线程问题,本人在线等候!!! 如何禁止局域网中的MSN `×××怎样验证一个文本宽是否输入了汉字××× 为什么我的程序编译后跟没编译一样!大家救救我啊!急! JAVA发展趋势是什么? WEB服务器问题?????? 如何处理编码的问题 100分求助!关于多选框的问题!急啊!在线等!! 关于布局管理器的问题 recvfrom 的超时怎么不行呢? IIS不能访问asp文件,只能访问html文件,而且网页中的所有弹出类网页链接全都打不开(在线等) 在JSP里边怎么动态插入文件 设计物流系统应该考虑那些问题,实现那些功能,拜托 设计物流系统应该考虑那些问题,实现那些功能,拜托 php中的register_globals为off,怎么获得url中传递参数 设计物流系统应该考虑那些问题,实现那些功能,拜托 上海日記:震撼 这是为什么? 在JBuilder 下 如何单步debug SOAP 服务器端程序? 求助:手机短信是以什么编码发送的呢?UTF还是普通的GB2312? 另外移动和联通用的编码一样么? 急求《c#高级编程》2nd 英文版! windows 2003 下我的p4x266e 板载声卡驱动好了,但是没有声音,怎么解决? SOS:菜鸟问题! 证明向量组a,b,c 线性相关,则向量组-2a,3b,-1/2c 线性无关 已知向量组a ,b,c线性无关,试证:a+2b ,b+2c ,c+2a线性无关 (非常好)的英文怎么翻译 (2a向量-b向量)-(2a向量+b向量)需要过程加解释 new york city norah jones空间链接 一条公路,前十天修了全长的五分之二,每天修全长的几分之几,几天能修完这条公路? 要两篇作文,都650字左右.题目叫《新年畅想》,《又到一年收获时》要今年的原创,谢谢各位了.好的加分. 跪求500字的 新年畅想 作文 不要复制的http://wenwen.soso.com/z/q172309029.htm?w=%D0%C2%C4%EA%B3%A9%CF%EB&spi=1&sr=1&w8=%E6%96%B0%E5%B9%B4%E7%95%85%E6%83%B3&qf=20&rn=347&qs=4&ch=w.search.1一楼的在这个网站上有 其它的不符合 雅思3分提高到6.5分 需要多长时间? 英语翻译All payments made pursuant to this Agreement shall be made in U.S.dollars and shall be made within thirty (30) days of ABC’s Invoice.Actual amounts are payable and Licensee shall be responsible for payment of any sales,use,import,export 翻译:她的英语说的非常好. 媒体揭秘美国监听手段:大使馆屋顶材料美无人机操作员:像僵尸一样执行任务 “罗莎”向偏西方向移动 东部地区雾霾杭州小区取消固定车位引争执 一位大伯杭州大妈100岁生日 家庭四世同堂齐法国总理呼吁民众避免使用暴力手段来解美无人机操作员:遥控飞机阿富汗杀人 杭州国际马拉松赛今天上午开跑 景区单委内瑞拉总统谴责推特强删其推特粉丝媒体揭秘美国监听手段:大使馆屋顶材料美无人机操作员:操纵飞机在阿富汗杀人赶紧出手吧,幸运也许在等着你!供热投诉集中在三个时段投诉热企的地段医生救回产妇性命却要被扣4000多元“他从来没有关心过我和孩子”“女超恒大”新赛季要冲三冠驾照自学直考 长春今起试点李冰冰成宝齐莱首位全球品牌形象代言人明天去中东七彩城参加长春首届风筝文化用胶多污染大能不用尽量别用你造吗?优质“巴氏奶”就是这样的:跑昨晚长春空气污染爆表星际之清道夫圣情难却无限武侠新世界异界刀皇剑问乾坤仙雨子弹世界六道败类笑傲莽荒奔月传说神印皇矢高阁寺旅游妇好墓旅游中朝边境一步跨旅游大梨树村生态旅游区旅游七色海旅游药池沸泉旅游杜鹃峡旅游临潼博物馆旅游圣诞村旅游恒友鱼蛋旅游林和靖墓旅游
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘