在 ES6 和 ES7 中使用 for...of 循环遍历数组和集合
在现代的 JavaScript 开发中，我们经常需要对数组和集合进行遍历操作。在 ES5 中，我们通常使用 for 循环或 forEach() 方法来实现。但是，ES6 和 ES7 中引入的 for...of 循环提供了更为便捷的遍历方法。
一、ES6 中使用 for...of 循环遍历数组
在 ES6 中，我们可以使用 for...of 循环来遍历数组。for...of 循环内部调用了对象的 Iterator 接口，从而可以遍历数组的每一个值。
示例代码：
--- - - --- -- ---
------- ---- -- -- -
------------------
-输出结果：
- - -
如上例所示，通过 for...of 循环遍历数组非常简单，只需要用 let 声明一个变量 item 并将其赋值为数组中的每一个值即可。
二、ES6 中使用 for...of 循环遍历集合
在 ES6 中，除了遍历数组，我们还可以使用 for...of 循环来遍历集合。但是，集合不是一个数组，因此不能使用 for 循环或 forEach() 方法来遍历。
ES6 中的集合是由 Set 和 Map 两种数据结构构成的。Set 是一组不重复值的集合，而 Map 是一组键值对的集合。
1、遍历 Set 集合
首先我们来看如何遍历 Set 集合。同样，我们可以使用 for...of 循环来实现。
示例代码：
--- --- - --- ------- -- ----
------- ---- -- ---- -
------------------
-输出结果：
- - -
以上代码中，我们首先定义了一个 Set 集合，然后使用 for...of 循环遍历该集合，将集合中的每一个值输出。
2、遍历 Map 集合
和遍历 Set 集合类似，我们同样可以使用 for...of 循环来遍历 Map 集合。不过，我们需要使用 Map 对象的 entries() 方法将 Map 集合转化为一个迭代器，从而可以对其进行遍历。
示例代码：
--- --- - --- ------
--------------- -------
-------------- ----
------- ----- ------ -- -------------- -
--------------- - -- - - -------
-输出结果：
----- --- ---- --
以上代码中，我们首先定义了一个 Map 集合，然后使用 Map 的 set() 方法将 name 和 age 两个键值对添加到集合中。最后，我们使用 for...of 循环遍历该集合，将集合中的每一个键值对输出。
三、ES7 中使用 for...of 循环遍历对象
在 ES7 中，我们不仅可以使用 for...of 循环遍历数组和集合，还可以使用该语法来遍历对象。但是，对象不是一个可迭代的数据结构，因此我们需要使用 Generator 函数来将其转化为可迭代的数据结构。
示例代码：
--------- ------------------ -
--- -------- - ---------------------
--- ---- ------- -- --------- -
----- --------- --------------
-
-
--- --- - - ----- ------ ---- -- --
------- ----- ------ -- ------------------- -
--------------- - -- - - -------
-输出结果：
----- --- ---- --
以上代码中，我们首先定义了一个 Generator 函数 objectEntries()，该函数将一个对象转化为一个键值对的迭代器。然后，我们定义了一个对象 obj，并使用 for...of 循环遍历该对象的键值对并将其输出。
总结
通过上述的介绍和示例代码，我们可以发现在 ES6 和 ES7 中，使用 for...of 循环遍历数组和集合非常便捷。但是，在遍历集合和对象时需要注意一些细节，例如集合需要使用 Set 和 Map 数据结构，对象需要使用 Generator 函数将其转化为迭代器。希望本文对大家有所帮助，可以在实际项目中使用这些语法来提高开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64a4c2fe48841e9894123ba3