JavaScript中的for...in和for...of循环对比分析

for…in 循环

• 特点:

  • 循环遍历对象的可枚举属性，包括自身和原型链上的属性。
  • 可以用于遍历对象的属性，不建议用于数组遍历。

• 示例：

  const obj = { a: 1, b: 2, c: 3 };
  for (let key in obj) {
  	console.log(key, obj[key]);
  }

for…of 循环

• 特点:

  • 用于遍历可迭代对象（如数组、字符串、Map、Set 等），支持迭代器协议。
  • 只会遍历可迭代对象自身的元素，不包括原型链上的属性。

• 示例：

  const arr = [1, 2, 3];
  for (let item of arr) {
  	console.log(item);
  }

对比分析

• 适用对象：

  • for…in 适用于遍历对象的属性，而 for…of 适用于遍历可迭代对象的元素。

• 遍历顺序：

  • for…in 遍历的顺序不确定，可能不按照属性插入的顺序；for…of 按照对象的迭代顺序进行遍历。

• 遍历内容：

  • for…in 遍历对象的属性，包括继承的属性；for…of 只遍历对象自身的元素。

• 性能：

  • for…of 比 for…in 更高效，因为 for…of 只涉及迭代对象的元素。

根据需求选择合适的循环方式，for…in 适用于遍历对象属性，for…of 适用于遍历可迭代对象的元素。注意在遍历数组时，推荐使用 for…of 而不是 for…in。