ES6中for...of循环与for...in循环有何不同？

for...of 和 for...in 是 ES6 中两种不同的循环结构，它们之间存在一些重要的区别。

文末有我帮助400多位同学成功领取到前端offer的场景题哦

for…in 循环

for...in 循环主要用于遍历对象的可枚举属性（包括对象自身的和继承自原型链的属性）。

语法：

for (variable in object) {
  // 在每次迭代中，variable 会被赋予 object 的一个属性名
  // 然后你可以使用 object[variable] 来访问该属性的值
}

特点：

• 遍历对象的可枚举属性。
• 也会遍历到原型链上的属性（除非使用 hasOwnProperty 方法进行过滤）。
• 遍历的顺序基于属性的枚举顺序（通常按照属性被添加到对象的顺序，但也可能受到JavaScript引擎实现的影响）。
• for...in 循环适用于遍历对象的属性，而不是数组（尽管它也可以遍历数组索引，但这不是推荐用法）。

for…of 循环

for...of 循环主要用于遍历可迭代对象（包括 Array、Map、Set、String、TypedArray、函数的 arguments 对象等等）。

语法：

for (variable of iterable) {
  // 在每次迭代中，variable 会被赋予 iterable 的一个元素值
}

特点：

• 遍历可迭代对象的元素。
• 不会遍历到原型链上的属性。
• 遍历的顺序是迭代器定义的顺序。
• for...of 循环特别适用于遍历数组、类数组对象（如arguments对象）和可迭代对象（如Map、Set等）。

示例

for…in 示例：

let 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 示例：

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

总结

• 使用 for...in 遍历对象属性，但可能会遍历到原型链上的属性。
• 使用 for...of 遍历可迭代对象的元素，通常用于数组、Map、Set 等数据结构。
• 在遍历数组时，for...of 是更合适的选择，因为它不会遍历到数组索引（除非数组本身包含这些索引作为元素），而且语法更简洁。

堪称2024最强的前端面试场景题，让421人成功拿到offer