在 JavaScript 编程中，迭代器是一种能够遍历数据结构中各个元素的对象。在 ES6 中，我们已经看到了这个新特性的引入。但是，ES6 中迭代器的实现相比于其他语言可能还显得有些简陋，不足以满足我们在实际开发中遍历数据结构的需求。
这时，ES2016 为 for..of 循环添加了更加灵活的支持，让我们可以使用迭代器更加自由地遍历自定义数据结构。
使用迭代器遍历数组和字符串
在 ES6 中，我们已经能够使用迭代器遍历数组和字符串，如下所示：
-- -------------------- ---- ------- --- --- - --- -- -- --- --- -------- - ----------------------- ----------------------------- ----------------------------- ----------------------------- ----------------------------- ----------------------------- -- ------- ---------- ----- -----
用 Symbol.iterator 属性获取数组的迭代器，然后通过调用 next 方法来遍历数组中的元素。
同样，我们也可以遍历字符串：
let str = "Hello World!";
let iterator = str[Symbol.iterator]();
for (let char of iterator) {
console.log(char); // "H" "e" "l" "l" "o" " " "W" "o" "r" "l" "d" "!"
}使用 for..of 循环更加简便和易读。
创建自定义迭代器
我们也可以创建自定义迭代器来遍历不同的数据结构。下面是一个自定义迭代器的示例代码。
-- -------------------- ---- -------
----- -------- - -
------------------- -
--- ----- - --
------ -
------ -
-- ------ - -- -
------ - ------ -------- ----- ----- --
- ---- -
------ - ------ ---------- ----- ---- --
-
-
--
-
--
--- ---- --- -- --------- -
----------------- -- - - - - -
-在这个示例代码中，我们创建了一个 iterable 变量，它是一个具有 Symbol.iterator 属性的对象。此属性上的函数返回了如何遍历数据结构的迭代器对象。
面向类的迭代器
如果你的数据结构是面向类的，那么在 ES2016 中创建自定义迭代器就更加容易了。
-- -------------------- ---- -------
----- ----- -
------------------ ---- -
---------- - ------
-------- - ----
-
------------------- -
--- ------- - -----------
--- ---- - ---------
------ -
------ -
-- -------- -- ----- -
--- ----- - --------
----------
------ - ------ ------ ----- ----- --
- ---- -
------ - ----- ---- --
-
-
--
-
-
--- ------ --- -- --- -------- --- -
----------------- -- - - - - -
-这是一个简单的 Range 类，返回一个可以遍历区间内数字的迭代器对象。
支持异步操作的迭代器
如果你正在使用异步代码，那么你也可以使用迭代器遍历异步数据。在 ES2018 中给出了异步迭代器的支持。下面是一个 fetch 请求的示例代码，它使用异步迭代器来获取多个url中的数据。
-- -------------------- ---- -------
----- --------- --------------- -
--- ------ --- -- ----- -
--- -------- - ----- -----------
--- ---- - ----- ----------------
----- -----
-
-
------ -------- -- -
--- ----- ------ ---- -- -----------
---------------------------
---------------------------
--------------------------
--- -
------------------
-
-----在这个示例代码中，我们定义了一个 fetchUrls 异步迭代器，它返回所有请求的数据。我们通过 for await..of 循环来遍历它的结果。这样一来，我们可以方便地处理大量异步操作的数据。
总结
ES2016 推出了更加灵活的 for..of 循环，更加自由地使用迭代器来遍历各种自定义数据结构。同时，这个特性还提供了许多其他的优秀方式来使用迭代器。
如果你使用迭代器的频率较高，那么 ES2016 中引入的这些新特性一定会让你感到愉快和兴奋。在使用迭代器的过程中，不断地学习和尝试新的方法，一定会让你的代码变得更加优美和简洁。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f963acf6b2d6eab30e665d