【保存版】JavaScriptのオブジェクトのループの方法を全て覚えとこう

はじめに

JavaScriptで連想配列を使う際にオブジェクトを使いますが、オブジェクトをループ処理するには、配列とは異なり、forやforEachが使えません。

JavaScriptのオブジェクトの特徴を学びながら、ループする方法をマスターしていきましょう！

今回も理解度チェック付きなのでぜひチャレンジしてみてくださいね。

オブジェクトの宣言の方法

オブジェクトの宣言には3つの特徴があります。

① オブジェクトは{}で囲って宣言
② keyとvalueのセットは:(コロン)で区切る
③ key-valueのセットは、,(カンマ)で区切る 

この辺は簡単ですね。では、こんな依頼を受けたらどうしましょうか？

「都市ごとの気温だけじゃなくて、都市ごとの最低気温と最高気温も見たいんだよねー」

実はオブジェクトも配列と同様に階層を作ることができます。

このように、基本は全てkeyとvalueのセットです、今回は都市名というkeyに対して、「最低気温と最高気温のセットを持ったvalue」が入ってます。
また、この最低・最高気温も、「最低/最高というkeyと、その気温を表すvalueのセット」になってるのが分かります。

要は、基本的には全てkey-valueのセットで宣言する。ということだけ覚えておきましょう。

forやforEachは使えない

配列のときは、forやArray.forEachを使ってループ処理ができましたが、オブジェクトでは使えません。

なぜでしょうか？

配列のkeyってなんでしたっけ？

そう。0から始まる連番でしたよね。
だから、「for (let i = 0; i < array.length; i++)」のようにして、iに0から順番の数字を入れていって配列を1行ずつ扱うことができました。forEachも内部的には同じです。

でも、オブジェクトのkeyってなんでしたっけ？

数字じゃなくて何でも使えますよね？今回は「横浜、名古屋、熊谷」という文字列ですし。
そうなると数字の連番での処理は難しそうです。

ということで、連続的に処理して、そのkeyを取得してくれるfor inかfor ofを使って処理するカタチになります。
また、Object.keysもそのオブジェクトが持つプロパティの名前(keyの一覧)を返してくれるので、これを使えばforEachが使えるようになります。

ちょっと、Object.keysがどんなものを返すか見ておきましょう。

let temperature = {
 "横浜"   : 28,
 "名古屋" : 31,
 "熊谷"   : 38,
}

console.log(temperature)
console.log(Object.keys(temperature))

{ '横浜': 28, '名古屋': 31, '熊谷': 38 }
[ '横浜', '名古屋', '熊谷' ]

Object.keysは、オブジェクトの持つプロパティ(key)の一覧を返すと言いましたが、そのとおり、「横浜・名古屋・熊谷」を返してくれました。

これを使ってループ処理してみましょう。

let temperature = {
 "横浜"   : 28,
 "名古屋" : 31,
 "熊谷"   : 38,
}

Object.keys(temperature).forEach((city) => {
 console.log(city, temperature[city])
})

横浜 28
名古屋 31
熊谷 38

こんな感じで、Object.keysで取得した「横浜・名古屋・熊谷」という3つの配列に対して、forEachでループさせて、内部ではcityとtemperature[city]で都市名と気温を取得してます。

for inを使う方法

for inを使うのはもっと簡単です。

let temperature = {
 "横浜"   : 28,
 "名古屋" : 31,
 "熊谷"   : 38,
}

for (let city in temperature) {
 console.log(city, temperature[city])
}

横浜 28
名古屋 31
熊谷 38

配列の時とあまり変わらないですね。オブジェクトの場合は、ループを回す時のkey(今回はcityと定義した)が数字ではなく、「横浜・名古屋・熊谷」などの文字列が入ってくることだけが違います。

for ofを使う方法

let temperature = {
 "横浜"   : 28,
 "名古屋" : 31,
 "熊谷"   : 38,
}

for (let city of Object.keys(temperature) {
 console.log(city, temperature[city])
}

横浜 28
名古屋 31
熊谷 38

for ofを使う場合は、ループを回す時のkeyが必要なので、最初のforEachをつかった時と同様に、Object.keysをつかってオブジェクトのkey一覧を取得して、ループを回しています。

理解度チェックテスト① - 2次元の連想配列を扱ってみよう

以下のコードを書いて、Twitterで#スキプラチャレンジを付けてツイートしてみてください。(※ 回答のコードはスクショとかでもOKです！必ずコメント返します)

以下のような2次元の連想配列から、各都市ごとの最低気温と最高気温を表示するコードを書いてください。

■ アウトプットのイメージ

横浜の最低気温は24℃で、最高気温は28℃です
名古屋の最低気温は28℃で、最高気温は31℃です
熊谷の最低気温は31℃で、最高気温は38℃です

■ ヒント : 利用する元の連想配列

let temperature = {
 "横浜"   : {"最低気温" : 24, "最高気温" : 28},
 "名古屋" : {"最低気温" : 28, "最高気温" : 31},
 "熊谷"   : {"最低気温" : 31, "最高気温" : 38},
}

これを、今回学んだオブジェクトのループをつかって処理してみてください。
ヒントは、2回回すことです。

追記 : 回答例 ( これはチャレンジしてから見てください)

skipla01234/js_lesson

最後にお願い

ぜひぜひ、今後のモチベーションのためにもお願いします！！

もしこのnoteが参考になったら....

■ 最後にたった2つのお願い
① このnoteを「スキ」&シェアしてください 🙇‍♂️
② このnoteの感想、何でも良いので @riman_skillplus 宛にください 🙇‍♂️

https://twitter.com/riman_skillplus