[JavaScript] 連想配列のすべてのキーを取得する、連想配列のすべての要素を取得する
このページのタグ:[JavaScript] [連想配列]
連想配列のすべてのキーを取得するコード、連想配列のすべての要素を取得するコードを紹介します。

概要

連想配列のすべての要素にアクセスするには、for in 文を利用します。

書式

for (var [変数名] in [連想配列名]){
  ...処理
}
連想配列のキーの値を変数に格納し、連想配列の要素数だけループします。

プログラム

コード

下記のHTMLファイルを記述します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  
  <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"] = "cont@ipentec.com"
      data["memo"] = "お気に入りに追加"
    }

    function GetAllKey() {
      var keystr = "";
      for (var item in data) {
        keystr += item +", ";
      }
      return keystr;
    }

    function GetAllValue() {
      var valuestr = "";
      for (var item in data) {
        valuestr += data[item] + ", ";
      }
      return valuestr;
    }

    window.onload = function () {
      init();

      var k = GetAllKey();
      document.getElementById("keyout").innerText = k;

      var v = GetAllValue();
      document.getElementById("valueout").innerText = v;
    }
  </script>
  
</head>
<body>
  <div>キーの一覧:<span id="keyout"></span></div>
  <div>値の一覧:<span id="valueout"></span></div>

</body>
</html>

解説

init() 関数は連想配列の値の設定をする関数です。連想配列の利用方法やコードの詳細についてはこちらの記事を参照してください。
GetAllKey() 関数は連想配列のキーをすべて取得し、カンマ区切りの文字列として返す関数です。関数内では for in 分を利用して連想配列の要素をひとつづつループします。for in 文では連想配列のキーが変数item に格納されます。ループごとのitemの値は以下になります。

ループ回数item の値
1URL
2SiteName
3Since
4mail
5memo


GetAllValue() 関数は連想配列の値をすべて取得し、カンマ区切りの文字列として返す関数です。連想配列の値を直接列挙はできないため、for in 文で連想配列のキーを列挙し、そのキーを利用して連想配列にアクセスして値を取得します。
ループごとのitemの値は以下になります。

ループ回数item の値data[item] の値
1URLhttp://www.ipentec.com
2SiteNameiPentec
3Since2000/01/25
4mailcont@ipentec.com
5memoお気に入りに追加

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。[キーの一覧]に連想配列のキーの一覧がカンマ区切りで表示されます。また、[値の一覧]に連想配列に格納されている値の一覧がカンマ区切りで表示されます。


登録日 :2016-01-24    最終更新日 :2016-02-25
このページのタグ:[JavaScript] [連想配列]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)