ITコラム

Solving puzzle together. Drawing light bulb on blackboard.

JavaScript

2017.10.17

JavaScript【 array 】４～連想配列とfor..in文

配列では、変数名にインデックス番号が付いて各データを格納しますが、インデックス番号の代わりにデータと関連性のあるキーを用いて、データとキーを紐付けて各データを格納する方法もあり、これを連想配列といいます。
今回は、連想配列と、連想配列のデータをループさせる際に使用するfor..in文について紹介します。

１．連想配列とは

　
連想配列は、インデックス番号の代わりにデータと関連性のあるワードを用いて、変数名とワードを組み合わせて各データを格納する配列です。

インデックス番号の代わりとなるワードのことを「キー」と呼びます。
　
　
果物の値段を格納する配列変数を考えてみます。

りんご	みかん	ぶどう	もも
350	380	580	490

このようなデータを、配列変数に格納すると、通常は次のようになります。

var fruitPrice = [350, 380, 580, 490];

そして、みかんの値段を使いたい時は、「 fruitPrice[1] 」と記述してデータを取得します。

インデックス番号の「 1 」とみかんとは関連性がないため、「 fruitPrice[1] 」を見ただけでは、何の値段なのかわかりません。
　
　
これを、キーと値段とを紐付けて次のようなデータとしてイメージしてみます。

キー	りんご	みかん	ぶどう	もも
データ	350	380	580	490

次のように記述すると、キーとデータを連想配列変数に格納することができます。

var fruitPrice =  {"りんご" : 350, "みかん" : 380, "ぶどう" : 580, "もも" : 490};

そして、みかんの値段を使いたい時は、次のように記述してデータを取得します。

alert("みかんの値段は" + fruitPrice["みかん"] + "円です。");

「 fruitPrice[“みかん”] 」を見ただけで、みかんの値段であることが予想できます。
　
　
このように、連想配列は、キーとデータが紐付いた配列で、次のように記述します。

// 宣言と代入
var 配列変数名 = {“キー1” : 値1, “キー2” : 値2, “キー3” : 値3};

// データの取得
var 変数名 = 配列変数名[“キー2”];

▲目次へ戻る

２．for..in文

　
配列変数の中の全てのデータを表示するようなプログラムを作る場合、通常の配列を使うと、次のようにfor文が使えます。

    var fruitPrice = [350, 380, 580, 490];

    for (var i = 0;  i < fruitPrice.length;  i++) {
            document.getElementById("id_name").innerHTML += fruitPrice[i] + "円";
        }
    }
}

しかし、連想配列の場合は、インデックス番号を使用しないため、for文のカウントを利用することができません。

このような場合に便利に使用できるのが、for..in文です。

for..in文は特別な使い方をする構文で、オブジェクトに含まれるプロパティを順に取得する際に使用します。

オブジェクトは、プロパティをまとめて管理するためのもので、プロパティは、値と名前とをセットにして管理します。
（連想配列はオブジェクト、中身のキーはプロパティの関係にあるといえます。）

先ほどのサンプルを、連想配列とfor..in文を使用して記述すると、次のようになります。

    var fruitPrice =  {"りんご" : 350,
                       "みかん" : 380,
                       "ぶどう" : 580,
                       "もも" : 490};

    for (var fName in fruitPrice) {
            document.getElementById("id_name").innerHTML
                += fName
                   + " : "
                   + fruitPrice[fName]
                   + "円";
        }
    }
}

for..in文は、オブジェクトに含まれるプロパティの数だけ繰り返しを行うように組み込まれた構文です。
そのため、条件式や増減式のようなものを設定する必要がありません。

上のサンプルでは、ループの度に、連想配列fruitPriceに格納されたキーを、変数fNameに代入し、fruitPrice[fName]としてそのキーに紐付いたデータを取得しています。

キー自身も意味のあるデータであれば、このように出力テキストに加えることもできます。

上のソースコードを使って、実際にプログラムを作ってみました。
表示ボタンをクリックしてみて下さい。

ソースコードは次の通りです。

<script type="text/javascript">
<!--
function dispAry() {
    var fruitPrice =  {"りんご":350,
                       "みかん":380,
                       "ぶどう":580,
                       "もも　":490};

    document.getElementById("dat").innerHTML = "";

    for (var fName in fruitPrice) {
            document.getElementById("dat").innerHTML
                += fName
                   + " ： "
                   + fruitPrice[fName]
                   + "円"
                   + "<br>";
            document.getElementById("dat").innerHTML +="<br>";
    }
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 0px;">
    <form>
        <div style="display:inline-flex;">
            果物の値段を表示します
            <input type="button" value="表示" onClick="dispAry()">
        </div>
        <div id="dat" style="background-color : #EEE; width : 300px;"></div>
    </form>
</div>

▲目次へ戻る