【JavaScript】連想配列をループで回す

JavaScriptで連想配列をループで回したい！

概要

今回の記事では、JavaScriptで連想配列をループで回す手順を掲載する。

仕様書

環境

• Google Chrome 114.0.5735.90（Official Build）（64 ビット）

手順書

何パターンかあるみたいなんだけども、3パターン挙げる。

forとin

forとinを使って月の名前のスペルと和風月名の文字列が可能された連想配列のキーと値を出力するサンプル。

var dic = ["January" : "睦月", "February" : "如月", "March" : "弥生", "April" : "卯月", "May" : "皐月", "June" : "水無月", "July" : "文月", "August" : "葉月", "September" : "長月", "October" : "神無月", "November" : "霜月", "December" : "師走"];

for (var key in dic)
{
    if (dic.hasOwnProperty(key))
    {
        console.log(key + ' : ' + dic[key]);
    }
}

Object.keysとforEach

Object.keysとforEachをつかって曜日の略称の文字列が可能された配列の中身を出力するサンプル。

var dic = ["January" : "睦月", "February" : "如月", "March" : "弥生", "April" : "卯月", "May" : "皐月", "June" : "水無月", "July" : "文月", "August" : "葉月", "September" : "長月", "October" : "神無月", "November" : "霜月", "December" : "師走"];

Object.keys(dic).forEach(function(key)
{
    console.log(key + ' : ' + dic[key]);
});

Object.entriesとforEach

Object.keysとforEachをつかって曜日の略称の文字列が可能された配列の中身を出力するサンプル。

var dic = ["January" : "睦月", "February" : "如月", "March" : "弥生", "April" : "卯月", "May" : "皐月", "June" : "水無月", "July" : "文月", "August" : "葉月", "September" : "長月", "October" : "神無月", "November" : "霜月", "December" : "師走"];

Object.entries(dic).forEach(function([k, v])
{
    console.log(k + ' : ' + v);
});

出力

Google Chromeのデベロッパーツール（F12）のOutputに下記のように出力される。

January : 睦月
February : 如月
March : 弥生
April : 卯月
May : 皐月
June : 水無月
July : 文月
August : 葉月
September : 長月
October : 神無月
November : 霜月
December : 師走

まとめ（感想文）

いろいろなやり方がある。
個人的にはforとinが直感的なと思いつつも、Object.entriesとforEachがスッキリしてて良いかもと思う今日この頃。