連想配列の宣言・初期化・代入・参照 - JavaScript

Javascriptで連想配列を利用するコードを紹介します。

書式

宣言と初期化

連想配列の宣言と初期化は以下の書式を利用します。

var 連想配列名 = new Array();

代入

代入は以下の書式を利用します。連想配列への代入は"[","]"でキー名を囲み添え字にします。

連想配列名["キー名"] = 値

また、複数の要素を代入する場合は以下の書式も利用できます。

連想配列名 = { キー名1 : 値1, キー名2 : 値2, キー名3 : 値3, ... キー名n : 値n};

参照

参照は"[","]"でキー名を囲み添え字でキー名の要素を参照します。

連想配列名["キー名"]

書式例

例1

"CD-001"に"しっかりテーブル"、"CD-002"に"ふわふわソファー"、"CD-003"に"シンプルチェア"、を代入します。

var data = new Array();
data["CD-001"] = "しっかりテーブル";
data["CD-002"] = "ふわふわソファー";
data["CD-003"] = "シンプルチェア";

例2

上記の代入をまとめて記述するコードは以下になります。

var data = new Array();
data = {"CD-001": "しっかりテーブル", "CD-002": "ふわふわソファー", "CD-003": "シンプルチェア"};

例3

data連想配列で、"CD-002"のキーの値をinnerTextプロパティに設定します。

  document.getElementById("output").innerText = data["CD-002"]

プログラム例1

コード

下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <script type="text/javascript">
    var data = new Array();

    function init() {
      data["URL"] = "http://www.ipentec.com";
      data["SiteName"] = "iPentec";
      data["Since"] = "2000/01/25"
      data["mail"] = "info@ipentec.com"
    }

    function GetSiteName() {
      document.getElementById("output").innerText = data["SiteName"]
    }
  </script>
	<meta charset="utf-8" />
</head>
<body onload="init();">
  <h1>連想配列のデモ</h1>
  <input type="button" value="Button" onclick="GetSiteName();"/><br/>
  <hr />
  サイト名 : <span id="output"></span>
</body>
</html>

解説

    var data = new Array();

最初に上記コードでdata配列を作成します。
続いて、ページ表示時のinit()で以下のコードを実行します。

    function init() {
      data["URL"] = "http://www.ipentec.com";
      data["SiteName"] = "iPentec";
      data["Since"] = "2000/01/25"
      data["mail"] = "demo-program@ipentec.com"
    }

URL, SiteName, Since, mail のキー名で連想配列を作成しそれぞれに値を代入します。

  function GetSiteName() {
    document.getElementById("output").innerText = data["SiteName"]
  }

Buttonクリック時には上記のコードを実行します。連想配列のdataの"SiteName"キーの値を取得し、画面に表示します。

実行結果

上記のHTMLファイルをWebブラウザで開きます。下図の画面が表示されます。

[Button]をクリックします。data連想配列のキー名"SiteName"の値が画面に表示されます。

参考

GetSiteName()関数で、取得するキー名を"Since"にした場合は、data連想配列のキー名"Since"の値が画面に表示されます。

  function GetSiteName() {
    document.getElementById("output").innerText = data["Since"];
  }

プログラム例2:まとめて代入の例

コード

下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    var data = new Array();
    function init() {
      data = {
        "CD-001": "しっかりテーブル",
        "CD-002": "ふわふわソファー",
        "CD-003": "シンプルチェア"
      };
    }

    function buttonClick() {
      var in_elem = document.getElementById("inputTextBox");
      var inputText = in_elem.value;
      var out_elem = document.getElementById("output");
      out_elem.innerHTML = inputText + ":value:" + data[inputText];
    }

  </script>
</head>
<body onload="init();">
  <h1>連想配列の初期化デモ</h1>
  <input type="text" id="inputTextBox"/>
  <input type="button" onclick="buttonClick();" value="Exec"/>
  <hr/>
  <div id="output"></div>
</body>
</html>

解説

ページ読み込み時にinit()関数が呼び出され、以下のコードが実行されます。
連想配列に情報を代入します。

  function init() {
    data = {
      "CD-001": "しっかりテーブル",
      "CD-002": "ふわふわソファー",
      "CD-003": "シンプルチェア"
    };
  }

テキストボックスに入力したコードの文字列と一致する要素を連想配列から取得し画面に表示します。

  function buttonClick() {
    var in_elem = document.getElementById("inputTextBox");
    var inputText = in_elem.value;
    var out_elem = document.getElementById("output");
    out_elem.innerHTML = inputText + ":value:" + data[inputText];
  }