共计 4031 个字符，预计需要花费 11 分钟才能阅读完成。
作者：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)
}输入后果是数组中的所有元素。
apples
oranges
pears还有数组的 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:6
for(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.js
apples : oranges
pears : 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.js
2
4
6
8
10
本文首发微信公众号：前端先锋
欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章
欢送持续浏览本专栏其它高赞文章：
- 深刻了解 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 个计划及实现
- 更多文章 …
