作者：Alan Storm翻译：疯狂的技术宅
原文：https://alanstorm.com/es6s-ma...
未经容许严禁转载
本文将钻研 ES6 的 for ... of 循环。
旧办法
在过来，有两种办法能够遍历 javascript。
首先是经典的 for i 循环，它使你能够遍历数组或可索引的且有 length 属性的任何对象。
for(i=0;i<things.length;i++) { var thing = things[i] /* ... */}其次是 for ... in 循环，用于循环一个对象的键/值对。
for(key in things) { if(!thing.hasOwnProperty(key)) { continue; } var thing = things[key] /* ... */}for ... in 循环通常被视作旁白，因为它循环了对象的每一个可枚举属性。这包含原型链中父对象的属性，以及被调配为办法的所以属性。换句话说，它遍历了一些人们可能想不到的货色。应用 for ... in 通常意味着循环块中有很多爱护子句，以避免出现不须要的属性。
晚期的 javascript 通过库解决了这个问题。许多 JavaScript库（例如：Prototype.js，jQuery，lodash 等）都有相似 each 或 foreach 这样的工具办法或函数，可让你无需 for i 或 for ... in 循环去遍历对象和数组。
for ... of 循环是 ES6 试图不必第三方库去解决其中一些问题的形式。
for … of
for ... of 循环
for(const thing of things) { /* ... */}它将遍历一个可迭代（iterable）对象。
可迭代对象是定义了 @@ iterator 办法的对象，而且 @@iterator 办法返回一个实现了迭代器协定的对象，或者该办法是生成器函数。
在这句话中你须要了解很多货色：
- 可迭代的对象
- @@iterator办法（
@@是什么意思？） - 迭代器协定（这里的协定是什么意思？）
- 等等，迭代（iterable）和迭代器（iterator）不是一回事？
- 另外，生成器函数又是什么鬼？
上面一一解决这些疑难。
内置 Iterable
首先，javascript 对象中的一些内置对象人造的能够迭代，比方最容易想到的就是数组对象。能够像上面的代码中一样在 for ... of 循环中应用数组：
const foo = ['apples','oranges','pears']for(const thing of foo) { console.log(thing)}输入后果是数组中的所有元素。
applesorangespears还有数组的 entries 办法，它返回一个可迭代对象。这个可迭代对象在每次循环中返回键和值。例如上面的代码：
const foo = ['apples','oranges','pears']for(const thing of foo.entries()) { console.log(thing)}将输入以下内容
[ 0, 'apples' ][ 1, 'oranges' ][ 2, 'pears' ]当用上面的语法时，entries 办法会更有用
const foo = [ 'apples','oranges','pears']for(const [key, value] of foo.entries()) { console.log(key,':',value)}在 for 循环中申明了两个变量：一个用于返回数组的第一项（值的键或索引），另一个用于第二项（该索引理论对应的值）。
一个一般的 javascript 对象是不可迭代的。如果你执行上面这段代码：
// 无奈失常执行const foo = { 'apples':'oranges', 'pears':'prunes'}for(const [key, value] of foo) { console.log(key,':',value)}会失去一个谬误
$ node test.js/path/to/test.js:6for(const [key, value] of foo) {TypeError: foo is not iterable然而全局 Object 对象的动态 entries 办法承受一个一般对象作为参数，并返回一个可迭代对象。就像这样的程序：
const foo = { 'apples':'oranges', 'pears':'prunes'}for(const [key, value] of Object.entries(foo)) { console.log(key,':',value)}可能失去你冀望的输入：
$ node test.jsapples : orangespears : prunes创立本人的 Iterable
如果你想创立本人的可迭代对象，则须要破费更多的工夫。你会记得后面说过：
可迭代对象是定义了 @@ iterator 办法的对象，而且 @@iterator 办法返回一个实现了迭代器协定的对象，或者该办法是生成器函数。
搞懂这些内容的最简略办法就是一步一步的去创立可迭代对象。首先，咱们须要一个实现 @@iterator 办法的对象。 @@ 表示法有点误导性，咱们真正要做的是用预约义的 Symbol.iterator 符号定义方法。
如果用迭代器办法定义对象并尝试遍历：
const foo = { [Symbol.iterator]: function() { }}for(const [key, value] of foo) { console.log(key, value)}失去一个新谬误：
for(const [key, value] of foo) { ^TypeError: Result of the Symbol.iterator method is not an object这是 javascript 通知咱们它在试图调用 Symbol.iterator 办法，然而调用的后果不是对象。
为了打消这个谬误，须要用迭代器办法来返回实现了迭代器协定的对象。这意味着迭代器办法须要返回一个有 next 键的对象，而 next 键是一个函数。
const foo = { [Symbol.iterator]: function() { return { next: function() { } } }}for(const [key, value] of foo) { console.log(key, value)}如果运行下面的代码，则会呈现新谬误。
for(const [key, value] of foo) { ^TypeError: Iterator result undefined is not an object这次 javascript 通知咱们它试图调用 Symbol.iterator 办法，而该对象确实是一个对象，并且实现了 next 办法，然而 next 的返回值不是 javascript 预期的对象。
next 函数须要返回有特定格局的对象——有 value 和 done 这两个键。
next: function() { //... return { done: false, value: 'next value' }}done 键是可选的。如果值为 true（示意迭代器已实现迭代），则阐明迭代已完结。
如果 done 为 false 或不存在，则须要 value 键。 value 键是通过循环此应该返回的值。
所以在代码中放入另一个程序，它带有一个简略的迭代器，该迭代器返回前十个偶数。
class First20Evens { constructor() { this.currentValue = 0 } [Symbol.iterator]() { return { next: (function() { this.currentValue+=2 if(this.currentValue > 20) { return {done:true} } return { value:this.currentValue } }).bind(this) } }}const foo = new First20Evens;for(const value of foo) { console.log(value)}生成器
手动去构建实现迭代器协定的对象不是惟一的抉择。生成器对象（由生成器函数返回）也实现了迭代器协定。下面的例子用生成器构建的话看起来像这样：
class First20Evens { constructor() { this.currentValue = 0 } [Symbol.iterator]() { return function*() { for(let i=1;i<=10;i++) { if(i % 2 === 0) { yield i } } }() }}const foo = new First20Evens;for(const item of foo) { console.log(item)}本文不会过多地介绍生成器，如果你须要入门的话能够看这篇文章。明天的重要播种是，咱们能够使本人的 Symbol.iterator 办法返回一个生成器对象，并且该生成器对象可能在 for ... of 循环中“失常工作”。 “失常工作”是指循环可能继续的在生成器上调用 next，直到生成器进行 yield 值为止。
$ node sample-program.js246810本文首发微信公众号：前端先锋
欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章
欢送持续浏览本专栏其它高赞文章：
- 深刻了解Shadow DOM v1
- 一步步教你用 WebVR 实现虚拟现实游戏
- 13个帮你进步开发效率的古代CSS框架
- 疾速上手BootstrapVue
- JavaScript引擎是如何工作的？从调用栈到Promise你须要晓得的所有
- WebSocket实战：在 Node 和 React 之间进行实时通信
- 对于 Git 的 20 个面试题
- 深刻解析 Node.js 的 console.log
- Node.js 到底是什么？
- 30分钟用Node.js构建一个API服务器
- Javascript的对象拷贝
- 程序员30岁前月薪达不到30K，该何去何从
- 14个最好的 JavaScript 数据可视化库
- 8 个给前端的顶级 VS Code 扩大插件
- Node.js 多线程齐全指南
- 把HTML转成PDF的4个计划及实现
- 更多文章...