連想配列(ハッシュ)

JavaScriptでは連想配列(ハッシュ)を扱うことができます。名前の通り配列なので通常の配列と同様にnew Array()または[]で用意し値を代入します。通常の配列では添字に数値を指定しますが、ここに文字列を指定すると連想配列(ハッシュ)となります。以下のサンプルでは連想配列(ハッシュ)のキーを長野県、その値を塩尻市としています。値の変わりに添字に文字列を指定すれば連想配列(ハッシュ)のキーに対応した内容を参照することができます。以下のサンプルでは画面には塩尻市と表示されます。(サンプル01を実行する)

a = new Array();
a["長野県"] = "塩尻市";
document.write(a["長野県"]);

連想配列(ハッシュ)は配列なので、ほぼ無制限にキーを指定し値を設定/参照する事ができます。以下のサンプルでは2つのキー、値を設定しています。(サンプル02を実行する)

a["長野県"] = "塩尻市";
a["山梨県"] = "甲府市";
document.write(a["長野県"]+"<br>");
document.write(a["山梨県"]+"<br>");

ここで注意しなければならないことがあります。配列のキーで文字列を指定したとしても、それが数値に変換可能な場合は、数値として変換され通常の配列の要素への参照となってしまう点です。実際に以下のサンプルで確認することができます。期待通りの動作をするのであれば表示される結果は塩尻市と甲府市でなければなりません。しかし、実際には甲府市の文字が2行に渡って表示されます。つまりa["0"]はa[0]とみなされてしまったことになります。(サンプル03を実行する)

a = new Array();
a[0] = "塩尻市";
a["0"] = "甲府市";
document.write(a[0]+"<br>");
document.write(a["0"]+"<br>");

上記サンプルで注意するのは添字に整数値を指定した場合だけです。JavaScriptでは配列の添字には整数値だけでなく小数値も指定することができます。連想配列(ハッシュ)の添字として1.0と文字列の"1.0"を指定した場合、この2つは全く別のものとみなされます。以下のサンプルを実行すると塩尻市と甲府市の文字が表示されます。(サンプル04を実行する)

a = new Array();
a[1.0] = "塩尻市";
a["1.0"] = "甲府市";
document.write(a[1.0]+"<br>");
document.write(a["1.0"]+"<br>");

連想配列(ハッシュ)は配列形式だけでなく.(ドット)区切りで指定することもできます。例えば以下のサンプルは連想配列(ハッシュ)として文字列を代入し、参照する際には.(ドット)で区切った形式で行っています。(サンプル05を実行する)

a = new Array();
a["nagano"] = "塩尻市";
a["yamanashi"] = "甲府市";
document.write(a.nagano+"<br>");
document.write(a.yamanashi+"<br>");

Firefoxではa["長野県"]とした場合、a.長野県でも参照できますが、Safariなどでは日本語部分でエラーになってしまいますので、日本語での指定は配列参照形式の方を利用することになります。つまり連想配列(ハッシュ)のキーが英文字であれば「配列名.キー名」として指定できることになります。
この「配列名.キー名」は何かの指定方法とそっくりです。つまり、「オブジェクト名.プロパティ名」と同じ書き方です。JavaScriptでは配列もオブジェクトですから、このような書き方でも問題なく処理されるようになっています。
逆もしかり、です。試してみましょう。一般的にオブジェクトへの参照は以下のサンプルのように「オブジェクト名.プロパティ名」になります。(サンプル06を実行する)

document.bgColor = "#ff5555";

この場合documentがオブジェクト名、bgColorがプロパティ名になります。これを連想配列(ハッシュ)の形式で書き直すと以下のようになります。(サンプル07を実行する)

document["bgColor"] = "#ff5555";

どちらでも同じようにページの背景色が赤色になります。
連想配列(ハッシュ)はオブジェクトと同じ扱いにできるわけですから、オブジェクトの内容を参照するfor...inを使えば連想配列(ハッシュ)内のデータを全て読み出す事ができます。(サンプル08を実行する)

a = new Array();
a["長野県"] = "塩尻市";
a["山梨県"] = "甲府市";
a["宮崎県"] = "日南市";
for (i in a) document.write(a[i]+"<br>");

for...inを使えば連想配列(ハッシュ)内のデータを読み出すことができますが、以下のように添字に参照番号を使ってしまうと期待通りに動作しません。(サンプル09を実行する)

a = new Array();
a["長野県"] = "塩尻市";
a["山梨県"] = "甲府市";
a["宮崎県"] = "日南市";
for (i=0; i<a.length; i++) document.write(a[i]+"<br>");

つまり上記のような書き方は駄目です。必ずfor...inを利用して参照するようにしてください。
連想配列(ハッシュ)内に特定のキーが存在するかどうかはifを使って行います。以下のサンプルでは連想配列(ハッシュ)のキーに宮崎県があるかどうか調べています。(サンプル10を実行する)

a = new Array();
a["長野県"] = "塩尻市";
a["山梨県"] = "甲府市";
a["宮崎県"] = "日南市";
if (a["宮崎県"]) {
document.write("宮崎県がありました");
}else{
document.write("宮崎県はありませんでした");
}

また、以下のようにif...inを使って調べることもできます。ただし、if...inはMac+IE5など古いブラウザではエラーとなり使えません。古いブラウザまで配慮しなければならない場合には利用することはできません。(サンプル11を実行する)

a = new Array();
a["長野県"] = "塩尻市";
a["山梨県"] = "甲府市";
a["宮崎県"] = "日南市";
if ("宮崎県" in a) {
document.write("宮崎県がありました");
}else{
document.write("宮崎県はありませんでした");
}

同様に古いブラウザでは動作しませんが、以下のようにプロパティリストの形式で連想配列(ハッシュ)を定義することもできます。(サンプル12を実行する)

a = { "長野県":"塩尻市",
"山梨県":"甲府市",
"宮崎県":"日南市" };
document.write(a["長野県"]+"<br>");
document.write(a["山梨県"]+"<br>");
document.write(a["宮崎県"]+"<br>");

新しいブラウザ、つまりDOM (Document Object Model) が利用できるブラウザ (IE, Firefox, Safari, Opera) であれば上記のような書き方が可能です。必要に応じて書き分ければよいでしょう。


最終更新日:2007年1月27日

>目次に戻る