在 ECMAScript 2017 中，新增了 for...of 循环，它提供了一种遍历可迭代对象（例如数组、字符串、Map 和 Set 等）的新方式。相较于传统的 for 循环和 forEach，for...of 循环更加简洁易用，在写代码的过程中能够提高开发效率。
基本用法
for...of 循环的语法格式如下：
--- --------- -- --------- - -- ---- ----- -- -- -------- -
其中，variable 为可选项，是一个在循环中声明的变量，用于存储当前迭代的值。iterable 则是一个可迭代的对象，可以是数组、字符串、Map 或 Set 等。
假设我们有一个数组，我们可以使用 for...of 循环来遍历它：
----- --- - --- -- -- --- --- ------ ----- -- ---- - ------------------- - -- ------- -- -- -- -
在这个例子中，我们声明一个变量 value，并使用它来存储每个迭代的值，接着使用 console.log() 方法输出每个值。
注意事项
1. 只能用于可迭代对象
for...of 循环只能用于可迭代对象。如果你使用它来迭代对象或其他非可迭代对象，就会报错。因此，在使用 for...of 循环之前，确保对象是可迭代的。例如，当我们使用 for...of 循环时遍历了一个对象时，就会报错：
----- --- - - -- -- -- -- -- - -- --- ------ ----- -- ---- - ------------------- - -- -------- ---------- --- -- --- --------
2. 无法跳出多层循环
与传统的 for 循环不同，for...of 循环没有类似 break 或 continue 的标签语法，因此无法从多层循环中轻松跳出。如果你需要跳出多层循环，可以考虑使用其他方式，例如使用 forEach 或手动抛出异常。
3. 对象属性无序
for...of 循环遍历对象时，它会遍历对象的属性，但是属性的顺序是不确定的。如果你需要按照特定顺序遍历对象的属性，可以使用其他方式，例如使用 Object.keys() 方法。
----- --- - - -- -- -- -- -- - -- --- ------ --- -- ----------------- - ---------------- ---------- - -- ------- -- --- -- --- -- --
使用技巧
1. 在字符串上使用 for...of
在字符串上使用 for...of 循环，可以便利字符串中的每个字符，这对于需要操作字符串中字符的场景非常有用。
----- --- - -------- --- ------ ---- -- ---- - -------------------------------- - -- ------- ---- ---- ---- ---- ---
2. 在 Map 上使用 for...of
在 Map 上使用 for...of 循环可以遍历 Map 中的每个键值对。在很多情况下，这比使用 forEach 更加方便且更加易读。
----- --- - --- ---------- --- ----- --- ----- ----- --- ------ ----- ------ -- ---- - ---------------- ------- - -- ------- -- --- -- --- -- --
在这个例子中，我们使用了一个解构赋值模式，将每个键值对解构为单独的 key 和 value 变量。
3. 在 Set 上使用 for...of
在 Set 上使用 for...of 循环，可以遍历 Set 中的每个值。
----- --- - --- ------- -- -- ---- --- ------ ----- -- ---- - ------------------- - -- ------- -- -- -- -
结论
for...of 循环是一个强大的遍历工具，其基本语法简洁易懂，能够提高代码效率。虽然在使用它时需要注意一些限制和特性，但是，结合一些技巧的使用，可以让你更好的发挥它的威力。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67395349317fbffedf163989