如何在 JavaScript 物件中迭代或迴圈
本篇教程文章將介紹我們如何對一個 JavaScript 物件進行迭代。
有幾個迴圈語句，用於迭代一個 JavaScript 物件的方法如下。
for-in迴圈for-of迴圈forEach方法
for-in 迴圈來迴圈瀏覽 JavaScript 物件
for-in 語句是一個迴圈，用於用鍵值對迭代 JavaScript 物件。這個迴圈對 JavaScript 物件的所有元素進行迭代。
使用 for-in 迴圈迴圈 JavaScript 物件的示例程式碼如下。
var Cities = {City1:"Tokyo",City2:"Paris",City3:"Dubai",City3:"Rome",City4:"London"}
for(var city in Cities)
{
console.log(city,":",Cities[city]);
}
輸出：
City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome
City5 : London
當使用 for-in 迴圈時，我們不需要使用任何特殊函式來迭代或迴圈一個物件。
使用 for-of 迴圈在 JavaScript 物件中迴圈
for-of 語句也是一個迴圈，它可以迭代一個沒有鍵值對的可迭代物件。我們也可以用這個迴圈來迭代有鍵值對的 JavaScript 物件，但要用一些特殊的函式，如下所示。
Object.getOwnPropertyNamesObject.entriesObject.keysReflect.ownKeys
Object.getOwnPropertyNames
這個方法返回一個儲存在物件中的所有鍵值對的陣列。但是，為了迭代 JavaScript 物件的所有鍵值對，我們需要使用這個方法與 for-of 迴圈。
使用 for-of 與 Object.getOwnPropertyNames() 迴圈來迭代物件的例子程式碼如下。
var Cities = {City1:"Tokyo",City2:"Paris",City3:"Dubai",City3:"Rome",City4:"London"};
for(var city of Object.getOwnPropertyNames(Cities))
{
const CityName = Cities[city];
console.log(city,":",CityName);
}
輸出：
City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome
City5 : London
Object. entries
這個方法返回物件的鍵值對的陣列。但是，如果要迭代一個鍵和值，我們需要用這個方法的 for-of 迴圈來對 JavaScript 物件進行迴圈。
使用 for-of 與 Object.entry() 迴圈迭代物件的示例程式碼如下。
var Cities = {City1:"Tokyo",City2:"Paris",City3:"Dubai",City3:"Rome",City4:"London"};
for(var [city,CityName] of Object.entries(Cities))
{
console.log(city,":",CityName);
}
輸出：
City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome
City5 : London
Object.keys
這個方法返回物件的鍵的陣列。但是如果要迭代一個物件的鍵值對，我們需要將這個函式與 for-of 迴圈一起使用。
使用 for-of 與 Object.keys() 迴圈來迭代物件的示例程式碼如下。
var Cities = {City1:"Tokyo",City2:"Paris",City3:"Dubai",City3:"Rome",City4:"London"};
for(var city of Object.keys(Cities))
{
console.log(city,":",cities[city]);
}
輸出：
City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome
City5 : London
Reflect.ownKeys
這個方法也返回物件的鍵值。但是如果要迭代物件的鍵值對，我們需要使用這個函式與 for-of 迴圈。
使用 for-of 與 Reflect.ownKeys 迴圈來迭代物件的例子程式碼如下。
var Cities = {City1:"Tokyo",City2:"Paris",City3:"Dubai",City3:"Rome",City4:"London"};
for(var city of Reflect.ownKeys(Cities))
{
console.log(city,":",cities[city]);
}
輸出：
City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome
City5 : London
使用 forEach 方法對 JavaScript 物件進行迴圈
forEach 方法的作用是作為迭代器，依次呼叫其他方法。但是我們可以使用這個方法通過使用其他幾個函式來迭代物件，這些函式如下。
Object.keysReflect.ownKeys
Object.keys
使用這個方法和 forEach 方法，我們可以迭代一個物件的鍵值對。
var Cities = {City1:"Tokyo",City2:"Paris",City3:"Dubai",City3:"Rome",City4:"London"};
Object.keys.forEach(city => {console.log(city,":",Cities[city])})
輸出：
City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome
City5 : London
Reflect.ownKeys
使用這個方法和 forEach 方法，我們可以迭代一個物件的鍵值對。
var Cities = {City1:"Tokyo",City2:"Paris",City3:"Dubai",City3:"Rome",City4:"London"};
Reflect.ownKeys.forEach(city => {console.log(city,":",Cities[city])})
輸出：
City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome
City5 : London