循环for - in 和 for - of 的异同

for...in 和 for...of 是两种用于迭代的循环结构，它们有不同的用途和行为。下面是它们的主要区别：

for...in

• 用途: for...in 用于遍历对象的可枚举属性。

• 遍历内容: 它遍历对象的键（属性名），包括继承的属性（通过原型链）。

• 适用对象: 适合用于对象的属性遍历，不适用于数组或其他可迭代对象。

• 注意: 遍历顺序是无保证的，不一定是插入顺序。它也会遍历从原型链继承的属性。

• 用法

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

for (let key in obj) {
  console.log(key, obj[key]);
}

// 输出
a 1
b 2
c 3

for...of

• 用途: for...of 用于遍历可迭代对象（如数组、字符串、集合、映射等）。

• 遍历内容: 它遍历的是可迭代对象的值。

• 适用对象: 适合用于数组、字符串、Map、Set 和其他实现了迭代协议的对象。

• 注意: 遍历顺序是与插入顺序一致的。

• 用法

const arr = [10, 20, 30];

for (let value of arr) {
  console.log(value);
}

// 输出
10
20
30

关键区别总结

• 迭代对象:

  • for...in 迭代对象的属性名。
  • for...of 迭代可迭代对象的值。

• 适用场景:

  • for...in 主要用于对象的属性。
  • for...of 主要用于数组、字符串及其他可迭代对象。

• 继承属性:

  • for...in 会遍历对象及其原型链上的可枚举属性。
  • for...of 不会遍历原型链上的属性，仅关注对象的实际值。

注意: 在编程中，for...of 更常用于数组和其他可迭代对象的遍历，而 for...in 主要用于遍历对象的属性。

JavaScript基础