前端百题斩：JS 中 9 种遍历对象的方式

在 JavaScript 中，对象是一种非常重要的数据结构。熟练掌握各种遍历对象的方式对于开发者来说至关重要。以下将详细介绍 9 种常见的遍历对象的方式。

1. for...in 循环 for...in 循环会遍历对象自身的和继承的可枚举属性。需要注意的是，它遍历的是属性名而不是属性值。

const obj = {a: 1, b: 2, c: 3};
for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key + ": " + obj[key]);
  }
}

2. Object.keys() 方法 Object.keys() 方法返回一个包含对象自身可枚举属性名称的数组。

const obj = {x: 10, y: 20, z: 30};
const keys = Object.keys(obj);
keys.forEach(key => {
  console.log(key + ": " + obj[key]);
});

3. Object.values() 方法 Object.values() 方法返回一个包含对象自身可枚举属性值的数组。

const obj = {name: 'John', age: 30};
const values = Object.values(obj);
values.forEach(value => {
  console.log(value);
});

4. Object.entries() 方法 Object.entries() 方法返回一个包含对象自身可枚举属性的键值对数组。

const obj = {fruit: 'apple', vegetable: 'carrot'};
for (const [key, value] of Object.entries(obj)) {
  console.log(key + ": " + value);
}

5. Reflect.ownKeys() 方法 Reflect.ownKeys() 方法返回一个包含对象自身所有属性（包括不可枚举属性）的数组。

const obj = Object.create({}, {
  hiddenProperty: {
    value: 'hidden',
    enumerable: false
  }
});
const keys = Reflect.ownKeys(obj);
console.log(keys);

6. JSON.stringify() 与解析 通过将对象转换为 JSON 字符串，然后解析字符串来获取属性。

const obj = {city: 'New York', country: 'USA'};
const jsonStr = JSON.stringify(obj);
const parsedObj = JSON.parse(jsonStr);
for (const key in parsedObj) {
  console.log(key + ": " + parsedObj[key]);
}

7. while 循环与 hasOwnProperty() 方法

let key = 0;
const obj = {num1: 100, num2: 200};
while (key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key + ": " + obj[key]);
  }
  key++;
}

8. 使用 for...of 与 entries()

const obj = {book: 'JavaScript', author: 'John Doe'};
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}

9. 借助 Object.getOwnPropertyNames() 方法

const obj = {property1: 1, property2: 2};
const names = Object.getOwnPropertyNames(obj);
names.forEach(name => {
  console.log(name + ": " + obj[name]);
});

掌握这些遍历对象的方式，能够让我们在处理对象数据时更加得心应手，提高开发效率和代码质量。