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