配列リテラル

広告

このページからJavaScriptにおける配列の使い方を確認していきます。まずは配列リテラルの記述方法です。

配列の基本知識

配列は複数の値をまとめたものです。オブジェクトも同じように複数の値をまとめたものですが、配列の場合は各値に順番があります。例えば配列の中で先頭の値はどれであるとか、ある値の次の値はこの値といったように配列の中で各値は順番を付けて管理されています。

配列における各値を保存する場所または値そのものを配列の要素といいます。配列は複数の値をまとめて管理しているものですから、配列には複数の要素が含まれることになります。そして各要素に付けられている番号をインデックスといいます。

他のプログラミング言語では、配列の各要素には同じデータ型の値しか格納できないものもありますが、JavaScriptにおいては1つの配列の中にある各要素に別々のデータ型の値を格納することができます。

配列リテラルの記述

数値は「10」、文字列は「'Hello'」のように記述することができました。配列も同じようにスクリプトの中で値として記述することができます。数値の値を数値リテラルと呼びこともあるように、配列の値は配列リテラルと呼びます。

配列を値として記述する場合は、「[」から「]」の中に値を並べて記述します。各値はカンマで区切って下さい。 

[値1, 値2, 値3, ...]

具体的には次のように記述します。 

[86, 48, 119]
['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
['山田', '一郎', 24, '東京都']

先に記述したとおり配列の各値を保存する場所を要素といいます。最初の配列は要素が3つありそれぞれ数値が入っています。次の配列は要素が7つありそれぞれ文字列が入っています。最後の配列は要素が4つあり文字列と数値が混在しています。

配列リテラルは数値や文字列などと同じく変数に代入することができます。 

var array = [86, 48, 119];
なお配列リテラルのような参照型のデータを変数に代入する時は数値などを変数に代入する場合と扱いが異なります。詳しくは「参照型の値を変数へ代入」を参照して下さい。

要素の数が決まっていて、さらに要素に格納する値も決まっている場合は先ほどのように記述することができます。取り合えず配列だけ作成しておき要素はあとから追加したい場合、または要素数は決まっているが値が決まっていない場合は次のように記述することもできます。 

[]
[76,,87]
[,,,]

最初の配列は要素が0の配列、つまり空の配列となります。次の配列は要素の数は3つですが2番目の値が決まっていません。最後の配列は要素の数は4つですが値は全て決まっていません。

配列は要素の値を参照するだけではなく後から変更することができます。またJavaScriptでは後から要素の数を追加したり削除したりすることもできます。 

var array = [];
array[0] = 10;

なお、要素だけが決まっていて値が指定されなかった場合、その要素には未定義値(undefined)が格納されているものとして扱われます。

配列の値に式を記述する

配列リテラルを記述する場合、数値や文字列などの値の代わりに値が代入された変数を記述することもできます。次の例を見て下さい。 

var name1 = '山田';
var name2 = '遠藤';
var personal = [name1, name2];

これは次のように記述した場合と同じです。 

var personal = ['山田', '遠藤'];

また変数だけではなく、式を記述することも可能です。その為、次のような配列リテラルも記述できます。 

var num = 10;
var array = [num, num + 1, num * 2];

これは次のように記述した場合と同じです。 

var array = [10, 11, 20];
サンプルコード

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

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

</body>
</html>

var week = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var array = [10,,24];

document.write("<p>");

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

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

document.write("<p>");

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

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

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

p2-1

今回のサンプルではまだ解説していない事項がいくつか含まれています。ここでは参考程度に見ておいて下さい。

( Written by Tatsuo Ikura )