在传统的 JavaScript 编程中，我们通常使用 for 循环来遍历数组和对象。但是，ES6 引入了 for...of 循环语句，使得在循环过程中迭代元素变得更加方便。
为什么要使用 for...of 循环
在介绍 for...of 循环之前，让我们先来看一下 for 循环存在的问题。for 循环需要手动追踪计数器以进行迭代，这可能会导致不必要的代码复杂性和错误，尤其是当处理异步操作时。此外，使用 for 循环来遍历对象也相对困难。
for...of 循环提供了一种更简单且直观的方法来迭代数组和对象中的元素。它消除了传统 for 循环引入的计数器和索引引用，而是专注于返回迭代数据本身。同时，for...of 循环还支持可迭代的对象，如字符串、Set、Map 等。
用法
语法格式如下：
--- ------ ----- -- --------- - -- --------- ---- ----- -
iterable 参数可以是一个数组或者任何实现了迭代协议的对象，包括 Set、Map、字符串、Arguments 对象等。
----- ---- - --------- ------ -------- --- ------ --- -- ----- - ----------------- - -- ------- ----- --- ----
我们还可以迭代对象的键值对。这是因为 Object.entries() 函数会返回一个由对象所有可枚举属性的键值对组成的数组。
----- ------- - - ----- -------- ---- --- ------ --- - --- ----------- ------ -- ------------------------ - -------------------- ----------- - -- ------- ----- ----- ---- -- ------ -
for...of 循环和 forEach 的比较
for...of 循环与 forEach() 方法有许多相似之处，但它们之间也存在一些区别。for...of 循环在处理异步操作时更加方便，而 forEach() 方法则不太灵活，只支持同步代码。另外，for...of 循环允许我们使用 break 和 continue 控制循环流程，而 forEach() 则不支持。
结论
for...of 循环提供了一种优雅地遍历数组和对象元素的方法。不仅它消除了传统 for 循环的计数器问题，同时使得代码更加简洁易懂。更重要的是，在处理异步操作时，for...of 循环能够大大简化代码复杂性和错误率。所以，在 ES6 中，我们可以优先选择使用 for...of 循环来遍历数组和对象。
示例代码
-- ------ ----- ---- - --------- ------ -------- --- ------ --- -- ----- - ----------------- - -- -------- ----- ------- - - ----- -------- ---- --- ------ --- - --- ----------- ------ -- ------------------------ - -------------------- ----------- -
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672d03e1ddd3a70eb6d9a7e4