如何使用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
相关推荐
jimin_callon5 分钟前
VBA第三十八期 VBA自贡分把表格图表生成PPT
开发语言·python·powerpoint·编程·vba·deepseek
Li_Ning2128 分钟前
【接口重复请求】axios通过AbortController解决页面切换过快,接口重复请求问题
前端
胡八一1 小时前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla1 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡1 小时前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript
矛取矛求1 小时前
C++ 标准库参考手册深度解析
java·开发语言·c++
٩( 'ω' )و2601 小时前
stl_list的模拟实现
开发语言·c++·list
CrimsonHu2 小时前
B站首页的 Banner 这么好看,我用原生 JS + 三大框架统统给你复刻一遍!
前端·javascript·css
Enti7c2 小时前
前端表单输入框验证
前端·javascript·jquery
拉不动的猪2 小时前
几种比较实用的指令举例
前端·javascript·面试