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

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

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

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

你是如何遍历数组中的元素的?20年前JavaScript刚进入视野时,你应该是这样写的:

for (var index = 0; index < myArray.length; index++) {     console.log(myArray[index]); }

直到ES5中原生JavaScript中添加了forEach方法:

myArray.forEach(function (value) {     console.log(value); });

语法上简洁了一些,但是它有一个小小的不足:你不能用break语句跳出循环且不能在这个封闭的函数内使用return语句。

如果有一个简单的for-loop语法来遍历数组就好了。

使用一个for-in循环怎么样?

for (var index in myArray) {     // don't actually do this     console.log(myArray[index]); }

我用几个理由来说明这并不是一个好主意:

  • 数组的索引值index是String类型的“0”,“1”,“2”等等,而不是Number类型。当你进行算术运算时(“2”+1==“21”)也许并不是你期望的结果,所以运算前需要类型转换,这很不方便。
  • 循环体不仅会遍历数组的元素,甚至连expando属性也遍历出来了。举个例子,如果你的myArray数组中有一个叫做name的属性,遍历时就将 index ==”name”也遍历出来,这样就多了一次执行。即时这些属性在数组的原型链上是可直接访问的。
  • 最让人无语的是,在某些情况下,这段代码在遍历数组元素时顺序是任意的。

总而言之,for-in语法是被设计来遍历普通的“键值对”对象的,不适合用在数组上。

强大的for-of循环

还记得我上篇提到的ES6是向后兼容的吗。即使在遍历数组的时候,成千上万的网站使用了for-in循环。所有“修复”for-in让它更适用于数组是有必要的。ES6来解决这个问题的唯一途径是新增一个新的遍历语法。

新语法如下:

for (var value of myArray) {     console.log(value); }

恩?!从构建上来说好像并没什么改变,事实如此吗?当然不是,我们来看看for-of的葫芦里究竟卖的什么药。首先,只需要注意这几点:

  • 这是目前遍历数组最简洁和直接的语法;
  • 它避免了for-in的所有缺陷;
  • 与forEach()不一样,它支持break,continue和return。

for-in循环用于遍历对象属性。

for-of循环用于遍历数据——比如数组中单值。

其它集合也支持for-of

for-of循环不仅仅是为遍历数组而设计的。基本上所有类数组对象都适用,比如DOM NodeListS。

也能用在字符串上,它将字符串当做一个Unicode字符序列:


它也能用在Map和Set对象上。

哦,不好意思,你没听说过Map和Set?没关系,他们是出现在ES6中的新成员。有机会我们会写个完整的关于它的文章。如果你使用过其它编程语言中的maps和sets,那么你也不会有陌生感。

例如,一个set对象使用于排除重复项:

// make a set from an array of words var uniqueWords = new Set(words);

如果你想遍历你的set,很简单:

for (var word of uniqueWords) {     console.log(word); }

Map有一点不同:它里面的数据由键值对组成,所以你需要使用destructuring将“键”和“值”解构为两个独立的变量:

for (var [key, value] of phoneBookMap) {     console.log(key + "'s phone number is: " + value); }

Destructuring(解构)也是ES6的新特性,在未来博客中会有很多关于它的文章。

目前为止,你可以这样理解:JS已经有了几个不同的集合类,而且更多的集合类正在被添加进来。for-of循环语句的设计初衷就是适用于所有这些集合类。

for-of并不能用于普通的旧对象。如果你想要遍历对象的所有属性,可以使用for-in,也可以通过Object.keys(object)将对象的所有属性以数组形式返回后再使用for-of。 

// dump an object's own enumerable properties to the console for (var key of Object.keys(someObject)) { console.log(key + ": " + someObject[key]); }

深入理解

“能工摹形,巧匠窃意。”——巴勃罗·毕加索

JavaScript在ES6中所新增的特性并不是凭空而来,大多数都是借鉴于其它优秀的语言。

以for-of循环伪例,与C++、Java、C#和Python的循环语句非常类似。和它们一样,支持该种语言提供的多种数据解构和标准库。但是它也是该种语言的一个扩展点。

就像for/foreach语句在其它语言中一样,for-of的执行完全靠方法调用。像Arrays,Maps,Sets等我们提到过的对象都有一个共同点就是它们都有一个遍历的方法。

其它类型的对象也都可有一个遍历方法:任何对象都可以。

就像你可以对任何一个对象添加方法myObject.toString()让JS知道如何将对象转换为字符串一样,你也可以对任何对象添加方法myObject.toString()来告诉JS如何遍历这个对象。

例如,假设你使用的jQuery,尽管喜欢使用.each(),那你也会喜欢上在jQuery对象中使用for-of。请看下面这个例子:

// Since jQuery objects are array-like, // give them the same iterator method Arrays have jQuery.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

好吧,我知道你会觉得[Symbol.iterator] 这样的语法看起来很奇怪。它是怎么执行的呢?使用方法名就可以了。标准委员会刚刚将这个方法命名为.iterator(),但是你已存在的代码中可能已经有了叫做.iterator的方法,那会造成命名冲突,让人傻傻分不清。因此所有标准库将其封装进了symbol,而不是使用简单的用字符串来直接命名。

Symbols是ES6的新特性,我们将在以后的博客中讨论它。目前,你所需要知道的是现在标准定义了一个全新的symbol,比如Symbol.iterator,为了保证与已存在的代码不存在命名冲突,所以这个代价就是语法看起来有点奇怪。

为了这个优秀的新特性的向后兼容性,这点小代价也就微不足道了。

迭代器对象

从现在开始你再也没有必要为自己写一个迭代器对象了,这个我们在下篇文章中再来讨论。但是出于完整性的考虑,让我们先来看看一个迭代器对象是什么样子的。(如果你跳过这一节,你会错过很多有趣的技术细节哟)。

for-of循环开始于对集合的[Symbol.iterator]()方法的调用。它会返回一个新的迭代器对象。任意一个有.next()方法的对象都可以被称作迭代器对象;每次执行进入循环时,for-of方法将会用.next()方法。例如,下面是一个我所能想到的最简单的迭代器构造:

var zeroesForeverIterator = {   [Symbol.iterator]: function () {       return this;    },    next: function () {        return {done: false, value: 0};    } };

每次当.next()方法被调用的时候,它会返回相同的结果,告诉for-of循环:(1)我们还没结束迭代;(2)下一个值是0。这意味着,(value of zeroesForeverIterator) {}将是一个无线循环。当然,一个真正的迭代器并不会这么简单。

迭代器的设计,伴随着.done和.value属性,从表面上来看似乎和其它语言中的迭代器不太一样。在Java中,迭代器将.hasNext()和.next()区分为两个方法。在Python中,它只有一个.next()方法,当没有下一个值时会抛出StopIteration 。但是从根本上来说,这三种方法返回同样的信息。

迭代器也可以实现一些可选方法,比如.return()和throw(ext)。在for-of循环中,当遇到异常或者break和return语句时可以调用.return()方法提前退出循环。迭代器可以通过实现.return()方法来清空变量或释放当前资源,大多数迭代器对象是使用不到这一点的。.throw(exc)是一个特殊的例子:for-of完全使用不到它,我们下次再来讨论。

现在我们已经了解了所有的基本细节,我们可以写一个简单的循环并重写它的底层方法调用部分。

先写一个for-of循环:

for (VAR of ITERABLE) {     STATEMENTS }

下面这段代码使用简单的底层方法和几个简单的变量来实现同样的功能:

var $iterator = ITERABLE[Symbol.iterator]();var $result = $iterator.next();while (!$result.done) {  VAR = $result.value;  STATEMENTS  $result = $iterator.next();}

这段代码并没有体现出.return()操作。我们可以添加进来,但是我认为认清它的执行过程比阐明它更重要。for-of的使用起来很简单,但有很多看不见幕后的工作。

我什么时候才能使用它?

当前所有的Firefox releases版本都支持for-of循环。如果你想在Chrome中使用,到chrome://flags设置“Experimental JavaScript”为“开启”即可。微软的Spartan浏览器支持它,但是IE不支持。如果你想要在Web中使用这些新语法且不用考虑支持IE和Safari,你可以使用Babel或者谷歌的Traceur这样的编译器将你的ES6代码转换成兼容性友好的ES5。

在服务端,你不需要一个编译器——你可以在io.js(基于Node,是一个不错的选择)中使用for-of。

(更新:在Chrome中默认是禁用的,这个被我忽视掉了,感谢Oleg 指出。)

讲完啦!

我们今天的计划都完成了,但是我们对for-of循环的学习还没结束。

ES6中还有一个和for-of完美结合的新对象。我之所以没提到它是因为它是我们下次的主题。

我认为它是ES6中最神奇的新特性。如果你之前没在像Python和C#这样的语言中使用过它,一开始它可能会让你感到难以置信。无论在客户端还是服务端,这是写一个构造器最简单方法,对于重构很有用,它有可能会改变我们写异步代码的方式习惯。

下次将一起深入ES6的generators 。(译者:向渝 责编:陈秋歌)

原文链接:ES6 In Depth: Iterators and the for-of loop

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

相关阅读:

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

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

编程语言收入榜 Java排第三 直接拿来用!10段超有用的Git命令行代码 Google Cast SDK正式版发布:自动适配,修复Bug 频受红杉资本青睐,商业智能初创公司Birst靠的是什么? 2013百度世界大会要点精华回顾 WebApp开发框架Clouda、轻应用... 对新手有用的JavaScript开发小建议 磨剑三载,且看从容应对14.3万TPS的Twitter是怎样炼成的! 兰亭集势:被高估的“长尾式采购” 谁说WP手机不行?微软称已成拉丁美洲第二大移动平台 Windows 8之父Steven Sinofsky加盟风投机构A16Z SDCC 2013演讲议题抢先看 腾讯、阿里、支付宝、网易…… [开源推荐]Google开源基于Deep Learning的word2vec工具 【开源专访】DWZ团队:致力打造最简单的Web前端开发方式 Linux黑客车库创业:服务器操作系统CoreOS颠覆互联网 时间序列数据处理的角逐:MongoDB vs. Cassandra 移动周报:Sphinx游戏引擎的前世今生 联想K900评测:英特尔X86兼容性明显提升(组图) 小米手机-HAXLR8on硬件黑客马拉松:32小时的创客狂欢 鲍尔默宣布下台后,微软应该做好这几件事情 IGT张奇伟:从空间物理到博彩游戏研发 Bing即将推出新功能 用户可直接在搜索结果页购买商品 【开源专访】郑晔谈Moco框架的前世今生以及Java编程之道 CTO俱乐部第108期下午茶:电商在微信上的现状与未来 SDCC 2013讲师议题确定 门票即将售罄(图) 简化工作流程,10款必备的HTML5开发工具 六大领域考评鲍尔默微软掌舵能力,只一“C”尔? 剥离自雅虎的Hortonworks:低调发展,三年融资近1亿美元 Google的中国梦如何死于傲慢与不得力公关 [回顾]昨日黄花,那些被人们遗忘的11个操作系统 管理企业级API的7个最佳实践 Java 与 .NET 的平台发展之争 关于将图形放大缩小的问题. jsp后缀名大小写问题(急,在线等!) sourceforge主站上不去了,那还有比较大的sourceforge站点?最好是美国的。 如何取得一个程序的内存占用率,cpu使用率等信息呢? 如何解决MSN Messenger5.0不能发送文件给MSN Messenger4.6的问题? 怎样把时间放到数据库表里,格式需要转换吗? 文件操作,帮个忙吧? simple question 60 points wait for your picking 如何卸载rose 分虽小,结得快的啊!讨论一下…… option explicit是什么意思 大哥大姐们!看一下嘛!帮帮我! 又一次被奶牛拒掉,而且有了注册机。 simple question 60 points wait for your picking (菜鸟的问题)在EditBox中怎么换行? 超级难题 SQL如何写??? 如何让WinCE支持DVDROM 請問如何在ASP.NET中實現從客戶機上傳文件到服務器? 新手问:我声明api,但是参数里有我没有定义的类型,pb报错,怎么办 关于Tclientdataset中commandtext的问题 关于按扭的简单问题 调用ejb的错误,请帮忙看看,帮我顶顶也给分,谢谢 关于lei的配置问题 java中 ,换行为\r\n ,空格为什么呢???? 关于快速排序的问题?在线等待!!! 如何在网页上显示动态图表?(送100分) 高兴,散分,收集故事喽,多讲多得,不讲不得。请斑竹留情,不要删除。 一个文件上传的bean编译成功了,但不会使,哪位用过,请给出使用的源代码,或者其它能实现上传的也行,越简单越好并附说明的 我想在触发器中得到对当前表的SQL操作的内容,应该如何实现??v$sql视图中有相关的信息,如何提取?? 心情好好,散分,各位谈谈LINUX和UNIX的感受啊:) Can u help me? 在B/S下如何根据不同用户来相应的mail库 insert into 求解! 各位高手帮帮忙,关于存储过程的问题 请教:VFP6在表单1中,关闭表单1打开表单2。结果显示表单2后,表单1又显示了一下才关闭。怎样让表单1直接关闭呢?谢谢! 很简单的问题--可是我不懂如何用javascript实现弹出窗口(无菜单和工具条的) 请高手帮忙有关“邮件多播”的问题。 《Oracle Pro *C/C++设计》的下载 哪位有最简单的SERVLET的里子,包括添加,查询。。。 水园的人有没有搞过聚会啊? SOS,用脚本连接数据库问题,100分求助,请帮忙。 救救我!SOS!SOS! 请问谁有恩雅的Mp3下载地址吗? 提示wscript未定义?该如何改呢? 关于C#遍译可执行程序问题 请高手看看,这个问题很有意义!为了同时查询不同的数据库(在不同的服务器上),请问用ASP怎么样实现多线程查询不同的库? 我是初学者,在开发ejb中,请问update、add和delete 的操作 ,在session bean中直接写sql来updat、add、delete语句对库操作行吗?还是在e 请问如何编程实现将打印的内容控制在一页之内? 请问如何编程实现将打印的内容控制在一页之内? 微软专家来看:我的datagrid排序还不行,为什么??? ******请教,VC中重新排版源代码的功能按键怎么用???****** 作文我眼中的同学 Do you swim in the river or in the swimming pool?回答请详细说明 SPEED DRIVER 哪里可以买到 SD1的卡要练的很厉害的2 hurry 我心中的好同学 作文 please drive (at) a safe speed的意思为什么不能用by Hurry 我固执的无可救药用英语怎么说 求短时间提高英语口语的办法!本人水平特差 “hurry 是我太固执还是你太偏执用英语怎么说 北京哪些公园有英语角北京哪些公园在寒暑假,或平时就有固定的英语角,可以让普通市民参加的. 音标:ju怎么读?juin怎么读? 朋友推荐英语口语韦博英语,我了解过酷酷口语怎么样呢? 早知是这个结果,偏偏自己固执,而使自己伤痕累累.这句话英语怎么说? 英语是不是所有学科中最简单的啊? Hurry up!恳请英语大神帮忙详细解释一下关于虚拟语气的一个疑问,跪谢!如题:虚拟语气中,与现在事实相反的假设(虚拟条件句)从句用:If +主语+动词的过去式(动词be用were)表示,主句用:主 仍固执的守着一个模糊的背影,不肯告别.用英语怎么说?如题 give怎么变过去式? Hurry up!数学达人快来,麻烦详细解释一道填空题的参考解释,答得好的,如题:已知正四面体(所有棱长都相等的三棱锥)的俯视图如图所示,其中四边形ABCD是边长为2cm的正方形,则这个正四面体 hurry 以[ju;]为音标的5字母单词,以p开头 SPEED DRIVER 2 那辆选不到的车十什么情况?有辆黑影的车,全都是?能选吗,怎么选 北京新东方暑期四级住宿班手机上网没办法查,我想知道今年北京新东方英语四级住宿班的时间,我上大一准备考四级,学四级哪种课程比较好?请把时间和价钱告诉我, 是只发/ju:/音的单词,音标就只有/ju:/这一个. 作文《我眼中的同学》 北京新东方暑假考研英语强化上走读班还是住宿班好 英语翻译I think the people ____ _____ _____ _____ ______ are really cool . 定语从句 the speed ( ) you drive your car mustn't be too highA in which B at which C by which D on which “有钱就任性”英语怎么说 音标带ju的单词 Despite the traffic lights ahead,the car continued ______ full speed.A withB inC onD at 北京新东方寒假四级住宿班的环境?我报的是四级的住宿~在水木清华校区报到的~请问有人在那学过吗?环境怎样?洗澡是怎样的情况?附近取钱方便吗?还有就是钱啊什么的保管安全吗? 怎么努力怎么拼才可以实现我的理想,考上复旦.从这个学期的期中考之后我就开始拼了,每节课下课就开始做题,不会的就去问同学问老师.回到家里休息一下听听音乐就又开始做题看书,做到10 Although the traffic is not busy, he likes to drive at a _______ speed. “有钱就任性”用英语怎么说 以[ju:]为音标的5字母单词 single和Hurry up分别是啥意思? 北京新东方四级基础强化全程走读班能住宿么 英语怎么说?如题.简短一点.一句就够 hurry “有钱就是任性”用英语怎么说 We should help him write letters改为否定句如题 Hurry up! 北京新东方暑期英语四级精品班万泉河校区每班多少人?是202教室 还有 som time,sometime,some times,sometimes的区别谁能告诉我这四个短语的区别啊,应该怎么用? 找个一起练英语口语的老外 —Haven't you seen the speed limit sign?please driveA more slowly a bitB slowly a bit moreC a bit more slowlyD slowly more a bit选哪一个?解释一下 高中生背英语课文有助于提高成绩吗 北京英语口语补习班,想老外一起英语口语练习, 请问“Drive at least 25 km/h below the speed limit. “get 新东方2010英语四级预测2010年6月19号英语四级新东方押题预测作文 我想找个老外交流英文 get up什么意思? 谁有上过北京新东方英语四级周末课的?能说下具体的时间、课程安排吗?比如是周六还是周日?一天上几个小时,是怎么安排的呢? 哪里老外多?而且可以交流语言?我想找一个方便学英语的地方.在海淀这边.知春路这边最好.谢绝 广告! 我眼中的同学作文 fuckin hurry up fuckin hurry up man 翻译 Varable Speed Drive
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘