如何循环一个数组？20年前 JavaScript 诞生的时候，你会这么写：
for (var index = 0; index < myArray.length; index++) {
console.log(myArray[index]);
}
ES5 之后，可以使用内置的 forEach 方法：
myArray.forEach(function (value) {
console.log(value);
});
这样就稍微短了点了，但是仍然有一个小的缺点：无法使用 break 语句跳出循环，或者使用 return 从函数体内返回。
要是有可以用 for 循环的语法遍历数组的所有元素，那该多好。
那么for-in 循环如何？
for (var index in myArray) { // 不要真的这样写
console.log(myArray[index]);
}
这样写有以下几个问题：
- 代码中赋值为
index的值是字符串"0", "1","2"等，而不是真是的数字。由于你不想要碰到字符串计算（"2" + 1 == "21"）的状况，这对于编程而言是极其不方便的。 - 循环体不仅仅会遍历数组元素，还会遍历任意其他的自定义添加的属性。例如，如果数组包含了一个不能枚举的属性
myArray.name，那么这次循环就会在index == "name"的时候额外执行一遍。甚至数组原型链上的属性也都会被遍历到。 - 最让人感到惊奇的是，在某些状况下，这段代码会以随机顺序循环数组元素。
简而言之，for-in 循环在设计之初就是用于普通的以字符串为 key 值的对象的语法，而不适用与数组。
强大的 for-of 循环
让我们来看看 for-of 循环：
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 NodeList。
它也支持字符串的遍历，会把字符串作为一组 Unicode 的字符进行遍历：
for (var chr of "😺😲") {
alert(chr);
}
它也可以应用于 Map 和 Set 对象（ES6中新增的数据结构，之后的文章中会提及）。
例如，Set 对象可以有效的去重：
// 从一个单词组成的数组声明一个新的 Set
var uniqueWords = new Set(words);
然后你就轻松可以遍历 Set 中的内容了：
for (var word of uniqueWords) {
console.log(word);
}
Map 则稍微有点不同：Map 中的数据是由键值对组成的，所以你需要使用将其中的键值解构为两个独立的变量：
for (var [key, value] of phoneBookMap) {
console.log(key + "'s phone number is: " + value);
}
解构 (Destructing) 也是 ES6 中的特性，同样会在之后的文章中提及。
到现在为止，你可能已经可以想象到： JavaScript 已经有了一些新的集合类型，且在不久的将来会出现更多。而 for-of 则是被设计出来用以在这些集合上使用的循环语句。
for-of 并不适用于处理原有的原生对象，但是如果你想要遍历对象的属性，可以使用 for-in 或者内置的 Object.keys()：
// 输出对象自身可以枚举的值
for (var key of Object.keys(someObject)) {
console.log(key + ": " + someObject[key]);
}
深入本质
能工摹形，巧匠窃意。 -- 毕加索
ES6 中新增的特性都不是凭空出现的，大部分特性的优点都已经在其他的编程语言中被证实过。
例如 for-of 循环与 C++, Java, C#和 Python中的循环语句十分类似。与这些语言一样，for-of 循环适用于语言本身以及标准库中的不同的数据类型。同时它也是这门语言的一个扩展点。
如同其他语言中的 for/foreach 语句，for-of 通过方法调用来实现集合的遍历。数组、Maps、Sets 以及其他我们讨论过的对象之间有个共同点：有迭代器方法。
当然，任何对象都可以添加迭代器方法。
就像你可以给任意对象添加 myObject.toString() 方法，使之可以将对象转换为字符串，你可以将 myObject[Symbol.iterator]() 方法添加到任意对象，这样对象就可以被遍历了。
例如，假设你正在使用 jQuery，尽管你非常喜欢 .each() 方法，但是你仍希望 jQuery 对象可以支持 for-of 循环。以下就是实现的方法：
// jQuery 对象与数组类似
// 赋予他们和数组一样的迭代器方法
jQuery.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
我知道你在想什么。[Symbol.iterator] 语法看起来非常奇怪。这段代码到底做了什么事？它在此处通过 Symbol 处理了方法名。标准委员会称之为 .iterator()，也许你已经有些代码包含了 .iterator() 方法，这确实会让你感到困惑。因此标准使用了symbol 作为这个方法的名称而不是一个字符串。
Symbols 是 ES6 中的新特性 -- 这将会在以后的博文中介绍。就现在而言，你只需知道标准可以定义一种全新的 symbol ，例如 Symbol.iterator，这可以保证与现有的代码不冲突。这样做的代价就是语法看起来略显奇怪。但是这仅仅是这种语法带来的那么多特性与向后兼容性所造成的轻微代价。
一个包含[Symbol.iterator]() 方法的对象被称之为可迭代。在接下来的文章中，我们可以看到可迭代对象的概念贯穿了JavaScript 语言，不仅仅是 for-in ，还有 Map 和 Set 的构造函数，解构赋值以及一种新的展开操作符。
迭代器对象
现在，你无须自己从头实现一个迭代器对象。但是从本文的完整性的角度而言，我们需要了解一下迭代器对象。（如果你跳过了这一整节内容，你会错过很多精彩的技术细节）
for-of 循环在集合中先调用 [Symbol.iterator]() 方法。然后返回一个新的迭代器对象。一个迭代器对象可以是任意包含 .next() 方法的对象；for-of 会在循环的过程中重复调用这个方法。例如，以下是一个我所能想到的最简单的迭代器对象：
var zeroesForeverIterator = {
[Symbol.iterator]: function () {
return this;
},
next: function () {
return {done: false, value: 0};
}
};
每当这个 .next() 方法被调用的时候，它都会返回相同的结果，以此告知 for-of 循环(a) 还没有结束迭代；(b) 下一个值是 o。这也就意味着 (value of zeroesForeverIterator){} 是一个无限循环体。当然，一个典型的迭代器不会如此简单。
JavaScript 中的迭代器及它的 .done 和 .value 属性在表面上看起来和其他语言中的迭代器的不同。在 Java 中，迭代器有两个独立的 .hasNext() 和 .next() 方法。在 Python 中，只有一个 .next() 方法，在没有更多值的时候会抛出 StopIteration 异常。但是这三种设计从根本上而言，都返回了一样的信息。
一个迭代器对象也可以实现可选的 .return() 和 .throw(exc) 方法。for-of 会在循环过早结束的时候调用 .return() 方法，这可能是因为异常、break 或者 return 语句。迭代器可以实现 .return()，如果它需要做一些清理或者释放正在使用的资源的操作。大多数迭代器都不需要去实现这个方法。.throw(exc) 则应用于更特殊的情况：for-of 永远不会调用它。我们会在之后的文章中详细讨论。
既然我们已经了解了所有的细节，现在来使用一个简单的 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 版本都已经支持了 for-of 循环。在 Chrome 中使用需要到 chrome://flags 中开启 "Experimental JavaScript"。微软的 Spartan 浏览器中也可以使用，不过没有在已经发布的 IE 中被支持。如果你想要使用这种新的语法，但是想要支持 IE 和 Safari，可以使用像 Babel 或者 Google 的 Traceur 编译器将你的 ES6 代码转换为 Web 友好的 ES5 代码。
而在服务端，则不需要编译器的帮助 -- 现在你就可以在 io.js 中使用 for-of （而在 Node中，需要加入 --harmony 选项）。
这个系列的译文与原文一致遵守CC BY-SA 3.0 协议。
网友评论