如何使用JavaScript遍历对象

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

for-in 循环是最基础也是最常用的对象遍历方法。它语法简单，适合初学者快速掌握

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 方法，可以更加优雅地遍历对象。

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，可以使遍历对象的代码更加简洁明了。

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