スタートページJavascript

連想配列

通常の配列は、「配列名[添字]」の形式で要素が特定され、添字は自然数に限定されています。それに対して、連想配列では、添字に相当するものが文字列で、それをキー名といいます。連想配列は、一つの要素は「キー名:値」のペアになっており、「配列名["キー名"]」または「配列名.キー名」の形式で要素を特定します。
 例えば、、配列名を「性別」、キー名を「阿部」とすると、
    性別["阿部"] = "男"
    男女 = 性別,阿部      (男女 = "男" になる)
のように記述します。


連想配列の概念

ここでは、社員「阿部」「伊藤」「宇野」について、3つの連想配列「カナ」「性別」「年齢」を設定しました。
ここで「阿部」「伊藤」「宇野」は、配列の項目要素ではなく、キーの名称になっています。
(縦に「阿部」「伊藤」などの氏名、横に「カナ」や「性別」などの属性をとった2次元配列にするのが通常ですが、それは「2次元連想配列」で後述し、ここでは連想配列の説明のために、やや不自然ですが、あえてこのようにしています)。

連想配列は、「配列名 = {キー名:値, キー名:値, …};」で定義します。

	var カナ = {阿部:"アベ", 伊藤:"イトウ", 宇野:"ウノ"};
	var 性別 = {阿部:"男", 伊藤:"女"};       // 宇野は性別未定義
	var 年齢 = {阿部:35, 宇野:25};           // 伊藤は年齢未定義

ある配列のあるキーの値は、次の2つの表記で変数として使えます。
    配列名.キー名     例:カナ.阿部     (A)ドット演算子による表記法
    配列名["キー名"]   例:カナ["阿部"]    (B)ブラケット構文による表記法
 この変数は左辺にも右辺にも使えます。
    カナ.阿部 = "アベ";
    氏名 = カナ["阿部"]; → 氏名 = "アベ"
 Bの場合、キー名を変数にすることができます。
    名前 = "伊藤";
    男女 = 性別[氏名];  → 男女 = "女"
  (Bは、Aと比較して、記述は煩雑ですが、キー名を変数にできるので、処理の記述ではBのほうが便利です。)

なお、未定義の要素を参照すると「undefined」になります。
    男女 = 性別.宇野;  → 男女 = undefined

AやBにならって、配列を次のように記述することもできます。

	var カナ = new Array;     (A)
		カナ.阿部 = "アベ";
		カナ.伊藤 = "イトウ";
		カナ.宇野 = "ウノ";

	var 性別 = new Array;     (B)
		性別["阿部"] = "男";
		性別["伊藤"] = "女";

連想配列の走査

連想配列では、
    for (i==0; i<配列.length; i++) {   }
のようなループは使えません。
それにかわって、for (キー in 配列名) {   } を用います。これは「配列のなかにあるすべての要素(キー)について」の意味です。

例1:配列の長さ

配列「カナ」の要素数「配列長」を得るには、次のように記述します。「阿部」「伊藤」「宇野」の3つのキーがあるので、配列長の値は3になります。

	var 配列長 = 0;
	for (キー in カナ) {      // 「キー」 は任意の変数
		配列長 ++;
	}

例2:配列のキーと値の取得

配列「年齢」にあるすべてのキーについての値をリストするには、次のように記述します。変数「キー」には「阿部」「宇野」などのキー名、「年齢[キー]」にはそれぞれの値が入ります。その結果、変数「リスト」は
    阿部=35,宇野=25,
となります。

	リスト = "";
	for (キー in 年齢) {
		リスト += キー + "=" + 年齢[キー] + ",";
	}
	alert(リスト);

例3:配列間の参照

配列「カナ」には全員がキーとして与えられているとします。それと配列「性別」「年齢」を組み合わせた一覧表を作成します。

	一覧表 = "<table><tbody>"
		+ "<tr><td>氏名</td><td>名前</td><td>男女</td><td>歳</td></tr>";
	for (氏名 in カナ) {
		名前 = カナ[氏名];
		男女 = 性別[氏名];
		歳 = 年齢[氏名];
		一覧表 += "<tr><td>" + 氏名 + "</td><td>" + 名前 + "</td><td>" 
			 + 男女 + "</td><td>" + 歳 + "</td></tr>";
	}
	一覧表 += "</tbody></table>";
	document.getElementById("表示場所").innerHTML  = 一覧表;
}

これにより、BODY部の
    <div id="表示場所"></div>
に次の表が表示されます。

	氏名 名前  男女   歳
	阿部 アベ  男    35
	伊藤 イトウ 女    undefined
	宇野 ウノ  undefined 25

例4:条件による検索

性別が男である氏名を検索します。この場合は「阿部」だけが該当します。

	for (氏名 in 性別) {
		if (性別[氏名] == "男") {
			alert(氏名);
		}
	}

2次元連想配列

縦に「阿部」「伊藤」などの氏名、横に「カナ」や「性別」などの属性をとった2次元配列を対象にします。
ここでは「連想配列の概念」のときと逆に、「阿部」「伊藤」などを配列、「カナ」や「性別」などをキーにします。

社員表のイメージ

	氏名 名前  男女   歳
	阿部 アベ  男    35
	伊藤 イトウ 女    undefined
	宇野 ウノ  undefined 25

社員表の定義

	社員表 = new Array();
		社員表["阿部"] = {カナ:"アベ", 性別:"男", 年齢:35};
		社員表["伊藤"] = {カナ:"イトウ", 性別:"女"};
		社員表["宇野"] = {カナ: "ウノ", 年齢:25};

次のいずれも「阿部の性別」の値を示しています。
    社員表["阿部"]["性別"]
    社員表["阿部"].性別
    社員表.阿部["性別"]
    社員表.阿部.性別

それで、上の「社員表」は次のように記述することもできます。

	社員表 = new Array();
		社員表["阿部"] = {カナ:"アベ", 性別:"男", 年齢:35};
		社員表["伊藤"] = new Array();
			社員表["伊藤"]["カナ"] = "イトウ";
			社員表["伊藤"].性別 = "女";
		社員表.宇野 = new Array();
			社員表.宇野["カナ"] = "ウノ";
			社員表.宇野.年齢 = 25;

2次元連想配列の処理

例5:2重ループ

「社員表」で与えたデータを全て取り出す処理を示します。

1	一覧表 = "";
2	for (氏名 in 社員表) {
3		一覧表 += "氏名=" + 氏名 + ": ";
4		for (属性 in 社員表[氏名]) {
5			一覧表 += 属性 + "=" + 社員表[氏名][属性] + ", ";
6		}
7		一覧表 += "<br>";
8	}

一覧表の出力
    氏名=阿部: カナ=アベ, 性別=男, 年齢=35,
    氏名=伊藤: カナ=イトウ, 性別=女,
    氏名=宇野: カナ=ウノ, 年齢=25,

2~8のループは、最初に氏名="阿部"、次に氏名="伊藤"、次に氏名="宇野"となります。
4では、属性は社員表[氏名]に含まれるキーですから、
  氏名="阿部" のときは、属性="カナ"、属性="性別"、属性="年齢" としてループ4~6を処理します。
    属性="カナ" のときは、社員表[氏名][属性]は 社員表["阿部"]["カナ"] なので「アベ」になります。
    同様に、属性="性別" のときは、社員表["阿部"]["性別"] なので「男」
    属性="年齢" のときは、社員表["阿部"]["年齢] なので「35」 になります。
    結果として、「氏名=阿部: カナ=アベ, 性別=男, 年齢=35」が表示されます。
  同様に、氏名="伊藤" のときは、属性="カナ"、属性="性別" なので、
    「氏名=伊藤: カナ=イトウ, 性別=女」
  氏名="宇野" のときは、属性="カナ"、属性="年齢" なので、
    「氏名=宇野: カナ=ウノ, 年齢=15」となります。

例6:条件による検索

社員表から、「女または30歳以下」の氏名を得るには、次のようにします。「伊藤」と「宇野」が該当します。

	for (氏名 in 社員表) {
		if ( (社員表[氏名]["性別"] == "女") || (社員表[氏名]["年齢"] <= 30 ) ){
			alert(氏名);
		}
	}

例6と例4を比較すると、例4では、一次元の配列「性別」だけを走査すればよいのに対して、例6では2次元配列全体を走査する必要があります。しかし、例4で例6のような複合条件を記述するのは困難です。