下面给你整理一份 《JavaScript 遍历对象并获取 key 和 value 的常见方法（2025 最新版）》，包含示例、优缺点和适用场景，方便前端开发直接使用或写文章。

🚀 JavaScript 遍历对象获取 key 和 value 的几种常见方法

JavaScript 对象遍历主要用于：获取属性名（key）、属性值（value）或同时获取 key/value。
对象包括 普通对象 和 Map/Set 等可迭代对象。

1️⃣ for…in 循环（经典方法）

const obj = { name: "Alice", age: 25, city: "Beijing" };

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {  // 过滤继承属性
    const value = obj[key];
    console.log(key, value);
  }
}

✅ 优点：

  • 简单，适合旧浏览器
  • 可遍历所有可枚举属性

⚠️ 缺点：

  • 会遍历原型链，需要 hasOwnProperty 过滤
  • 遍历顺序非严格保证（对象顺序有特殊情况）

2️⃣ Object.keys() + forEach

Object.keys(obj).forEach(key => {
  const value = obj[key];
  console.log(key, value);
});

✅ 优点：

  • 只遍历自身属性
  • 遍历顺序与对象定义顺序一致
  • 代码简洁

3️⃣ Object.values() + forEach（只获取 value）

Object.values(obj).forEach(value => {
  console.log(value);
});

✅ 优点：

  • 适合只关注值的场景
  • 遍历顺序一致

⚠️ 缺点：无法直接获取 key

4️⃣ Object.entries() + for…of（最推荐）

for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

✅ 优点：

  • 同时获取 key 和 value
  • 顺序与对象定义顺序一致
  • 可与解构配合，代码简洁

5️⃣ forEach + Object.entries()（函数式风格）

Object.entries(obj).forEach(([key, value]) => {
  console.log(key, value);
});

✅ 优点：

  • 简洁、可链式操作
  • 适合函数式编程风格

6️⃣ for…of + Map 对象（适合 Map 类型）

const map = new Map([
  ["name", "Alice"],
  ["age", 25],
]);

for (const [key, value] of map) {
  console.log(key, value);
}

✅ 优点：

  • Map 保证插入顺序
  • 直接解构 key/value

7️⃣ Object.getOwnPropertyNames()（可获取不可枚举属性）

Object.getOwnPropertyNames(obj).forEach(key => {
  const value = obj[key];
  console.log(key, value);
});

✅ 优点：

  • 获取所有自身属性，包括不可枚举属性
    ⚠️ 一般用于工具函数或深度反射

8️⃣ JSON 方法（仅限普通对象）

const jsonStr = JSON.stringify(obj);
console.log(jsonStr);

✅ 优点：

  • 快速查看对象内容
    ⚠️ 不能遍历函数、Symbol、undefined

🔹 方法对比总结

方法获取 key获取 value遍历顺序适用场景
for…in✅✅不保证老浏览器/原型链遍历
Object.keys + forEach✅✅与定义顺序一致常规遍历自身属性
Object.values + forEach❌✅与定义顺序一致只关心值
Object.entries + for…of✅✅与定义顺序一致同时获取 key/value，推荐
Map + for…of✅✅插入顺序Map 类型对象
getOwnPropertyNames✅✅与定义顺序一致获取不可枚举属性

🔹 小技巧

  1. 解构直接取值：
const { name, age } = obj;
  1. 遍历带索引的数组对象：
const arr = [{id:1},{id:2}];
arr.forEach((item, index) => {
  console.log(index, item.id);
});
  1. 遍历 Symbol 属性：
const sym = Symbol("id");
obj[sym] = 123;
Object.getOwnPropertySymbols(obj).forEach(s => {
  console.log(s, obj[s]);
});

好，我帮你整理一份 《JavaScript 对象遍历全套实用示例 + 面试题解析（2025 最新版）》，涵盖普通对象、Map、Set、Symbol、数组对象等，包含代码示例、注意事项和面试点。

🚀 JavaScript 对象遍历全套实用示例（2025 最新版）

1️⃣ 普通对象遍历

const obj = { name: "Alice", age: 25, city: "Beijing" };

① for…in

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {  // 过滤原型链属性
    console.log(key, obj[key]);
  }
}

② Object.keys() + forEach

Object.keys(obj).forEach(key => {
  console.log(key, obj[key]);
});

③ Object.values() + forEach

Object.values(obj).forEach(value => {
  console.log(value);
});

④ Object.entries() + for…of （推荐）

for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

⑤ Object.entries() + forEach

Object.entries(obj).forEach(([key, value]) => {
  console.log(key, value);
});

2️⃣ Map 遍历

const map = new Map([
  ["name", "Alice"],
  ["age", 25]
]);

// ① for...of
for (const [key, value] of map) {
  console.log(key, value);
}

// ② map.forEach
map.forEach((value, key) => {
  console.log(key, value);
});

✅ 特点：保持插入顺序，可直接解构

3️⃣ Set 遍历（获取值，没有 key）

const set = new Set([1, 2, 3]);

// ① for...of
for (const value of set) {
  console.log(value);
}

// ② forEach
set.forEach(value => console.log(value));

4️⃣ Symbol 属性遍历

const sym1 = Symbol("id");
obj[sym1] = 123;

Object.getOwnPropertySymbols(obj).forEach(sym => {
  console.log(sym, obj[sym]);
});

✅ 特点：Symbol 属性不会被 for...in 或 Object.keys 遍历

5️⃣ 获取不可枚举属性

Object.defineProperty(obj, "secret", { value: "123", enumerable: false });

console.log(Object.getOwnPropertyNames(obj)); // 包含 "secret"

6️⃣ 数组对象遍历

const arr = [{id:1, name:"A"}, {id:2, name:"B"}];

arr.forEach((item, index) => {
  console.log(index, item.id, item.name);
});

7️⃣ 综合示例：对象 + Map + Symbol + 数组

const sym = Symbol("sym");
const obj2 = { a:1, b:2 };
obj2[sym] = 100;

const map2 = new Map([["x", 10], ["y", 20]]);
const set2 = new Set([1,2,3]);
const arr2 = [{id:1}, {id:2}];

console.log("普通对象");
for(const [k,v] of Object.entries(obj2)) console.log(k,v);
Object.getOwnPropertySymbols(obj2).forEach(s => console.log(s,obj2[s]));

console.log("Map");
for(const [k,v] of map2) console.log(k,v);

console.log("Set");
for(const v of set2) console.log(v);

console.log("数组对象");
arr2.forEach((item,i) => console.log(i,item.id));

🔹 面试常见题点

  1. for...in 与 Object.keys 区别？
    • for...in 会遍历原型链
    • Object.keys 只遍历自身可枚举属性
  2. Object.entries(obj) 返回什么？
    • 返回 [key, value] 数组
  3. Symbol 属性能否用 for...in 遍历？
    • ❌ 不能，只能用 Object.getOwnPropertySymbols
  4. Map 与普通对象遍历有何区别？
    • Map 保证插入顺序，key 可以是任意类型
    • 对象 key 永远是字符串或 Symbol
  5. 如何获取不可枚举属性？
    • Object.getOwnPropertyNames(obj)
    • Symbol 属性：Object.getOwnPropertySymbols(obj)

🔹 总结与最佳实践

类型推荐遍历方式备注
普通对象Object.entries() + for...of简洁，同时拿 key/value
只关心 valueObject.values()遍历顺序一致
Mapfor...of 或 map.forEach保证顺序，key 可任意类型
Setfor...of 或 set.forEach只有值，没有 key
Symbol 属性Object.getOwnPropertySymbols()特殊属性
不可枚举属性Object.getOwnPropertyNames()包含非枚举属性

✅ 实战建议：

  • 日常开发：Object.entries() + 解构
  • 遍历 Map/Set：直接 for...of
  • 面试题：注意 for...in 的原型链问题