前言
在 ES6 中，Iterator 和 for...of 是非常重要的概念，它们为我们提供了一种新的迭代方式。它们的使用可以让我们更加方便地遍历数组、字符串、Map、Set 等数据结构，并且可以让我们写出更加简洁、优雅的代码。在本文中，我们将介绍 Iterator 和 for...of 的应用实例，帮助大家更好地理解它们的使用方法。
Iterator
在 ES6 中，Iterator 是一个接口，它提供了一种统一的访问数据结构的方式。任何数据结构只要部署了 Iterator 接口，就可以使用 for...of 循环进行遍历。Iterator 接口主要包含两个方法，分别是 next() 和 Symbol.iterator。
next()
next() 方法用于返回当前位置的成员，并且将内部指针向前移动一位。该方法返回一个对象，包含两个属性，分别是 value 和 done。其中，value 表示当前位置的成员的值，done 表示遍历是否结束。如果遍历结束，done 的值为 true，否则为 false。
下面是一个简单的 Iterator 实现，用于遍历数组：
--- --- - --- -- --- --- -------- - ----------------------- ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ ---------- ----- ---- -
Symbol.iterator
Symbol.iterator 方法返回当前数据结构的 Iterator 对象。该方法可以让我们自定义 Iterator 的行为，从而实现对数据结构的遍历。
下面是一个简单的 Iterator 实现，用于遍历对象的属性：
--- --- - - -- -- -- -- -- - --
-------------------- - ---------- -
--- ---- - ------------------
--- ----- - --
------ -
----- -- -- -
-- ------ - ------------ -
------ - ------ -------------------- ----- ----- --
- ---- -
------ - ------ ---------- ----- ---- --
-
-
--
--
--- ---- ----- -- ---- -
-------------------
-
-- -
-- -
-- -在上面的代码中，我们通过设置 obj 的 Symbol.iterator 方法，创建了一个自定义的 Iterator，用于遍历对象的属性。
for...of
在 ES6 中，for...of 循环用于遍历可迭代对象（即部署了 Iterator 接口的对象）。它可以遍历数组、字符串、Map、Set 等数据结构，并且可以让我们写出更加简洁、优雅的代码。
下面是一个使用 for...of 循环遍历数组的例子：
--- --- - --- -- --- --- ---- ----- -- ---- - ------------------- - -- - -- - -- -
下面是一个使用 for...of 循环遍历字符串的例子：
--- --- - -------- --- ---- ---- -- ---- - ------------------ - -- - -- - -- - -- - -- -
下面是一个使用 for...of 循环遍历 Map 的例子：
--- --- - --- ------ ------------ --- ------------ --- ------------ --- --- ---- ----- ------ -- ---- - ---------------- ------- - -- - - -- - - -- - -
应用实例
实例一：遍历 DOM 元素
在前端开发中，我们经常需要遍历 DOM 元素，以便对它们进行操作。使用 for...of 循环可以让我们更加方便地遍历 DOM 元素。
下面是一个使用 for...of 循环遍历 DOM 元素的例子：
--- ---------- -------- ------ -------- ------ -------- ------ -----
--- ---- - -------------------------------- ----- --- ---- ---- -- ----- - ------------------------------ - -- ---- - -- ---- - -- ---- -
在上面的代码中，我们使用 document.querySelectorAll 方法获取了 id 为 list 的 ul 元素下的所有 li 元素，然后使用 for...of 循环遍历这些 li 元素，并输出它们的文本内容。
实例二：遍历异步操作
在前端开发中，我们经常需要进行异步操作，例如使用 Promise 进行异步请求。使用 for...of 循环可以让我们更加方便地遍历异步操作，并且可以让我们写出更加简洁、优雅的代码。
下面是一个使用 for...of 循环遍历异步操作的例子：
-------- ----------- -
------ --- --------------- -- -
------------- -- -
--------------
-- ------
---
-
----- -------- ------ -
--- --- - ------ ----- ------
--- ---- ---- -- ---- -
--- ------ - ----- ------------
--------------------
-
-
-------
-- ----
-- ----
-- ----在上面的代码中，我们使用 Promise 和 setTimeout 模拟了一个异步操作，然后使用 for...of 循环遍历了一个包含三个时间的数组，并且依次输出了每个时间。
总结
在本文中，我们介绍了 Iterator 和 for...of 的应用实例，帮助大家更好地理解它们的使用方法。Iterator 和 for...of 提供了一种新的迭代方式，可以让我们更加方便地遍历数组、字符串、Map、Set 等数据结构，并且可以让我们写出更加简洁、优雅的代码。在实际开发中，我们可以根据需要灵活地使用 Iterator 和 for...of，从而提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65588fa1d2f5e1655d2bf9a0