如何使用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
相关推荐
小曲曲22 分钟前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS2 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
Theodore_10222 小时前
4 设计模式原则之接口隔离原则
java·开发语言·设计模式·java-ee·接口隔离原则·javaee
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
----云烟----4 小时前
QT中QString类的各种使用
开发语言·qt
lsx2024064 小时前
SQL SELECT 语句:基础与进阶应用
开发语言