JavaScript 中 for...in 和 for...of 循环的区别是什么？

推荐答案

在 JavaScript 中，for...in 和 for...of 是两种不同的循环结构，它们的主要区别在于遍历的对象类型和遍历的内容：

• for...in：用于遍历对象的可枚举属性（包括原型链上的属性），通常用于遍历对象的键（key）。
• for...of：用于遍历可迭代对象（如数组、字符串、Map、Set 等）的元素值（value），通常用于遍历数组或类数组对象的值。

本题详细解读

for...in 循环

• 用途：for...in 循环用于遍历对象的可枚举属性。它会遍历对象自身的属性以及继承自原型链的属性。
• 语法：

  for (let key in object) {
    // 使用 key 访问对象的属性
  }

• 示例：

  const obj = { a: 1, b: 2, c: 3 };
  for (let key in obj) {
    console.log(key); // 输出: a, b, c
  }

• 注意事项：
  • for...in 遍历的是对象的键（key），而不是值（value）。
  • 如果对象有继承的属性，这些属性也会被遍历到。
  • 不推荐使用 for...in 遍历数组，因为它会遍历数组的所有可枚举属性，包括非数字键和原型链上的属性。

for...of 循环

• 用途：for...of 循环用于遍历可迭代对象（如数组、字符串、Map、Set 等）的元素值。
• 语法：

  for (let value of iterable) {
    // 使用 value 访问元素值
  }

• 示例：

  const arr = [1, 2, 3];
  for (let value of arr) {
    console.log(value); // 输出: 1, 2, 3
  }

• 注意事项：
  • for...of 遍历的是可迭代对象的值（value），而不是键（key）。
  • for...of 不能直接用于普通对象，因为普通对象不是可迭代的。如果需要遍历对象的属性，应该使用 for...in 或 Object.keys() 等方法。

总结对比