JavaScript 中的 `for...in` 和 `for...of`

JavaScript 中的 for...in 和 for...of 是两种常用的迭代循环语句。它们的用途和行为是不同的。

for...in 循环用于循环遍历对象的属性，它会遍历对象的可枚举属性和原型链上的可枚举属性。

const obj = { a: 1, b: 2 };
for (let prop in obj) {
  console.log(prop);  // 输出 'a' 和 'b'
}

上面的代码遍历了 obj 对象的所有属性，并输出了属性名称。

需要注意的是，for...in 循环不保证属性遍历的顺序是固定的，所以不能在遍历对象的时候依赖属性遍历的顺序。

另外，for...in 循环还有一个重要的用途，就是遍历对象的原型链上的属性。

function Person() {
  this.name = 'Tom';
}

Person.prototype.age = 18;

const p = new Person();

for (let prop in p) {
  console.log(prop);  // 输出 'name' 和 'age'
}

上面的代码中，p 对象既有自己的属性，也有继承自原型的属性。for...in 循环可以同时遍历这两种属性。

for...of 循环用于遍历可迭代对象（包括 Array、Map、Set、String 等对象）的元素。它只遍历对象的值，而不是键或者属性。

const arr = ['a', 'b', 'c'];
for (let item of arr) {
  console.log(item);  // 输出 'a'、'b'、'c'
}

上面的代码遍历了 arr 数组中所有的元素，并输出每个元素的值。

另外，需要注意的是，for...of 循环只能用于遍历迭代对象的值，而不能用于遍历对象的属性。如果用于非迭代对象上，将会出现类型错误的异常。

const obj = { a: 1, b: 2 };
for (let item of obj) {
  console.log(item);  // 抛出 TypeError 异常： obj is not iterable
}

上面的代码中，obj 不是一个可迭代对象，所以使用 for...of 循环将会抛出一个 TypeError 异常。