連想配列を使ったプロパティへの値の代入と参照

広告

前のページで確認したとおり、オブジェクトのプロパティはドット演算子を使って次のように表すことができます。 

変数名.プロパティ名

オブジェクトのプロパティはドット演算子を使用する以外に次のような形式でも表すことができます。 

変数名["プロパティ名"]

配列を表すために使用する[]演算子の中にプロパティ名を文字列として指定します。このようにオブジェクトを配列のように見たて、インデックスの代わりにプロパティ名を指定して要素にアクセスする使い方を連想配列と呼びます。

例えば次のようなオブジェクトがあった場合で考えてみます。 

var obj = {width:100, height:80};

このオブジェクトには2つのプロパティが含まれています。プロパティの1つはプロパティ名が「width」、もう1つのプロパティはプロパティ名が「height」となっています。よってプロパティはそれぞれobj["width"]、obj["height"]と表すことができます。

ドット演算子を使ってプロパティを表した場合と同じく、プロパティに代入されている値を出力したり、他の変数に代入することができます。またプロパティに値を代入することもできます。 

var obj = {width:100, height:80};

alert(obj["width"]);
var num = obj["height"];

obj["width"] = 120;
連想配列形式のメリット

ドット演算子の代わりに連想配列の形式でプロパティにアクセスするメリットは2つあります。1つ目のメリットはプロパティ名として文字列を指定した場合でもプロパティに対してアクセスできる点です。

オブジェクトリテラルを記述する時に、プロパティ名として文字列を使って指定し、さらにその文字列が識別子の形式になっていない場合にはドット演算子を使ってプロパティへアクセスすることはできませんでした。例えば次のような記述はエラーとなります。 

var obj = {'1st':100, 'Top border':80};

alert(obj.1st);

それに対して連想配列の形式の場合は、どのようなプロパティ名を使った場合でもプロパティにアクセスすることができます。 

var obj = {'1st':100, 'Top border':80};

alert(obj["1st"]);
alert(obj["Top border"]);

2つ目のメリットはプロパティ名を文字列として指定するため変数を使用できる点です。

例えば次の例を見てください。 

var obj = {"2007year":245, "2008year":312, "2009year":193};

for (var i = 2007; i <= 2009 ; i++){
  var name = i + "year";
  alert(obj[name]);
}

配列演算子[]の中に記述するプロパティ名は文字列として指定しますので、文字列が代入された変数を代わりに指定することができます。

またfor..in文と組み合わせることでオブジェクトに含まれるプロパティの値を順に取り出すことができます。(for..in文については「for..in文」を参照して下さい)。 

var obj = {Tokyo:114, Osaka:80, Nagoya:76};
var sum = 0;

for (var pname in obj){
  sum += obj[pname];
}
サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script4_1.js">
</script>

</body>
</html>

var obj = {"2007year":245, "2008year":312, "2009year":193};

document.write("<p>");

for (var i = 2007; i <= 2009 ; i++){
  var name = i + "year";
  document.write(name + " is " + obj[name] + "<br />");
}

document.write("</p>");

var sum = 0;

for (var pname in obj){
  sum += obj[pname];
}

document.write("<p>");

document.write("Total = " + sum);

document.write("</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p4-1

( Written by Tatsuo Ikura )