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の連想配列についての解説を終了します。
ありがとうございました。

スポンサーリンク
スポンサーリンク

フォローする

スポンサーリンク
スポンサーリンク