JavaScript 配列を作成するサンプル

JavaScriptの配列を作成するサンプルです。

目次

配列

  • ひとつの変数に複数の値を設定することができます。
  • 配列のそれぞれの値はインデックス番号でアクセスできます。
  • インデックス番号は0から始まります。

配列リテラルで配列を作成する

配列リテラルで配列を作成するサンプルです。
9行目は、配列リテラル(["赤","黄","青"])で配列を作成しています。
11行目は、変数の値を表示しています。
14-16行目は、インデックス番号を指定してそれぞれの値を表示しています。
一般的に、後述のArrayオブジェクトより、配列リテラルの使用が推奨されています。
(理由:わかりやすい。バグを防ぐ。)

<script>
// 変数に配列の値を設定
var ar1 = ["赤","黄","青"];

// 配列の変数を表示→カンマ区切りで表示される
document.writeln(ar1,"<br />"); // 赤,黄,青

// 配列名[インデックス番号]で個別の値を表示
document.writeln(ar1[0],"<br />"); // 赤
document.writeln(ar1[1],"<br />"); // 黄
document.writeln(ar1[2],"<br />"); // 青
</script>

Arrayオブジェクトで配列を作成する

Arrayオブジェクトで配列を作成するサンプルです。
3行目は、Arrayオブジェクトのコンストラクタで配列を作成しています。
10行目は、Arrayオブジェクトのコンストラクタで配列の数を定義しています。
11-13行目は、インデックス番号を使用して配列の値をセットしています。

<script>
// Arrayオブジェクトのコンストラクタを使用
var ar2 = new Array("あ","い","う");

document.writeln(ar2[0],"<br />"); // あ
document.writeln(ar2[1],"<br />"); // い
document.writeln(ar2[2],"<br />"); // う

// Arrayオブジェクトのコンストラクタで配列の数を設定
var ar3 = new Array(3);
ar3[0] = "A";
ar3[1] = "B";
ar3[2] = "C";
document.writeln(ar3[0],"<br />"); // A
document.writeln(ar3[1],"<br />"); // B
document.writeln(ar3[2],"<br />"); // C
</script>

入れ子の構造の配列を作成する

入れ子の構造の配列を作成するサンプルです。
3-7行目は、入れ子の構造の配列を作成しています。
14-16行目は、インデックス番号を2つ使用して配列の値を参照しています。

<script>
// 変数に配列の値を設定
var ar1 = [
	"色の種類",
	["赤","黄","青"],
	["緑","白","黒"]
];

// 配列名[インデックス番号]で個別の値を表示
document.writeln(ar1[0],"<br />"); // 色の種類
document.writeln(ar1[1],"<br />"); // 赤,黄,青
document.writeln(ar1[2],"<br />"); // 緑,白,黒

document.writeln(ar1[1][0],"<br />"); // 赤
document.writeln(ar1[1][1],"<br />"); // 黄
document.writeln(ar1[1][2],"<br />"); // 青
</script>

連想配列を作成する

連想配列を作成するサンプルです。
3行目は、連想配列を作成しています。
6-8行目は、作成した名前をキーにして値を表示しています。

<script>
// 変数に配列の値を設定
var ar1 = {c1:'赤',c2:'黄',c3:'青'};

// 名前を指定して個別の値を表示
document.writeln(ar1["c1"],"<br />"); // 赤
document.writeln(ar1["c2"],"<br />"); // 黄
document.writeln(ar1["c3"],"<br />"); // 青

</script>

Arrayオブジェクト

関連の記事

JavaScript if文の配列の比較のサンプル
JavaScript 配列の値をループで取得するサンプル(for…in文)
JavaScript 配列を操作するサンプル(Arrayオブジェクト)




△上に戻る