ES6 的循环和可迭代对象

本文将研究 ES6 的 循环。

旧方法

在过去，有两种方法可以遍历 javascript。

首先是经典的 循环，它使你可以遍历数组或可索引的且有 属性的任何对象。

其次是 循环，用于循环一个对象的键/值对。

循环通常被视作旁白，因为它循环了对象的每一个可枚举属性[1]。这包括原型链中父对象的属性，以及被分配为方法的所以属性。换句话说，它遍历了一些人们可能想不到的东西。使用 通常意味着循环块中有很多保护子句，以避免出现不需要的属性。

早期的 javascript 通过库解决了这个问题。许多 JavaScript 库（例如：Prototype.js，jQuery，lodash 等）都有类似 或 这样的工具方法或函数，可让你无需 或 循环去遍历对象和数组。

循环是 ES6 试图不用第三方库去解决其中一些问题的方式。

for … of

循环

它将遍历一个可迭代（iterable）对象。

可迭代对象是定义了@@ iterator方法的对象，而且@@iterator方法返回一个实现了迭代器协议的对象，或者该方法是生成器函数。

在这句话中你需要理解很多东西：

可迭代的对象

@@iterator方法（ 是什么意思？）

迭代器协议（这里的协议是什么意思？）

等等，迭代（iterable）和迭代器（iterator）不是一回事？

另外，生成器函数又是什么鬼？

下面逐个解决这些疑问。

内置 Iterable

首先，javascript 对象中的一些内置对象天然的可以迭代，比如最容易想到的就是数组对象。可以像下面的代码中一样在 循环中使用数组：

输出结果是数组中的所有元素。

还有数组的 方法，它返回一个可迭代对象。这个可迭代对象在每次循环中返回键和值。例如下面的代码：

将输出以下内容

当用下面的语法时， 方法会更有用

在 for 循环中声明了两个变量：一个用于返回数组的第一项（值的键或索引），另一个用于第二项（该索引实际对应的值）。

一个普通的 javascript 对象是不可迭代的。如果你执行下面这段代码：

会得到一个错误:

然而全局 对象的静态 方法接受一个普通对象作为参数，并返回一个可迭代对象。就像这样的程序：

能够得到你期望的输出：

创建自己的 Iterable

如果你想创建自己的可迭代对象，则需要花费更多的时间。你会记得前面说过：

可迭代对象是定义了@@ iterator方法的对象，而且@@iterator方法返回一个实现了迭代器协议的对象，或者该方法是生成器函数。

搞懂这些内容的最简单方法就是一步一步的去创建可迭代对象。首先，我们需要一个实现@@iterator方法的对象。 表示法有点误导性，我们真正  要做的是用预定义的 符号定义方法。

如果用迭代器方法定义对象并尝试遍历：

得到一个新错误：

这是 javascript 告诉我们它在试图调用 方法，但是调用的结果不是对象。

为了消除这个错误，需要用迭代器方法来返回实现了迭代器协议的对象。这意味着迭代器方法需要返回一个有 键的对象，而 键是一个函数。

如果运行上面的代码，则会出现新错误。

这次 javascript 告诉我们它试图调用 方法，而该对象的确是一个对象，并且实现了 方法，但是 的返回值不是 javascript 预期的对象。

函数需要返回有特定格式的对象——有 和 这两个键。

键是可选的。如果值为 （表示迭代器已完成迭代），则说明迭代已结束。

如果 为 或不存在，则需要 键。 键是通过循环此应该返回的值。

所以在代码中放入另一个程序，它带有一个简单的迭代器，该迭代器返回前十个偶数。

生成器

手动去构建实现迭代器协议的对象不是唯一的选择。生成器对象（由生成器函数返回）也实现了迭代器协议。上面的例子用生成器构建的话看起来像这样：

本文不会过多地介绍生成器，如果你需要入门的话可以看这篇文章。今天的重要收获是，我们可以使自己的 方法返回一个生成器对象，并且该生成器对象能够在 循环中“正常工作”。“正常工作”是指循环能够持续的在生成器上调用 ，直到生成器停止 值为止。