JavaScript 循环对象的四种方法

一、for...in 循环

for (let key in object) {
  console.log(key, object[key]);
}

for...in 循环是一种循环对象属性的方法。它会遍历对象的所有可枚举的属性，包括它的原型中的属性。在每次循环中，变量 key 会被赋值为当前属性的键名，而变量 object[key] 则被赋值为当前属性的值。

需要注意的是，用 for...in 循环遍历对象时，遍历对象的属性顺序是不确定的。在实际开发中，我们使用它主要是为了遍历对象的属性，而不必考虑它的顺序。

下面是一个 for...in 循环的示例：

let person = {name: "Tom", age: 21, gender: "male"};
for (let key in person) {
  console.log(key, person[key]);
}
// Output: 
// name Tom
// age 21
// gender male

二、Object.keys() 方法

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

Object.keys() 方法返回一个给定对象自身可枚举属性名称数组。使用它可以遍历对象的属性，但与 for...in 循环不同，它只考虑对象的自身属性，而不会遍历它的原型链。

我们可以使用 Object.keys() 方法获取对象的键名数组，然后使用数组的遍历方法，如 for 循环或 forEach() 方法来遍历对象的属性。

下面是一个 Object.keys() 方法的示例：

let person = {name: "Tom", age: 21, gender: "male"};
let keys = Object.keys(person);
for (let i = 0; i < keys.length; i++) {
  console.log(keys[i], person[keys[i]]);
}
// Output: 
// name Tom
// age 21
// gender male

三、Object.values() 方法

let values = Object.values(object);
for (let i = 0; i < values.length; i++) {
  console.log(values[i]);
}

使用 Object.values() 方法可以获取一个给定对象所有可枚举属性的值的数组。同样地，它只考虑对象自身的属性，而不会遍历它的原型链。

我们可以使用 Object.values() 方法获取对象的值数组，然后使用数组的遍历方法，如 for 循环或 forEach() 方法来遍历对象的属性值。

下面是一个 Object.values() 方法的示例：

let person = {name: "Tom", age: 21, gender: "male"};
let values = Object.values(person);
for (let i = 0; i < values.length; i++) {
  console.log(values[i]);
}
// Output: 
// Tom
// 21
// male

四、Object.entries() 方法

let entries = Object.entries(object);
for (let i = 0; i < entries.length; i++) {
  console.log(entries[i][0], entries[i][1]);
}

Object.entries() 方法返回一个给定对象自身可枚举属性的 [key, value] 数组。同样地，它只考虑对象的自身属性，而不会遍历它的原型链。

我们可以使用 Object.entries() 方法获取对象的键值对数组，然后使用数组的遍历方法，如 for 循环或 forEach() 方法来遍历对象的属性键值对。

下面是一个 Object.entries() 方法的示例：

let person = {name: "Tom", age: 21, gender: "male"};
let entries = Object.entries(person);
for (let i = 0; i < entries.length; i++) {
  console.log(entries[i][0], entries[i][1]);
}
// Output: 
// name Tom
// age 21
// gender male

总结

上述四种方法都可以用来遍历对象的属性。在实际开发中，我们需要根据实际需求来选择相应的方法。

如果需要遍历对象的所有属性，包括原型中的属性，则使用 for...in 循环。如果只需要遍历对象自身的属性，则使用 Object.keys()、Object.values() 或 Object.entries() 方法。

为了更好地理解各种方法的区别，请看下面的示例:

let person = {name: "Tom", age: 21, gender: "male"};

Object.defineProperty(person, 'job', {
  value: 'developer',
  enumerable: false
});

for (let key in person) {
  console.log(key, person[key]);
}
// Output: 
// name Tom
// age 21
// gender male

let keys = Object.keys(person);
for (let i = 0; i < keys.length; i++) {
  console.log(keys[i], person[keys[i]]);
}
// Output: 
// name Tom
// age 21
// gender male

let values = Object.values(person);
for (let i = 0; i < values.length; i++) {
  console.log(values[i]);
}
// Output: 
// Tom
// 21
// male

let entries = Object.entries(person);
for (let i = 0; i < entries.length; i++) {
  console.log(entries[i][0], entries[i][1]);
}
// Output: 
// name Tom
// age 21
// gender male

上面的例子中，我们给 person 对象添加了一个不可枚举的属性 job。在使用 for...in 循环遍历对象时，它会忽略该属性。而在使用 Object.keys()、Object.values() 或 Object.entries() 方法遍历对象时，这个属性不会被包含在里面。