JS进阶必看！for…of和for…in的区别深度解读

还在傻傻分不清`for...in`和`for...of`的区别？本文带你彻底搞懂！作为JS进阶的必备知识点，`for...in`主要用于遍历对象的键名（key），而`for...of`则专注于遍历可迭代对象的值（value）。本文将深入解析`for...in`和`for...of`的用法、适用场景及注意事项。`for...in`遍历对象属性时需注意原型链问题，建议配合`hasOwnProperty`使用；`for...of`则更适用于数组、字符串等可迭代结构，提供更简洁直观的遍历方式。想要同时获取键和值？`Object.entries()`结合`for...of`是你的不二之选。掌握这些技巧，让你在JavaScript开发中游刃有余，写出更高效、更安全的代码！别再犹豫，快来学习吧！

for...in 遍历对象键，for...of 遍历可迭代值。1. for...in 用于遍历对象的键名，适用于对象和数组，但遍历数组时可能包含原型链属性，需配合 hasOwnProperty 使用；2. for...of 用于遍历可迭代对象（如数组、字符串、Map等）的值，更直观安全，但不适用于普通对象；3. 若需同时获取键和值，可用 Object.entries() + for...of；4. 根据数据类型选择合适方式：对象用 for...in，可迭代结构用 for...of。

在JavaScript中，for...of 和 for...in 看起来很像，但它们的作用和适用对象完全不同。简单来说，for...in 用于遍历对象的键（key），而 for...of 用于遍历可迭代对象的值（value）。

for...in：遍历对象的键

for...in 主要用于遍历对象的可枚举属性名（也就是键）。它适用于普通对象、数组也可以用，但使用时需要注意一些细节。

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

for (let key in obj) {
  console.log(key); // 输出 'a', 'b', 'c'
}

常见用途和注意事项：

• 遍历的是键名，不是值，所以需要通过 obj[key] 来获取值。
• 不建议直接用于数组遍历时，因为：
  • 它遍历的是索引（字符串形式），但还可能包括原型链上的属性。
  • 顺序不一定可靠（虽然ES6后基本有序了）。
• 使用前最好加上 hasOwnProperty 判断，避免遍历到继承来的属性。

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

for...of：遍历可迭代对象的值

for...of 只能用于可迭代对象，比如数组、字符串、Map、Set、NodeList等。

const arr = [10, 20, 30];

for (let value of arr) {
  console.log(value); // 输出 10, 20, 30
}

特点和适用场景：

• 直接拿到值，不需要再通过索引来取。
• 更适合数组、字符串这种有顺序的结构。
• 不适用于普通对象，除非给对象设置了 Symbol.iterator。

如果你写 for...of 遍历一个普通对象，会报错：“obj is not iterable”。

哪个更适合我？

这个问题取决于你要遍历的对象类型和目的：

小贴士：别混淆了！

• for...in 是为对象设计的，但也能“凑合”遍历数组，只是容易出问题。
• for...of 更现代，更安全，但不能用于普通对象。
• 如果你不小心把 for...of 用在非可迭代对象上，浏览器会报错。

基本上就这些区别。记住它们各自的用途，根据数据结构选择合适的方式就行。

理论要掌握，实操不能落！以上关于《JS进阶必看！for…of和for…in的区别深度解读》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！