for in与for of的区别

在JavaScript中，for…in和for…of都是用来遍历集合的循环控制结构，但它们之间存在一些重要的区别：

1. 用途不同： for…in循环用于遍历对象的属性。 for…of循环用于遍历可迭代对象（如数组，字符串，Set，Map等）的值。
2. 遍历的内容不同： for…in会遍历对象所有的可枚举属性，包括原型链上的属性。 for…of遍历的是可迭代对象的实际值，不包括原型链上的值。
3. 循环控制不同： for…in循环使用对象的属性名作为循环变量的值。 for…of循环使用迭代器的值作为循环变量的值。
4. 语法结构不同： for…in语法：

for (let 变量 in 对象) {
  // 使用变量来引用属性名
}

for…of语法：

for (let 变量 of 可迭代对象) {
  // 使用变量来引用迭代器的值
}

1. 迭代的可选性不同： for…in循环中，即使属性是undefined或原型链上的属性，只要可枚举，也会被遍历到。 for…of循环中，只有可迭代对象中实际存在的值才会被遍历到。
2. 与数组的索引关系： for…in不直接与数组的索引相关联，所以不能直接获取索引。 for…of可以与数组的索引相关联，通过数组的entries()方法，可以同时获取索引和值。

// 对象
const obj = { a: 1, b: 2, c: 3 };

// 使用 for...in 遍历
for (let key in obj) {
  console.log(key, obj[key]); // 输出 a=1, b=2, c=3
}

// 数组
const arr = [10, 20, 30];

// 使用 for...of 遍历
for (let value of arr) {
  console.log(value); // 输出 10, 20, 30
}

// 使用 for...of 遍历数组索引和值
for (let [index, value] of arr.entries()) {
  console.log(index, value); // 输出 0=10, 1=20, 2=30
}

在实际开发中，选择哪种循环结构通常取决于要遍历的数据类型和具体需求。