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() 方法遍歷對象時，這個屬性不會被包含在裏面。