JavaScript オブジェクトを反復処理する

1. for-in ループで JavaScript オブジェクトをループする
2. JavaScript オブジェクトをループするために for-of ループを使用する
3. forEach メソッドを使って 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 ループを使っている間は、オブジェクトの反復処理やループ処理に特別な関数を使用する必要はありません。

JavaScript オブジェクトをループするために for-of ループを使用する

for-of 文は、キーと値のペアを持たない反復可能なオブジェクトを反復処理するループでもあります。このループを使って、キーと値のペアを持つ JavaScript オブジェクトを反復処理することもできますが、以下のようにいくつかの特殊な関数を使用することもできます。

• Object.getOwnPropertyNames
• Object.entries
• Object.keys
• Reflect.ownKeys

Object.getOwnPropertyNames のように、キーと値のペアを指定して反復処理を行う

このメソッドはオブジェクトに格納されているキーと値のペアのすべてのキーの配列を返します。しかし、JavaScript オブジェクトのすべてのキーと値のペアを反復処理するには、このメソッドを for-of ループで利用する必要があります。

オブジェクトを繰り返し処理するために Object.getOwnPropertyNames() を用いた for-of の例は以下の通りです。

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.entry のようになる

このメソッドはオブジェクトのキーと値のペアの配列を返します。しかし、キーと値の繰り返し処理を行うには、このメソッドで for-of ループを使って JavaScript オブジェクトをループさせる必要があります。

オブジェクトを繰り返し処理するために Object.entry() と一緒に for-of を使用する例は以下の通りです。

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 ループと一緒に使う必要があります。

オブジェクトを繰り返し処理するために Object.keys() と一緒に for-of を利用する例は以下の通りです。

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.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