在 JavaScript 中,对象遍历是操作数据的重要技能,尤其在处理动态键值对时。以下是常见遍历方式及使用场景:


1. for...in 循环 📌

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key, obj[key]);
}
  • 会遍历对象所有可枚举属性(包括继承的)
  • 适合遍历对象自身属性,但需注意过滤 __proto__ 等特殊属性
  • 📸 for_in_Example

2. Object.keys() / Object.values() / Object.entries() 📦

const keys = Object.keys(obj); // ["a", "b", "c"]
const values = Object.values(obj); // [1, 2, 3]
const entries = Object.entries(obj); // [["a",1], ["b",2], ["c",3]]
  • 返回数组形式的键、值或键值对
  • 仅遍历对象自身属性,不包含继承属性
  • ✅ 推荐用于需要数组操作的场景
  • 📸 Object_keys_Usage

3. 使用 MapSet 遍历 🗂️

const map = new Map([[ 'a', 1 ], [ 'b', 2 ]]);
for (const [key, value] of map) {
  console.log(key, value);
}
  • 适用于键值对结构更复杂的数据
  • 支持迭代器接口,可与 for...of 结合使用
  • 📸 Map_Iteration

4. 避坑指南 ⚠️

  • 🚫 不要直接遍历 __proto__ 属性
  • 🚫 避免使用 for...in 遍历数组(会遍历索引,但数组是对象)
  • ✅ 建议配合 hasOwnProperty 进行属性验证
  • 📸 Traversal_Caution

拓展阅读 🔍

想深入了解 JavaScript 数据结构操作?点击 Resources/JavaScript_Best_Practices 获取进阶技巧!