JavaScript 中 for...in 和 for...of 的区别详解

在 JavaScript 中，for...in 和 for...of 是两种常见的循环语句，虽然它们的语法相似，但适用场景和功能却有所不同。本文将深入探讨这两种循环的区别，并通过实例帮助大家更好地理解如何使用它们。

1. for...in

for...in 主要用于遍历对象的可枚举属性，即对象的键（属性名）。它不仅会遍历对象自身的属性，还会遍历继承自原型链的属性，因此在处理普通对象时使用较为常见。

示例：

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

3
for (const key in obj) {
4
  console.log(key); // 输出 a, b, c
5
}

• 特点:

  • for...in 遍历的是对象的键（属性名或数组的索引）。
  • 它会遍历对象的所有可枚举属性，包括继承的属性。
  • 遍历顺序不一定是插入的顺序，因此不适合需要特定顺序的场景。

• 适用场景:

  • 遍历对象的属性。
  • 不推荐用于数组的遍历，因为 for...in 只遍历索引，并且顺序不一定可靠。

2. for...of

for...of 用于遍历可迭代对象（如数组、字符串、Map、Set 等）的元素。与 for...in 不同，for...of 更关注对象的值而非键，因此在处理数组、字符串等可迭代对象时更加适用。

示例：

1
const arr = [1, 2, 3];
2

3
for (const value of arr) {
4
  console.log(value); // 输出 1, 2, 3
5
}

• 特点:

  • for...of 遍历的是可迭代对象的值。
  • 适用于所有可迭代对象，如数组、字符串、Set、Map 等。
  • 不适用于普通对象，因为对象不是可迭代的。

• 适用场景:

  • 遍历数组、字符串、Set、Map 等可迭代对象的值。
  • 不适合用于遍历对象的属性。

区别总结

1. 遍历内容不同:

   • for...in 遍历的是对象的键（属性名或索引）。
   • for...of 遍历的是可迭代对象的值。

2. 适用对象不同:

   • for...in 适合用于对象遍历，也可以遍历数组的索引（但不推荐）。
   • for...of 适合用于可迭代对象，如数组、字符串、Map、Set 等。

示例对比

1
const arr = ["a", "b", "c"];
2

3
// for...in 遍历的是索引（键）
4
for (const index in arr) {
5
  console.log(index); // 输出 0, 1, 2
6
}
7

8
// for...of 遍历的是值
9
for (const value of arr) {
10
  console.log(value); // 输出 'a', 'b', 'c'
11
}

使用建议

• 如果需要遍历对象的属性，建议使用 for...in。
• 如果需要遍历数组或其他可迭代对象的值，建议使用 for...of。