在 JavaScript 中，我们使用循环来遍历数组和对象等数据。在 ES11（也称为 ES2020）中，for-in 和 for-of 循环都有了一些新的改进。那么，它们之间有什么差异和优缺点呢？
for-in 循环
for-in 循环用于遍历对象的可枚举属性。
语法：
--- --------- -- ------- - -- ---- ----- -- -- -------- -
- variable：定义的一个变量，用于遍历 object。
- object：要遍历的对象。
例如：
----- --- - --- -- -- -- -- --- --- ---- ---- -- ---- - ----------------- ----------- - -- ------- -- - - -- - - -- - -
这段代码遍历了 obj 对象的所有可枚举属性，并输出其属性名和属性值。
优点
- 用于遍历对象属性，而不是数组元素；
- 可以遍历对象原型链上的属性。
缺点
- 遍历数组会遍历数组的索引；
- 遍历对象属性的顺序不确定；
- 不能遍历对象的 Symbol 属性。
for-of 循环
for-of 循环用于遍历可迭代对象，如数组、字符串、Map、Set 等。
语法：
--- --------- -- --------- - -- ---- ----- -- -- -------- -
- variable：定义的一个变量，用于遍历 iterable。
- iterable：要遍历的可迭代对象。
例如：
----- --- - --- -- --- --- ---- ---- -- ---- - ------------------ - -- ------- -- - -- - -- -
这段代码遍历了 arr 数组的所有元素，并输出它们的值。
优点
- 用于遍历数组元素，而不是对象属性；
- 遍历顺序是确定的；
- 可以遍历字符串、Map、Set 等可迭代对象。
缺点
- 不能遍历对象的属性；
- 不能遍历对象原型链上的属性。
实例比较
下面通过几个示例来比较 for-in 和 for-of 循环的不同之处。
遍历数组
----- --- - --- -- --- -------- - --- ------- -- ------ ----- --- ---- --- -- ---- - ----------------- - -- ------- -- - -- - -- - -- ---- -- ------ ----- --- ---- ---- -- ---- - ------------------ - -- ------- -- - -- - -- -
从上面的示例可以看出，for-in 循环会遍历数组的索引和 name 属性，而 for-of 循环只会遍历数组的元素。
遍历对象
----- --- - --- -- -- -- -- --- -- ------ ----- --- ---- --- -- ---- - ---------------- ---------- - -- ------- -- - - -- - - -- - - -- ------ --------
从上面的示例可以看出，for-in 循环可以遍历对象的属性，而 for-of 循环无法遍历对象。
遍历 Map
----- --- - --- ----- -------- --------- ------- ---- ---------- ------- --- -- ------ ----- --- ---- --- -- ---- - ---------------- ---------- - -- ------- -- -- ------ -- ------ ----- --- ---- ----- ------ -- ---- - ---------------- ------- - -- ------- -- ---- ----- -- --- -- -- ------ ----
从上面的示例可以看出，for-in 循环无法正确遍历 Map，而 for-of 循环可以正确遍历 Map。
总结
从上面的内容可以看出，for-in 和 for-of 循环都有各自的优缺点，应根据需要选择使用。
- 如果需要遍历对象属性，使用 for-in 循环；
- 如果需要遍历数组元素或其他可迭代对象，使用 for-of 循环。
另外，需要注意的是，在使用 for-in 循环时要注意遍历顺序不确定，遍历数组会包括数组的索引，不能遍历 Symbol 属性；在使用 for-of 循环时要注意不能遍历对象属性。
希望本文对了解 ES11 中的 for-in 和 for-of 循环有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6470009f968c7c53b0e29715