如何使用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
相关推荐
neter.asia9 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫9 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
IT技术分享社区16 分钟前
C#实战:使用腾讯云识别服务轻松提取火车票信息
开发语言·c#·云计算·腾讯云·共识算法
极客代码19 分钟前
【Python TensorFlow】入门到精通
开发语言·人工智能·python·深度学习·tensorflow
疯一样的码农26 分钟前
Python 正则表达式(RegEx)
开发语言·python·正则表达式
光影少年28 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_29 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891132 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾33 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking33 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js