JavaScript for in 遍历和 for of 遍历的区别

JavaScript for in 遍历和 for of 遍历的区别

在 JavaScript 中，for...in 和 for...of 是两种常用的遍历方法，但它们适用于不同的场景，并有各自的特点和限制。以下是它们的主要区别：

for...in

1. 遍历对象属性：

   • for...in 主要用于遍历对象的可枚举属性（包括原型链上的属性，除非使用 hasOwnProperty）方法进行过滤。
   • 适用于对象 （Object）、数组（Array）等。

2. 枚举顺序：

   • 属性的遍历顺序是根据对象的创建顺序（在 ES2015 及更高版本中，这种顺序得到了规范，称为“枚举顺序”）。
   • 对于数组，遍历顺序通常是按照索引顺序，但这不是严格保证的，最好使用 for...of 遍历数组。

3. 示例：

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
 if (obj.hasOwnProperty(key)) {
   console.log(key, obj[key]);
 }
}
// 输出: a, 1、a, 2、a, 3

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

for (const key in arr) {
 console.log(key);
}
// 输出: 0 1 2

function Paramter() {
 for (const key in arguments) {
   console.log(key);
 }
}

Paramter(1, 2, 3);
// 输出: 0 1 2

4. 原型链上的属性：
   • for...in 会遍历对象原型链上的可枚举属性，除非显式过滤。

for...of

1. 遍历可迭代对象：

   • for...of主要用于遍历可迭代对象（ iterable objects）如数组（Array）、字符串（String）、Map、Set、TypedArray等。
   • 适用于任何实现了迭代器的对象。

2. 直接遍历值

   • for...of 直接遍历对象的值，而不是键（或属性名）。

3. 示例

const arr = [1, 2, 3];
for (const value of arr) {
  console.log(value);
}
// 输出: 1, 2, 3

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

function Paramter() {
  for (const key of arguments) {
    console.log(key);
  }
}

Paramter(1, 2, 3);
// 输出: 1 2 3 

4. 不遍历对象属性：

   • for...of不能用于普通对象的属性遍历，只能用于可迭代对象。

总结

for...in：

• 遍历对象的可枚举属性（包括原型链上的属性）。
• 适用于对象、数组等，但遍历数组时最好使用 for...of。
• 遍历的是属性名（键）。

for...of:

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

选择使用哪种遍历方法取决于你要遍历的数据类型以及你希望获取的是键还是值。