JavaScript中for…of与for…in循环区别_javascript技巧

for…in遍历对象的可枚举属性名，包括继承属性，适用于对象；for…of遍历可迭代对象的值，如数组、字符串等，不适用于普通对象。

for…of 和 for…in 是 JavaScript 中两种不同的循环语法，虽然写法相似，但用途和行为有本质区别。理解它们的差异有助于在实际开发中正确选择使用场景。

for…in 遍历对象的键（key）

for…in 用于遍历对象的**可枚举属性名**（即键），包括自身和继承的属性（来自原型链）。它适用于普通对象，不推荐用于数组。

常见用法：

• 遍历对象的所有可枚举属性
• 获取属性名进行操作

const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  console.log(key); // 输出: “a”, “b”, “c”
}

注意：如果对象的属性来自原型链或被设置为不可枚举，可能不会按预期输出。建议配合 hasOwnProperty 使用以避免遍历继承属性：

立即学习“Java免费学习笔记（深入）”；

Check for AI

在论文、电子邮件等中检测AI书写的文本

88

查看详情

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

for…of 遍历可迭代对象的值（value）

for…of 用于遍历实现了 Iterable 接口的对象，如数组、字符串、Map、Set、arguments 等。它直接获取的是元素的值，而不是键。

适用对象：

• Array
• String
• Map
• Set
• arguments
• NodeList（DOM 节点集合）

const arr = [10, 20, 30];
for (let value of arr) {
  console.log(value); // 输出: 10, 20, 30
}
const str = “hi”;
for (let char of str) {
  console.log(char); // 输出: “h”, “i”
}

for…of 不适用于普通对象，因为普通对象默认不可迭代。尝试对普通对象使用会报错：

const obj = { a: 1 };
// for (let v of obj) { } // 报错：obj is not iterable

关键区别总结

使用建议

• 遍历数组元素值时，优先使用 for…of
• 遍历对象的属性时，使用 for…in，并检查 hasOwnProperty
• 需要同时获取索引和值时，数组可用 entries() 配合 for…of：

for (let [index, value] of arr.entries()) {
  console.log(index, value);
}

基本上就这些。掌握它们的核心差异，能让你写出更清晰、安全的循环代码。