在 JavaScript 中，循环语句是非常常见的语法结构。在 ES6 中，新增了一种循环语句，叫做 "for-of" 循环，它和 "for-in" 循环有着不同的功用和使用场景。本文将详细阐述 "for-in" 和 "for-of" 循环的区别，以及它们如何使用和优化。
for-in 循环
"for-in" 循环是用于遍历对象属性的语法结构，它的语法结构如下：
for (let key in object) {
// Do something with object[key]
}其中，key 是一个字符串类型的变量，表示对象的属性名；object 是一个对象类型的变量，表示要遍历的对象。循环中，每次迭代首先会把对象的属性名赋值给 key 变量，然后根据这个属性名就可以得到对象的属性值了。
示例代码：
-- -------------------- ---- ------- ----- --- - - ----- ------- ---- --- ------- ------ -- --- ---- --- -- ---- - --------------- - - - - - ---------- -
上面的代码会遍历对象 obj 中的所有属性，输出它们的键值对：
name : Jack age : 18 gender : male
由于 "for-in" 循环是用于遍历对象属性的语法结构，所以它并不适用于遍历数组。因为在 JavaScript 中，数组其实也是一个对象，而它的下标也是一个属性名。所以如果使用 "for-in" 循环遍历数组，会将数组的下标遍历到，而不是数组的元素。
for-of 循环
"for-of" 循环是用于遍历数组和其他可迭代对象的语法结构，它的语法结构如下：
for (let value of iterable) {
// Do something with value
}其中，value 是一个变量，表示数组或其他可迭代对象中的值；iterable 是一个可迭代对象，可以是数组、字符串、Set、Map 等等。
示例代码：
const arr = [10, 20, 30];
for (let value of arr) {
console.log(value);
}上面的代码会遍历数组 arr 中所有的元素，输出它们的值：
10 20 30
和 "for-in" 循环不同的是，"for-of" 循环只会遍历数组(或其他可迭代对象)的元素，而不会遍历数组的下标。这也是 "for-of" 循环的一个优点，它避免了遍历时可能遗漏元素或重复遍历元素的问题。
对比总结
从上面对 "for-in" 循环和 "for-of" 循环的介绍中，我们可以总结出它们的区别：
- "for-in" 循环用于遍历对象的属性，而 "for-of" 循环用于遍历数组和其他可迭代对象中的元素。
- "for-in" 循环返回的是属性名，而 "for-of" 循环返回的是属性值。
- "for-in" 循环可能会遍历到对象的原型链上的属性，而 "for-of" 循环不会。
- "for-in" 循环遍历对象属性的顺序是不确定的，而 "for-of" 循环遍历数组元素的顺序是确定的。
优化
在实际开发中，为了提高遍历性能，可以对 "for-in" 和 "for-of" 循环做出一些优化。具体的方式有：
- 在 "for-in" 循环中，可以通过
Object.hasOwnProperty()方法来过滤掉对象原型链上的属性。 - 在 "for-of" 循环中，如果需要获取元素下标，可以通过
Array.entries()方法把数组变成一个由[index, value]组成的新数组，然后再进行遍历。
示例代码：
-- -------------------- ---- -------
-- -------- ----
--- ---- --- -- ---- -
-- ------------------------- -
--------------- - - - - - ----------
-
-
-- -------- ----
--- ---- ------- ------ -- -------------- -
----------------- - - - - - -------
-结语
"for-in" 循环和 "for-of" 循环是 JavaScript 中常用的循环语句，它们在遍历对象和数组时都有很大的作用。但是需要注意的是，使用时要避免一些潜在的问题，并做出对应的优化，以提高遍历性能。
希望本文对读者理解 "for-in" 和 "for-of" 循环有所帮助，同时也能帮助读者在实际开发中运用到这些技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d333948841e98949ef0c5