介绍
ES6 for...of 循环是 JavaScript 的新特性，它可以用来遍历可迭代（iterable）对象的元素。可迭代对象包括数组、字符串、Set 和 Map 等，但不包括普通的对象。在这篇文章中，我们将深入探讨 for...of 循环的用法及示例，以帮助你更好地理解并使用这一重要的新特性。
for...of 和 for...in 的区别
在介绍 for...of 循环之前，让我们先来了解一下 for...in 循环，它也是 JavaScript 的另一种循环类型。for...in 循环用于遍历对象的属性，但它不适用于遍历数组或字符串等可迭代对象。举个例子：
--- --- - - -- -- -- -- -- - -- --- ---- ---- -- ---- - ------------------ -- -- -- - -
上面的代码将输出对象 obj 的所有属性。但如果我们想要遍历一个数组或字符串，就需要使用 for...of 循环了。
for...of 循环的语法
for...of 循环实际上是基于可迭代对象的迭代器（iterator）实现的。这个迭代器是一个对象，它定义了如何遍历可迭代对象中的元素。迭代器对象必须有名为 Symbol.iterator 的属性方法，该方法返回一个迭代器对象。
for...of 循环的语法如下所示：
--- ---- ------- -- --------- - -- --- -
其中，iterable 是一个可迭代对象，element 则是该对象中的元素。在循环过程中，element 逐个取出 iteratable 中的元素，直到所有元素都被遍历完毕。下面是一个使用 for...of 遍历数组的例子：
--- --- - --- -- --- --- ---- ------- -- ---- - --------------------- -- -- -- - -
for...of 循环的实例教程
现在让我们来看几个实例，以便更好地理解 for...of 循环。
遍历字符串
我们可以使用 for...of 循环来遍历字符串中的每个字符。例如：
--- --- - ------- -------- --- ---- ---- -- ---- - ------------------ -- -- -- -- -- -- -- - -- -- -- -- -- - -
遍历数组
for...of 循环也可以用于遍历数组。例如：
--- --- - --- -- --- --- ---- ------- -- ---- - --------------------- -- -- -- - -
适用于数组和字符串等可迭代对象的类型都是内置的。
遍历 Set
ES6 中新引入了 Set 类型，它是一种集合类型，可以用来存储唯一的值，Set 类型也支持 for...of 循环。例如：
--- --- - --- ------- -- ---- --- ---- ------- -- ---- - --------------------- -- -- -- - -
遍历 Map
ES6 中的 Map 类型是一种键值对的集合类型。使用 for...of 循环也可以遍历 Map 中的元素。例子如下：
--- --- - --- ---------- --- ----- --- ----- ----- --- ---- ----- ------ -- ---- - ------------------- -- ----------- -- - -- -- - -- -- - -- - -
遍历对象的属性值
我们已经提到了，for...of 循环不适用于遍历对象的属性。但是，我们可以使用 Object.values() 方法来获取一个对象的所有属性值，并使用 for...of 循环来遍历这些属性值。例如：
--- --- - - -- -- -- -- -- - -- --- ---- ----- -- ------------------- - ------------------- -- -- -- - -
总结
在本文中，我们深入学习了 for...of 循环的语法、用法及实例。for...of 循环是一个强大的特性，可以用来遍历各种类型的可迭代对象，包括字符串、数组、Set 和 Map 等。它让我们更加方便地处理数据，提高了编码效率和代码质量，值得开发者们深入学习和熟练掌握。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653213747d4982a6eb444050