for ...in 适用于可枚举的对象，迭代属性的键名；而 for ...of 适用于可迭代的对象（如数组），迭代属性的值。

JavaScript 中 for...in 和 for...of 的区别

开场
在 JavaScript 中，for...in 和 for...of 都是循环语句，但它们用途不同。

for...in

• 用于循环枚举对象的 可枚举属性，包括继承自其原型链的属性。
• 返回属性的 键名，而不是属性值。
• 经常用于遍历对象键。

for...of

• 用于循环遍历 可迭代的对象，如数组、字符串和集合。
• 返回对象的 值，而不是键名。
• 经常用于遍历收藏的元素。

主要区别

示例

for...in 对象遍历：

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

for (const key in obj) {
  console.log(key); // 输出: "name", "age"
}

for...of 数组遍历：

const arr = [1, 2, 3, 4, 5];

for (const element of arr) {
  console.log(element); // 输出: 1, 2, 3, 4, 5
}