如何使用JavaScript遍历对象

一、使用 for-in 循环------简单直接,快速上手

for-in 循环是最基础也是最常用的对象遍历方法。它语法简单,适合初学者快速掌握
js 复制代码
const user = {
  name: 'Alice',
  age: 25,
  job: 'Engineer'
};

for (const key in user) {
  const value = user[key];
  console.log(`${key}: ${value}`);
}
创建了一个用户对象 user,通过 for-in 循环遍历每一个属性,并打印出键和值。输出结果如下:
复制代码
name: Alice
age: 25
job: Engineer
这种方法非常直观,但需要注意的是,它会遍历对象的所有可枚举属性,包括原型链上的属性

二、使用 Object.entries 和 forEach------优雅简洁,提升代码可读性

Object.entries 方法可以将对象转换成一个包含键值对的二维数组,结合 forEach 方法,可以更加优雅地遍历对象。
js 复制代码
const product = {
  id: 101,
  name: 'Laptop',
  price: 799
};

Object.entries(product).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});
Object.entries(product) 返回[['id', 101], ['name', 'Laptop'], ['price', 799]] 这样的二维数组,接着我们使用 forEach 遍历数组中的每一个键值对,输出结果如下
复制代码
id: 101
name: Laptop
price: 799

三、使用 for-of 循环------语法简洁,增强可读性

for-of 循环结合 Object.entries,可以使遍历对象的代码更加简洁明了。
js 复制代码
const order = {
  orderId: 'A123',
  productName: 'Phone',
  quantity: 2
};

for (const [key, value] of Object.entries(order)) {
  console.log(`${key}: ${value}`);
}
同样,Object.entries(order) 返回一个包含键值对的二维数组for-of 循环则可以直接遍历这个数组中的每一个元素,输出结果如下:
复制代码
orderId: A123
productName: Phone
quantity: 2
相关推荐
秋天的一阵风25 分钟前
突发奇想:border: 0 和boder: none 有区别吗?🤔🤔🤔
前端·css·html
秋天的一阵风29 分钟前
🌈尘埃落定!ECMASCRIPT 2025 标准来袭,开发者的新福音🎁
前端·javascript·ecmascript 8
Coffeeee39 分钟前
重新开始学Threejs,了解一下里面的一些高级几何体
前端·typescript·three.js
卓越进步43 分钟前
层级时间轮的 Golang 实现原理与实践
开发语言·后端·golang
zandy10111 小时前
嵌入式BI开发指南:如何通过衡石API将分析能力集成到业务系统?
开发语言·python·嵌入式
沉迷...1 小时前
el-input限制输入只能是数字 限制input只能输入数字
开发语言·前端·elementui
<但凡.1 小时前
C++修炼:list模拟实现
开发语言·数据结构·c++
xx24061 小时前
date-picker组件的shortcuts为什么不能配置在vue的data的return中
前端·javascript·vue.js
古时的风筝1 小时前
Caddy 比Nginx 还优秀吗
前端·后端·程序员
byte轻骑兵1 小时前
【C++类和数据抽象】复制构造函数
开发语言·c++