for...in和for...of是JavaScript中用于遍历数据结构（如数组、对象等）的两种不同的循环方式。

  1. for...in循环：

  • for...in用于遍历对象的可枚举属性。

  • 在每次迭代中，变量会被赋值为当前属性名。

  • 适用于遍历对象属性，不适用于遍历数组或类似数组的对象。

示例：

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

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

  1. for...of循环：

  • for...of用于遍历可迭代对象（如数组、字符串、Set、Map等）中的元素。

  • 在每次迭代中，变量会被赋值为当前元素的值。

  • 适用于遍历数据结构中的元素，不适用于遍历对象属性。

示例：

const arr = [1, 2, 3];

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

需要注意的是，for...in遍历的是对象的属性名，而for...of遍历的是对象的属性值或数组的元素值。另外，for...in不保证遍历顺序，而for...of遍历的是有序集合（例如数组）的元素顺序。

总结：

  • for...in用于遍历对象的属性名，适用于遍历对象。

  • for...of用于遍历可迭代对象的元素值，适用于遍历数组和类似数组的对象。