JavaScript 連想配列

JavaScriptの連想配列

通常の配列の「添え字」は数値ですが、「連想配列」は辞書のようなデータを格納できる配列で「添え字」の代わりに文字データを管理します。

「添え字」の代わりになる文字を「キー」(key)といいキーに紐付くデータをバリュー(value)といいます。

連想配列の書式

var 連想配列名 = { key1:value1,key2:value2,・・・・};

連想配列変数に代入するデータはkeyとvalueのペアーをコロン記号「:」で連結し、それぞれのデータはカンマ「,」で区切って記述します。

上記の連想配列のイメージをコードで書くと

var fruit = { "apple":200,"orange":100,"grape":300 };

のようになります。

連想配列から要素を取得する方法

連想配列はデータ（value）に名前（key）が付いているので、参照する際は「連想配列名.key」という形でデータを参照します。

連想配列から要素を参照するコード

var fruit = { "apple":200,"orange":100,"grape":300 };
       document.write(fruit.apple+"</br>");
       document.write(fruit.orange+"</br>");
       document.write(fruit.grape+"</br>");

実行結果

連想配列のデータを変更する書式

連想配列名.key = 新しいデータ;

連想配列のデータを変更するコード例

fruit.apple = 250;
fruit.orange = 150;
fruit.grape = 250;

多次元の連想配列

2次元の連想配列を作成する書式

var 連想配列名 = [
     {key1:value1,key2:value2,・・・},　　　//添え字0
     {key3:value3,key4:value4,・・・}　　　 //添え字1
  
 ];

1次元目の配列{}は添え字「0」2次元目の配列{}は添え字「1」になります。

2次元の連想配列から要素のデータを取得する書式

(連想配列名[0].key1);
(連想配列名[0].key2);
         ・
　　　　　・
(連想配列名[1].key3);
(連想配列名[1].key4);
　　　　　・
　　　　　・

連想配列名の後に次元を表す「添え字」を記述してデータの「添え字」を表す文字列のkey1を記述し、データを取得します。

コード例

var fruit = [
{ "apple":200,"orange":100,"grape":300 },
{ "strawberry":350,"melon":400,"banana":150 }
];
document.write(fruit[0].apple+"</br>");
document.write(fruit[0].orange+"</br>");
document.write(fruit[0].grape+"</br>");
document.write(fruit[1].strawberry+"</br>");
document.write(fruit[1].melon+"</br>");
document.write(fruit[1].banana);

実行結果

連想配列のすべての要素を参照する方法

連想配列の要素は「添え字」を持たないので、値の集合（コレクション）から1つずつ値を取り出して変数に格納する繰り返し処理のfor of【ﾌｫｰｵﾌ】文は使用できません。

オブジェクト（連想配列オブジェクト）からプロパティ名を取得するfor in【ﾌｫｰｲﾝ】文を使用して各要素のデータを参照して取得します。

連想配列のすべての要素を参照して出力するコード例

var fruit = { "apple":200,"orange":100,"grape":300 };
    for (var key in fruit){
      document.write(fruit[key]+"</br>");
    }

コードの解説

1行目【var fruit = { “apple”:200,”orange”:100,”grape”:300 };】
varキーワードを使用して連想配列変数「fruit」を宣言してデータの名前を表すkey【ｷｰ】とデータを表すvalue【ﾊﾞﾘｭｰ】を代入演算子「=」を使用して代入します。

2行目【for (var key in fruit){】
for in【ﾌｫｰｲﾝ】文を使用して、連想配列変数オブジェクト（fruit）に格納されているプロパティ名（key）をvarキワードを使用し、変数宣言した変数「key」に繰り返し処理の中で順に取り出して代入します。

繰り返し回数は連想配列変数オブジェクトに格納されているプロパティ名（key）の数です。

3行目【document.write(fruit[key]+”</br>”);】
document【ﾄﾞｷｭﾒﾝﾄ】オブジェクトのwrite【ﾗｲﾄ】メソッドを使用して変数「key」の格納されている連想配列変数「fruit」の要素の添え字の代わりになる文字列（key）を使用して連想配列に格納されているデータ（value）を出力します。

イメージ図

実行結果

多次元の連想配列のすべての要素を参照する方法

2次元連想配列は2次元配列の中にある1次元配列は、「添え字」で指定します。よって、最初にfor of文で2次元配列から1次元配列を取得して次にfor in文を使用して取得した1次元配列から要素のデータをプロパティ名にあたるkeyで取得して変数「key」に格納します。

コード例

 var fruit2D = [{ "apple":200,"orange":100,"grape":300 },
                { "strawberry":350,"melon":400,"banana":150 }
   ];
   for (var fruit1D of fruit2D){
        for (var key in fruit1D){
      document.write(fruit1D[key]+"</br>");
    }
   }

2次元連想配列から要素のデータを参照して出力するイメージ図

実行結果

以上で、JavaScriptの連想配列についての解説を終了します。ありがとうございました。