局域网站点建设方案网站开发总体设计

在 JavaScript 中，for...in 和 for...of 是两种不同的循环语法，主要区别在于迭代的对象类型和返回值：

1. for...in 循环

• 用途：遍历对象的可枚举属性（包括原型链上的属性）

• 返回值：对象的键（key）（字符串类型）

• 适用对象：普通对象（Plain Object）

• 特点：

  • 遍历键名（包括继承的可枚举属性）

  • 不保证顺序（尤其对数字键）

  • 不推荐用于数组（会遍历非数字键，且顺序可能混乱）

javascript

复制

下载

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

2. for...of 循环

• 用途：遍历可迭代对象（Iterable）的值

• 返回值：对象的值（value）

• 适用对象：数组、字符串、Map、Set、NodeList 等实现了 [Symbol.iterator] 接口的对象

• 特点：

  • 直接获取值

  • 保证迭代顺序

  • 不能直接遍历普通对象（默认不可迭代）

javascript

复制

下载

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

---

🔑 关键区别总结

特性	for...in	for...of
迭代内容	对象的键（key）	对象的值（value）
适用对象	普通对象	可迭代对象（数组/Map/Set等）
原型链属性	会遍历继承的属性	不会遍历
数组使用	不推荐（遍历索引，可能混乱）	推荐（直接遍历值）
普通对象支持	✅ 支持	❌ 默认不支持
顺序保证	不保证顺序	保证迭代顺序

---

⚠️ 注意事项

1. 数组遍历：

   javascript

   复制

   下载

   // 不推荐：for...in 会包含非数字键，且顺序不可靠
   const arr = [10, 20, 30];
   arr.foo = "bar"; // 添加非数字属性for (let i in arr) {console.log(i); // 输出：'0', '1', '2', 'foo'（可能乱序）
   }// 推荐：for...of 只遍历值，忽略非数字属性
   for (let val of arr) {console.log(val); // 输出：10, 20, 30
   }

2. 普通对象遍历：

   javascript

   复制

   下载

   const obj = { a: 1, b: 2 };// for...in 可行
   for (let key in obj) {console.log(key, obj[key]); // 输出：'a' 1, 'b' 2
   }// for...of 需先转换为可迭代结构
   for (let [key, value] of Object.entries(obj)) {console.log(key, value); // 输出：'a' 1, 'b' 2
   }

---

✅ 使用建议

• 遍历 数组/字符串/集合类数据 → 用 for...of

• 遍历 普通对象的键 → 用 for...in（建议配合 hasOwnProperty 过滤原型属性）

• 需要 索引和值 → 数组可用 arr.forEach((val, index) => {})