JS for…in和for…of迭代区别

在JavaScript中，for...in和for...of是用于迭代数组和对象的两种不同的语法结构。它们之间的区别如下：

for...in循环用于遍历对象的可枚举属性。它会将对象的每个可枚举属性作为循环变量来进行迭代，作用于对象就是遍历对象的key，作用于数组就会遍历数组的index。示例：

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

for (let prop in obj) {
  console.log(prop); // 输出：a, b, c
}

const obj = [a,s,c,d];

for (let prop in obj) {
  console.log(prop); // 输出：0,1,2,3
}

for...of循环用于迭代可迭代对象（如数组、字符串等）的值。它会直接返回可迭代对象的每个元素值，而不是索引或属性。示例：

const arr = [1, 2, 3];

for (let value of arr) {
  console.log(value); // 输出：1, 2, 3
}

所以总结一下，for...in用于遍历对象的属性，for...of用于遍历可迭代对象的值。

需要注意的是：在JavaScript中，for...of循环不能直接用于遍历普通对象，因为普通对象并不是可迭代对象。可迭代对象是指实现了Symbol.iterator方法的对象（如数组、字符串等）。

如果你要遍历普通对象的属性，可以使用for...in循环来实现。这样可以迭代对象的可枚举属性，包括从原型链继承的属性。

示例：

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

for (let prop in obj) {
  console.log(prop); // 输出：a, b, c
}

如果你想要使用for...of循环遍历对象的属性值，可以将对象转换为可迭代对象，或者使用其他方法来实现。

示例1：将对象转换为可迭代对象

const obj = { a: 1, b: 2, c: 3 };
const iterable = Object.values(obj);

for (let value of iterable) {
  console.log(value); // 输出：1, 2, 3
}

示例2：使用Object.entries()方法获取键值对数组，然后使用for...of循环遍历

const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);

for (let [key, value] of entries) {
  console.log(key, value); // 输出：a 1, b 2, c 3
}

总而言之，for...of循环不直接适用于普通对象，但可以通过转换对象为可迭代对象的方式来遍历对象的属性值。