近日，于闲暇之时，我沉浸于 JavaScript 之经典著作犀牛书，当阅览至循环语句部分，顿觉有必要予以记录。

for/of 与 for/in 乃是工作中屡被运用的语句，for/of 是 ES6 新增的，而 for/in 是JavaScript从一开始就有的，以下将记录下它们之间的主要差异。

主要区别

示例比较

1.遍历数组

const arr = ['a', 'b', 'c'];

// for...in 遍历索引/键名
for (let index in arr) {
  console.log(index); // 输出: 0, 1, 2
}

// for...of 遍历值
for (let value of arr) {
  console.log(value); // 输出: 'a', 'b', 'c'
}

2.遍历对象

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

// for...in 可以遍历对象属性
for (let key in obj) {
  console.log(key); // 输出: 'a', 'b', 'c'
}

// for...of 不能直接用于普通对象
// 会抛出 TypeError: obj is not iterable
try {
  for (let value of obj) {
    console.log(value);
  }
} catch (e) {
  console.log(e.message); 
}

3.原型链上的属性

function Person() {
  this.name = 'Alice';
}
Person.prototype.age = 25;

const person = new Person();

// for...in 会遍历原型链上的可枚举属性
for (let prop in person) {
  console.log(prop); // 输出: 'name', 'age'
}

// 可以使用 hasOwnProperty 过滤
for (let prop in person) {
  if (person.hasOwnProperty(prop)) {
    console.log(prop); // 输出: 'name'
  }
}

4.遍历字符串

const str = "hello";

// for...in 遍历索引
for (let index in str) {
  console.log(index); // 输出: 0, 1, 2, 3, 4
}

// for...of 遍历字符
for (let char of str) {
  console.log(char); // 输出: 'h', 'e', 'l', 'l', 'o'
}

5.遍历其他可迭代对象

const set = new Set([1, 2, 3]);

// for...in 不适用于 Set
for (let prop in set) {
  console.log(prop); // 不输出任何内容
}

// for...of 可以遍历 Set 的值
for (let value of set) {
  console.log(value); // 输出: 1, 2, 3
}

何时使用

• 使用 for/in 当你需要遍历对象的属性名
• 使用 for/of 当你需要遍历数组、字符串或其他可迭代对象的值

在 ES6 及更高版本中，对于数组遍历，通常推荐使用 for/of 而不是 for/in，因为它直接提供值而不是索引，并且不会意外遍历到数组的非数字属性。