在 ES6 中，新增了 for...of 循环语句，该循环语句是 ES5 中的 for...in 循环语句的一个替代品，但是 for...of 循环语句的优势更加明显。本文将会深入阐述 for...of 循环语句的执行过程和其优势，并提供示例代码加以说明。
for...of 循环语句的执行过程
for...of 语句是用来循环遍历数组、集合、Map、Set 和字符串等可迭代对象（iterable）的循环语句。以下是 for...of 循环语句的语法：
--- --------- -- --------- - -- ---- ----- -- -- -------- -
其中，“变量”代表循环中每次迭代的值，“可迭代对象”是您希望循环遍历的数据结构。
for...of 循环语句的执行过程是从可迭代对象中依次取出每个元素，将其赋值给循环中的变量，然后执行循环体内的代码块。代码块内的执行会持续到所有元素都被遍历完毕为止。
for...of 循环语句的优势
相较于 for...in 循环语句，for...of 循环语句有很多的优势：
1. 可迭代对象的值是元素本身
在 for...in 循环语句中，迭代变量是迭代对象的键名，而不是键值。因此，如果您希望访问对象的值，必须使用该键名来访问。
----- --- - - -- -- -- -- -- - -- --- ------ --- -- ---- - ----------------- -- - - - ---------------------- -- - - - -
使用 for...of 循环语句之后，您可以直接访问元素而不需要通过键名来访问。
----- --- - --- -- --- --- ------ ---- -- ---- - ------------------ -- - - - -
2. 可以避免循环体内的无用迭代
在 for...in 循环语句中，您不能直接控制循环次数，因为它会遍历对象的所有属性，甚至包括它的原型链。如果该对象包含诸如 constructor 和 toString() 等方法，您就需要在循环体内使用额外的逻辑来排除它们。
在 for...of 循环语句中，您不需要担心这个问题，因为它只会遍历集合的元素，而不会遍历它的属性。
----- --- - ------- ------- -- --- ------- ----- -------- ---- --- ------ ----- -- ---- - ------------------- -- - - ------------------------ -- --- --- - -- ---- ------- ----- -------- ---- --- ------ ---- -- ---- - ------------------ -- --- --- -
3. 可以遍历任何可迭代对象
for...of 循环语句不仅是遍历数组的理想选择，而且可以用来遍历任何实现了可迭代协议的对象。
可迭代对象是指实现了 Iterable 接口的对象。Iterable 接口定义了一个 Symbol.iterator 方法，通过该方法返回一个 Iterator，然后可以使用该 Iterator 进行循环。
以下是 for...of 循环语句遍历 Map 和 Set 示例代码：
-- ----- -------- -- ---- ------- - --- ----- ----- - --- ----- ----- ------- ----- ------- --- --- ------ ----- ------ -- ------ - ------------------- - ----------- -- - - --- - - --- - -- ----- -------- -- ---- ------- - --- ----- ----- - --- ----------- -------- --- ------ ---- -- ------ - ------------------ -- --- --- -
示例代码：使用 for...of 循环语句进行迭代
以下是关于如何使用 for...of 循环语句遍历数组的示例代码。
----- --- - --- -- --- -- ----- -------- -- ------- ---- -- ----- --- ------ ---- -- ---- - ------------------ -- - - - -
以下是使用 for...of 循环语句遍历字符串的示例代码：
----- --- - -------- --- ------ ---- -- ---- - ------------------ -- - - - - - -
以下是使用 for...of 循环语句遍历 Map 和 Set 的示例代码：
-- ----- -------- -- ------- ---- - --- ----- ----- - --- ----- ----- ------- ----- ------- --- --- ------ ----- ------ -- ------ - ------------------- - ----------- -- - - --- - - --- - -- ----- -------- -- ------- ---- - --- ----- ----- - --- ----------- -------- --- ------ ---- -- ------ - ------------------ -- --- --- -
总结
for...of 循环语句是 ES6 中新增的语法，是对 for...in 循环语句的改进和替代，提供了更好的遍历集合和迭代器的方法，同时易于理解和编写。在未来的开发工作中，您可以优先考虑将 for...of 循环语句用于遍历数组、集合等可迭代对象。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/651e547995b1f8cacd5fca89