キーと値のペアでデータを管理する

今回は、添え字の代わりにキーと呼ばれる文字列で要素を指定できるようにした配列、連想配列について書いていきます。

配列は、０から始まる添え字で要素を指定しました。たとえば、都道府県名を格納する配列ken がある場合は、最初の要素は ken[0]と指定しました。この添え字と要素には意味上の関連性はないです。

それに対して、連想配列は、より分かりやすいキーと値のペアでデータを管理できます。たとえば、会員番号をキーにして、名前を要素とするmembersという連想配列が作成できます。

　members["選手1"]→"鈴木イチロー"

1	members["選手1"]→"鈴木イチロー"

という感じにです。

連想配列はObjectオブジェクトというオブジェクトとして扱います。このObjectオブジェクトは、javaScriptで、すべてのオブジェクトの基本となるオブジェクトです。new演算子とobjectコンストラクタを使用して下記のように書きます。

　var members = new Object();

1	var members = new Object();

連想配列の基本的な使い方は、通常の配列の添え字代わりにキーを文字列として指定します。下記のように書きます。

　members["選手1"] = "鈴木イチロー";

1	members["選手1"] = "鈴木イチロー";

キーが「選手2」の要素に「松井秀喜」を代入するには以下のように書きます。

　members["選手2"] = "松井秀喜";

1	members["選手2"] = "松井秀喜";

キー	値
選手1	鈴木イチロー
選手2	松井秀喜

サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>連想配列</title>
   
</head>
<body>
    
<script>

    var animals = new Object();
    animals["dog"] = "犬";
    animals["cat"] = "猫";
    animals["monkey"] = "猿";
    animals["bird"] = "鳥";
    
    //document.write("<h1>",animals["dog"],"</h1>");

    for( var i in animals){
        document.write("<h1>",animals[i],"</h1>");
    }
</script>
</body>
</html>

<!doctype html>

<html>

<head>

</head>

<body>

var animals = new Object();

animals["dog"] = "犬";

animals["cat"] = "猫";

animals["monkey"] = "猿";

animals["bird"] = "鳥";

//document.write("<h1>",animals["dog"],"</h1>");

for( var i in animals){

document.write("<h1>",animals[i],"</h1>");

}

</script>

</body>

</html>

連想配列生成

サンプルコードでは下記のようにして、new演算子とObjectコンストラクタで連想配列を生成。

　var animals = new Object();//Objectコンストラクタで生成

1	var animals = new Object();//Objectコンストラクタで生成

Arrayコンストラクタで配列を生成する場合と同じように、Objectコンストラクタに引数を指定しない場合、空の連想配列が生成されます。要素を追加するたびに、要素数が増えていきます。Arrayコンストラクタを連想配列を生成できます。

　var animals = new Array();//Arrayコンストラクタで連想配列を生成

1	var animals = new Array();//Arrayコンストラクタで連想配列を生成

連想配列ではlengthプロパティの値には意味がないです。Arrayオブジェクトに用意されているメソッドは使えない点に注意する必要があります。

リテラルによる連想配列の生成

配列と同じように、リテラルとして連想配列を生成することができます。この場合は書式は以下の通りです。

	{キー１:"値１",キー２:"値２",キー３:"値３",.......}

1	{キー１:"値１",キー２:"値２",キー３:"値３",.......}

サンプルコード上でobjectコンストラクタを使って生成した連想配列をリテラルで生成するには以下の通りです。

　var animals ={dog:"犬",cat:"猫",monkey:"猿",bird:"鳥"};

1	var animals ={dog:"犬",cat:"猫",monkey:"猿",bird:"鳥"};

キーをプロパティとして利用

「　連想配列名[キー]　」として要素を指定する代わりに、変数名とキーをピリオド「.」で連結する方法でも要素を指定できます。

　animals["dog"] ="シベリアンハスキー"; //連想配列形式で要素にアクセス
　animals.dog = "シベリアンハスキー"; //プロパティ形式で要素にアクセス

1 2	animals["dog"] ="シベリアンハスキー"; //連想配列形式で要素にアクセス　animals.dog = "シベリアンハスキー"; //プロパティ形式で要素にアクセス

for～in文を利用

配列では、すべての要素を順に処理するのにfor文を使用しましたが、連想配列ではその方法ができません。連想配列では、lengthプロパティでは分からないからです。

かわりに使用するのがfor～in文という連想配列のすべてのキーに順番にアクセスする文を使います。下記のように書きます。

for(変数 in 連想配列){
　実際の処理
}

for(変数 in 連想配列){

　実際の処理

}

for～in文で、連想配列のすべてのキーが、順番に変数に格納されていきます。サンプルコードでは、下記のように連想配列animalsのキー(英語での動物名)と、その値(日本語での動物名)を表示しています。

　　for( var i in animals){
　　　　document.write("&lt;h1 &gt;",animals[i],"&lt;/h1 &gt;");
　　}

　　for( var i in animals){

　　　　document.write("<h1 >",animals[i],"</h1 >");

　　}