JavaScript オブジェクトを反復処理する
-
for-inループで JavaScript オブジェクトをループする -
JavaScript オブジェクトをループするために
for-ofループを使用する -
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.getOwnPropertyNamesObject.entriesObject.keysReflect.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.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