連想配列のすべてのキーを取得する、連想配列のすべての要素を取得する - 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 の値 |
|---|
| 1 | URL |
| 2 | SiteName |
| 3 | Since |
| 4 | mail |
| 5 | memo |
GetAllValue() 関数は連想配列の値をすべて取得し、カンマ区切りの文字列として返す関数です。連想配列の値を直接列挙はできないため、for in 文で連想配列のキーを列挙し、そのキーを利用して連想配列にアクセスして値を取得します。
ループごとのitemの値は以下になります。
| ループ回数 | item の値 | data[item] の値 |
|---|
| 1 | URL | http://www.ipentec.com |
| 2 | SiteName | iPentec |
| 3 | Since | 2000/01/25 |
| 4 | mail | cont@ipentec.com |
| 5 | memo | お気に入りに追加 |
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。[キーの一覧]に連想配列のキーの一覧がカンマ区切りで表示されます。また、[値の一覧]に連想配列に格納されている値の一覧がカンマ区切りで表示されます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
