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

紅蓮之龍 2025-11-03 00:00:00 次阅读

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 使用以避免遍历继承属性：

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...in	for...of
遍历目标	对象的可枚举属性名（key）	可迭代对象的值（value）
适用对象	所有对象（包括数组）	数组、字符串、Map、Set 等可迭代对象
是否包含继承属性	是（需用 hasOwnProperty 过滤）	否
能否用于普通对象	可以	不可以（会报错）
顺序	不一定保证顺序（尤其非整数键）	按插入或索引顺序