如何在 JavaScript 物件中迭代或迴圈

Abdul Mateen 2023年1月30日 2020年11月24日
  1. for-in 迴圈來迴圈瀏覽 JavaScript 物件
  2. 使用 for-of 迴圈在 JavaScript 物件中迴圈
  3. 使用 forEach 方法對 JavaScript 物件進行迴圈
如何在 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.getOwnPropertyNames
  • Object.entries
  • Object.keys
  • Reflect.ownKeys

Object.getOwnPropertyNames

這個方法返回一個儲存在物件中的所有鍵值對的陣列。但是,為了迭代 JavaScript 物件的所有鍵值對,我們需要使用這個方法與 for-of 迴圈。

使用 for-ofObject.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-ofObject.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-ofObject.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-ofReflect.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.keys
  • Reflect.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

相關文章 - JavaScript Object