在 ES7 中，引入了一种新的循环机制——Iterator。这种机制可以在不了解数据结构的情况下，遍历数据。在这篇文章中，我们将深入讨论Iterator的工作原理并使用一些示例来演示它的用法。
Iterator 的工作原理
Iterator 是一种机制，可以遍历任何你想要遍历的东西。例如，你可以用Iterator 遍历一个数组或一个字符串。当使用 Iterator 的时候，你需要定义一个 next() 函数，返回包含 next value 和 done 属性的对象。下面是一个非常简单的 Iterator 函数的例子：
-------- ------------------- -
--- --------- - --
------ -
----- ---------- -
------ --------- - ------------ -
- ------ ------------------- ----- ----- - -
- ----- ---- --
-
--
-
--- -- - ------------------ ---- ------
----------------------- -- - ------ ---- ----- ----- -
----------------------- -- - ------ ---- ----- ----- -
----------------------- -- - ------ ---- ----- ----- -
----------------------- -- - ----- ---- -在这个例子中，我们定义了一个makeIterator函数，它返回值是一个对象，该对象包含next方法。next方法返回一个具有value属性和done属性的对象。当done属性为true时，表示遍历结束。当done属性为false时，表示遍历将继续。
遍历数组
现在，我们可以看到,上面定义的makeIterator函数是可以遍历任意数据类型的，包括数组。然而，有一个巨大的缺陷就是你需要手动追踪nextIndex。我们可以使用ES6 提供的 for...of 循环来遍历数组，这可以免去手动追踪下标的痛苦，并使遍历的代码更加干净。例如：
--- --- - ----- ---- -----
--- ---- - -----------------------
--- ---- ---- -- ----- -
------------------ -- --- --- ---
-在这个例子中，我们使用Symbol.iterator方法获取数组的Iterator对象，然后使用 for...of 循环遍历该对象。
遍历字符串
使用 Iterator 可以遍历所有类型的数据，包括字符串。遍历字符串时，每次调用next()返回下一个字符，例如：
--- --- - --------- --- ---- - ----------------------- ------------------------- -- - ------ ---- ----- ----- - ------------------------- -- - ------ ---- ----- ----- - ------------------------- -- - ------ ---- ----- ----- - ------------------------- -- - ------ ---- ----- ----- - ------------------------- -- - ------ ---- ----- ----- - ------------------------- -- - ------ ---- ----- ----- - ------------------------- -- - ----- ---- -
遍历 Map 和 Set
Map 和 Set 是集合类型，它们保存键-值对。由于键和值可以是任何数据类型，Iterator 遍历它们有所不同。Map的遍历方法如下：
--- --- - --- -------- ------- --- ------- --- -----------
--- ---- - --------------
--- ---- ----- ------ -- ----- -
--------------- - - - - - -------
-在这个例子中，我们使用Map的 entries() 成员函数生成一个 Iterator，这个 Iterator 生成了所有的键值对，然后我们使用 for...of 循环来遍历Iterator，然后通过解构，我们可以同时访问到每个键和值。
Set的遍历方法与之类似，如下所示：
--- --- - --- ------- -- ----
--- ---- - -------------
--- ---- ----- -- ----- -
-------------------
-Navigator 遍历 DOM
Navigator 是一个节点遍历器，这个可以遍历DOM的树形结构。这个很有用，在需要访问特定节点的情况下。例如，假设我们有这样的一个节点列表：
---- -------------
-- ------------ -----
-- ------------ -----
-- ------------ -----
------我们可以使用 Navigator 遍历表格，例如：
--- ------- - -----------------------------------
--- ---- - ------------------------------------ ------------------------ ------
--- -----
----- ------ - ---------------- --- ----- -
--------------------------
-在这个例子中，我们使用 document.createNodeIterator() 方法创建了一个遍历器对象，它接受三个参数：节点、节点过滤类型和过滤器。我们在这里使用了 NodeFilter.SHOW_ELEMENT，表示我们只想查找 Element 节点。然后 we 使用 while 循环来遍历 nodeIterator 对象，当 iter.nextNode() 返回 null，遍历结束。
总结
ES7 的Iterator是一个非常强大的循环机制，可以在不了解数据结构的情况下，遍历任何数据类型。无论是遍历数组、字符串，还是遍历集合或Node列表，Iterator 都是一个不错的选择。了解了 Iterator，我们可以使用 for..of 循环轻松地遍历大多数的集合类型，并且一旦你掌握了 Iterator的核心，你将能够更轻松地使用这个功能来构建几乎任何数据结构。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64d111c4b5eee0b5258152c8