for...in 和 for...of 循环详解：如何高效遍历 JavaScript 对象

for...in 和 for...of 循环：深入理解 JavaScript 遍历对象的两种方法

作为经验丰富的程序员和技术作家，我将在这个博客文章中深入探讨 JavaScript 中 for...in 和 for...of 循环之间的区别。这些循环是遍历对象的不同方式，了解它们的差异对于有效地操纵数据结构至关重要。

for...in 循环

for...in 循环遍历对象的键名 ，即属性的名称。它会遍历对象中的所有属性，包括继承的和不可枚举的属性。这使得 for...in 循环非常适合检查对象中有哪些属性，或者迭代对象的键值对。

示例：

const obj = { name: "John", age: 30 };

for (const key in obj) {
  console.log(key); // logs "name" and "age"
}

优点：

• 遍历对象的所有键名，包括继承的和不可枚举的键名。
• 常用于检查对象中有哪些属性。

缺点：

• 不会遍历对象的实际值，只遍历键名。
• 可能导致意外行为，因为不可枚举属性通常是故意隐藏的。

for...of 循环

for...of 循环遍历对象的可枚举值 。它只能遍历对象中的可枚举属性，而不会遍历继承的属性或不可枚举属性。这使得 for...of 循环非常适合迭代对象中实际的数据，而不是属性名称。

示例：

const arr = [1, 2, 3];

for (const value of arr) {
  console.log(value); // logs 1, 2, and 3
}

优点：

• 遍历对象的实际值，而不是键名。
• 仅遍历可枚举属性，避免了意外行为。
• 非常适合迭代对象中的数据。

缺点：

• 不会遍历对象的所有属性，只会遍历可枚举属性。
• 不能用于检查对象中有哪些属性。

选择哪个循环？

选择 for...in 或 for...of 循环取决于你的特定需求。如果你需要遍历对象的键名，包括继承的和不可枚举的键名，请使用 for...in。如果你需要遍历对象的实际值，请使用 for...of。

结论

for...in 和 for...of 循环是遍历 JavaScript 对象的两种强大工具。通过理解它们的差异和适当使用它们，你可以有效地操纵数据结构并编写高效的代码。

常见问题解答

1. 如何使不可枚举属性变为可枚举？

你可以使用 Object.defineProperty() 方法并设置 enumerable 属性为 true 来使不可枚举属性变为可枚举。

2. for...in 循环遍历对象的顺序是什么？

for...in 循环遍历对象的键名的顺序是未定义的，它可能会根据不同的 JavaScript 引擎而有所不同。

3. for...of 循环会遍历数组的键名吗？

不会。for...of 循环只遍历数组的可枚举值，即数组的元素。

4. 可以在 for...of 循环中修改数组元素吗？

可以。for...of 循环使用引用传递，因此你可以直接修改数组元素。

5. for...in 和 for...of 循环的性能差异是什么？

for...of 循环通常比 for...in 循环更快，因为它只遍历可枚举属性，而 for...in 循环会遍历所有属性。