For of vs For in - Javascript

在Javascript中，for...of与for...in是两种不同的循环类型，使用时需要注意它们之间的区别。

for...in

for...in用于遍历对象的属性，语法如下：

for (variable in object) {
  // 执行代码块
}

其中，variable表示每一个属性名，并且是字符串类型。object则是要遍历的对象。

以下是一个遍历对象属性的例子：

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

for (let prop in obj) {
  console.log(prop); // a, b, c
  console.log(obj[prop]); // 1, 2, 3
}

在上面的示例中，prop是表示对象obj的属性，而obj[prop]则用于访问属性的值。

需要注意的是，for...in遍历的是对象的属性名，不是属性值。因此，如果只需要访问对象的值而不关心属性名，则不建议使用for...in循环，而是应该使用Object.values()函数来获取对象的值。

for...of

for...of用于遍历可迭代对象（iterable objects），语法如下：

for (variable of iterable) {
  // 执行代码块
}

其中，variable表示迭代的每一个值，并且可以是任何类型。iterable则是要迭代的对象，一般是数组或类数组对象。

以下是一个遍历数组的例子：

const arr = [1, 2, 3];

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

在上面的示例中，val表示数组中的每一个元素值。可以看到，使用for...of循环，可以遍历数组的元素值而不是数组的索引。

需要注意的是，for...of循环只能用于迭代可迭代对象，不能用于普通的对象。普通的对象是不能被迭代的，因为它们没有定义[Symbol.iterator]方法。

区别

for...in与for...of两者的最明显的区别是，前者用于遍历对象属性，后者用于遍历可迭代对象。此外，它们的工作方式也有所不同。在for...in循环中，循环变量表示对象的属性名，而在for...of循环中，循环变量表示对象的每一个值。

以下是一个比较for...in与for...of的例子：

const arr = ['one', 'two', 'three'];
const obj = { a: 1, b: 2, c: 3 };

for (let prop in arr) {
  console.log(prop); // 0, 1, 2
  console.log(arr[prop]); // 'one', 'two', 'three'
}

for (let val of arr) {
  console.log(val); // 'one', 'two', 'three'
}

for (let prop in obj) {
  console.log(prop); // a, b, c
  console.log(obj[prop]); // 1, 2, 3
}

for (let val of obj) {
  console.log(val); // TypeError: obj is not iterable
}

在上面的代码中，可以看到在for...in循环中，prop返回的是数组或对象的索引或属性名，而在for...of循环中，val返回的是数组或对象的每一个元素值或属性值。此外，可以看到在for...of循环中，如果遍历的不是可迭代对象，则会抛出TypeError异常。

总之，当需要遍历对象属性时，建议使用for...in循环，而在需要遍历可迭代对象时，建议使用for...of循环。此外，如果需要访问对象的属性值而不关心属性名，则可以使用Object.values()方法来获取属性值。