for...in vs for...of

在JavaScript中，有两种常见的循环方法：for...in和for...of。这两种方法都可以用于遍历数组和对象，但它们的用法和特点是不同的。

for...in

for...in语句用于遍历一个对象的属性，它会枚举对象的所有可枚举属性，包括继承自原型链上的属性。

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

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}
// 输出:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

可以看到，在遍历对象的属性时，for...in会遍历对象的所有可枚举属性，包括obj原型链上的属性，所以需要使用hasOwnProperty()方法过滤掉原型链上的属性。

const obj = {a: 1, b: 2, c: 3};
Object.prototype.d = 4;

for (const prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(`obj.${prop} = ${obj[prop]}`);
  }
}
// 输出:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

for...of

for...of语句用于遍历可迭代对象，包括数组、字符串、Set、Map等。for...of语句本质上就是调用可迭代对象的Symbol.iterator方法获取迭代器，然后使用迭代器遍历可迭代对象。

const arr = [1, 2, 3];

for (const val of arr) {
  console.log(val);  
}
// 输出:
// 1
// 2
// 3

可以看到，在遍历数组时，for...of语句遍历数组的值，而不是数组的索引或属性名。

const str = "hello";

for (const char of str) {
  console.log(char);  
}
// 输出:
// "h"
// "e"
// "l"
// "l"
// "o"

在遍历字符串时，for...of遍历字符串的每个字符。

总结

for...in用于遍历对象的可枚举属性，包括原型链上的属性。for...of用于遍历可迭代对象的值。需要注意的是，在遍历对象时需要使用hasOwnProperty()方法过滤掉原型链上的属性。