要素への値の代入と参照

広告

配列は複数の値を管理でき、その一つ一つは要素と呼ばれます。要素は通常の変数と同じように値を格納するための入れ物であり、直接値を代入したり取得したりすることが可能です。

前のページで確認したとおり配列リテラルを変数に代入するには次のように記述しました。 

var 変数名 = [値1, 値2, ...]

この時、配列リテラルへの参照が変数に代入されます。そして配列の各要素は次のように表すことができます。 

変数名[インデックス]

配列の参照が代入された変数に対して[]演算子を使うことで要素を表すことができます。[]の中には配列のインデックスと呼ばれる整数を記述します。インデックスは0から開始され順に1,2,3,...と割り当てられていきます。(インデックスの最大値は232-1です)。

例えば次のような配列があった場合で考えてみます。 

var week = ['Sun', 'Mon', 'Tue'];

この配列には3つの要素が含まれています。各要素にはインデックスが0、1、2と割り当てられており、順にweek[0]、week[1]、week[2]と記述することで要素を表すことができます。

要素1つ1つは変数と同じように扱うことができますので、要素に代入されている値を出力したり、他の変数に代入することができます。 

var week = ['Sun', 'Mon', 'Tue'];

alert(week[0]);
var str = week[1];
要素に値を代入

一度作成した配列は、各要素の値を参照するだけではなく別の値を代入することができます。配列の要素に値を代入するには次の書式を使います。 

変数名[インデックス] = 値;

配列の各要素1つ1つは変数と同じように扱うことができますので、「=」演算子を使って値を代入することができます。次の例を見てください。 

var week = ['Sun', 'Mon', 'Tue'];

week[0] = '日曜日';

配列のインデックス0の要素にはもともと「'Sun'」という値が格納されていましたが、代わりに「'日曜日'」という値を代入しています。

インデックスを変数を使って指定

配列の中で要素を特定するには[]演算子の中にインデックスと呼ばれる整数を記述しますが、インデックスは整数ですので整数の値が代入された変数を代わりに指定することもできます。 

var week = ['Sun', 'Mon', 'Tue'];

var index = 0;
alert(week[index]);

わざわざ変数を使ってインデックスを指定する目的は、変数であれば繰り返し処理と組み合わせることができるためです。 

var week = ['Sun', 'Mon', 'Tue'];

for (var index = 0; index < 3; index++){
  alert(week[index]);
}

インデックスを0から2まで順に変化させ、配列に含まれる要素を順に画面に表示させています。このように複数の値を繰り返し処理と組み合わせて処理することができることが配列の大きなメリットとなります。

サンプルコード

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

<!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/script3_1.js">
</script>

</body>
</html>

var week = ['Sun', 'Mon', 'Tue'];

document.write("<p>");

for (var i = 0; i < 3; i++){
  document.write(week[i] + "<br />");
}

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

week[0] = '日曜日';
week[2] = 'Tuesday';

document.write("<p>");

for (var i = 0; i < 3; i++){
  document.write(week[i] + "<br />");
}

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

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

p3-1

( Written by Tatsuo Ikura )