前端遍历对象Object的4种方法

在前端JavaScript中，对一个对象进行循环通常指的是遍历对象的属性。你可以使用几种不同的方法来遍历对象的属性。以下是一些常见的方法：

1. 使用for...in循环

for...in循环用于遍历对象的可枚举属性（不包括Symbol值作为名称的属性）。

const obj = {
  date: '2016-05-01',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
};

for (const key in obj) {
  if (obj.hasOwnProperty(key)) { // 确保属性是对象自身的属性，而不是从原型链上继承的
    console.log(key, obj[key]);
  }
}

2. 使用Object.keys()方法

Object.keys()返回一个表示给定对象的所有可枚举属性的字符串数组（按插入顺序）。然后，你可以使用数组的方法来遍历这些键。

const obj = {
  date: '2016-05-01',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
};

const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  console.log(key, obj[key]);
}

3. 使用Object.entries()方法

Object.entries()返回一个给定对象自身可枚举属性的键值对数组，其排列与使用for...in循环的顺序一致（两者的主要区别是for-in循环也枚举原型链中的属性）。

const obj = {
  date: '2016-05-01',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
};

for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

4. 使用Object.values()方法

如果你只关心对象的值而不关心键，可以使用Object.values()方法。它会返回一个包含对象自身所有可枚举属性值的数组，按照相同的顺序（与for...in循环和Object.keys()相同）。

const obj = {
  date: '2016-05-01',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
};

const values = Object.values(obj);
for (let i = 0; i < values.length; i++) {
  console.log(values[i]); // 注意：这里只打印值，不打印键
}

根据你的具体需求，你可以选择最适合的方法。如果你需要同时访问键和值，Object.entries()可能是最方便的选择。如果你只关心值而不关心键，那么Object.values()可能更适合。如果你需要遍历对象的所有属性，包括继承自原型链的属性，那么for...in循环可能是更合适的选择，但要确保使用hasOwnProperty()方法来检查属性是否是对象自身的属性。