js 遍历对象（保姆级教程）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在 JavaScript 开发中，对象（Object）是最基础且灵活的数据结构之一。无论是处理用户数据、配置信息，还是构建复杂的应用逻辑，开发者经常需要遍历对象中的属性与值。js 遍历对象这一操作看似简单，实则包含多种方法和细节，稍有不慎可能导致逻辑错误或性能问题。本文将系统性地讲解 JavaScript 中对象遍历的核心方法，通过对比、案例和比喻，帮助初学者快速掌握技巧，同时为中级开发者提供进阶视角。

一、基础概念：对象的结构与遍历需求

对象的比喻：图书馆的书架系统

想象一个图书馆，每个书架代表一个对象，书架上的每一层（属性名）存放着不同的书籍（属性值）。遍历对象就像系统性地检查每个书架的每一层，查看书籍的类型和内容。
JavaScript 对象以 key-value 形式存储数据，例如：

const user = {  
  name: "Alice",  
  age: 25,  
  hobbies: ["reading", "coding"]  
};  

当需要处理对象中的所有属性时（如计算总年龄、过滤特定数据），就需要遍历操作。

二、经典方法：for...in 循环

基础语法与使用场景

for...in 是 JavaScript 中最经典的对象遍历方法，语法如下：

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

注意：hasOwnProperty() 方法用于排除原型链上的属性，避免意外遍历继承的属性。

实例：遍历用户信息对象

const user = {  
  firstName: "Bob",  
  lastName: "Smith",  
  email: "bob@example.com"  
};  

for (const key in user) {  
  console.log(`属性名：${key}，属性值：${user[key]}`);  
}  
// 输出：  
// 属性名：firstName，属性值：Bob  
// 属性名：lastName，属性值：Smith  
// 属性名：email，属性值：bob@example.com  

深入理解：原型链的影响

如果对象的属性来自原型链（例如通过 Object.create() 或继承），for...in 会遍历到这些属性。例如：

const parent = { category: "VIP" };  
const child = Object.create(parent);  
child.name = "Charlie";  

for (const key in child) {  
  console.log(key); // 输出：name, category  
}  

此时需结合 hasOwnProperty() 筛选目标属性。

三、现代 API：Object.keys(), Object.values(), Object.entries()

三个核心工具函数

ES5 引入了三个实用工具函数，它们将对象属性转换为数组，方便后续处理：

• Object.keys(obj)：返回对象自身可枚举属性名的数组。
• Object.values(obj)：返回属性值的数组。
• Object.entries(obj)：返回包含 [key, value] 数组的数组。

案例：统计对象属性数量

const stats = {  
  pageViews: 1500,  
  users: 200,  
  sessions: 300  
};  

console.log(Object.keys(stats).length); // 输出：3  

对比与选择建议

实例：使用 entries() 过滤属性

const filtered = {};  
for (const [key, value] of Object.entries(stats)) {  
  if (key.includes("views")) {  
    filtered[key] = value;  
  }  
}  
console.log(filtered); // { pageViews: 1500 }  

四、ES6 扩展：for...of 循环与展开运算符

for...of 与可迭代对象

虽然 for...of 主要用于遍历数组和字符串，但它可以通过 Object.values() 等方法间接遍历对象：

for (const value of Object.values(stats)) {  
  console.log(value); // 输出：1500, 200, 300  
}  

展开运算符：快速复制与转换

结合展开运算符（...），可以将对象属性转换为数组：

const entries = [...Object.entries(stats)]; // 等同于 Object.entries(stats)  

五、进阶技巧与常见问题

1. 遍历顺序的不确定性

JavaScript 对象在 ES2015 之前没有固定的属性顺序，但现代引擎通常按插入顺序排列。若需严格控制顺序，可改用数组存储键值对。

2. 处理嵌套对象

当对象包含嵌套结构时，需递归遍历：

function traverse(obj) {  
  for (const key in obj) {  
    if (typeof obj[key] === "object" && obj[key] !== null) {  
      traverse(obj[key]);  
    } else {  
      console.log(key, obj[key]);  
    }  
  }  
}  

3. 性能优化建议

• 小型对象：优先使用 for...in 或 Object.keys()。
• 大型对象：避免频繁创建临时数组，可直接使用 for...in 并缓存属性值。

六、总结：选择最适合的遍历方法

• 需要键和值：for...in 或 Object.entries()。
• 仅需键或值：Object.keys() 或 Object.values()。
• ES6 新手友好：结合 for...of 和展开运算符。

掌握这些方法后，开发者可以灵活应对从简单数据处理到复杂对象操作的场景。js 遍历对象不仅是技术问题，更是对 JavaScript 数据结构本质的理解过程——正如图书馆管理员需熟悉每本书的位置，开发者也需要精准掌控对象中的每个属性与值。

通过持续实践和案例分析，您将能高效利用这些工具，提升代码的可读性和性能。