循环在编程中是一项基本操作，而在 ES6 中，引入了一种新的循环语法 - for...of 循环。与传统的 for 循环语法相比，这种语法更加方便，也更能够满足现代 JavaScript 开发需要。本文将对 ES6 中的 for...of 循环做一些浅析，帮助读者更好地理解并使用其。
了解 for...of 循环
for...of 循环是什么
for...of 循环用于遍历可迭代对象（iterable），如字符串、数组、map、set、generator 等。针对遍历中每一个元素，for...of 循环会为每个元素的值创建一个变量，并执行指定的操作。
for...of 循环的语法
for...of 循环的语法如下：
for (var value of iterable) {
// statements
}其中，iterable 表示一个可迭代对象，如数组、字符串、map、set、generator 等，value 表示当前元素的值。
for...of 循环与传统 for 循环的区别
for 循环在遍历数组等集合类型时，需要指定循环次数以及使用计数器变量进行访问。而 for...of 循环则不需要指定次数，只需传入可迭代对象，内部自动进行循环迭代。同时，for 循环只能遍历数组等集合类型，而 for...of 循环则可遍历任何可迭代对象。
使用 for...of 循环
遍历数组
我们可以使用 for...of 循环遍历数组，如下所示：
const arr = [1, 2, 3];
for (const num of arr) {
console.log(num);
}该代码可以依次输出数组 [1, 2, 3] 的每个值。
遍历字符串
同样，我们也可以使用 for...of 循环遍历字符串，如下所示：
const str = 'hello';
for (const char of str) {
console.log(char);
}该代码可以依次输出字符串 'hello' 的每个字符。
遍历 map
我们可以使用 for...of 循环遍历 map 对象，如下所示：
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (const [key, value] of map) {
console.log(key, value);
}该代码可以依次输出 map 对象中每个元素的键和值。
遍历 set
同样，我们也可以使用 for...of 循环遍历 set 对象，如下所示：
const set = new Set([1, 2, 3]);
for (const num of set) {
console.log(num);
}该代码可以依次输出 set 对象中每个元素的值。
遍历 generator
我们可以使用 for...of 循环遍历 generator 对象，如下所示：
-- -------------------- ---- ------- --------- ----- - ----- -- ----- -- ----- -- - --- ------ --- -- ------ - ----------------- -
该代码可以依次输出 generator 对象中每个 yield 语句传出的值。
总结
通过本文对 ES6 中的 for...of 循环进行的浅析，我们可以看到该循环语法的便捷性与灵活性，在对可迭代对象进行遍历时起到重要的作用。而如何在实际开发中更好地使用该语法，则需要深入的学习及实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475718d968c7c53b0282e12