JavaScript 配列とは

配列とはもっとも基本的なデータ構造のひとつで、データの順序付き集合のことだ。
C/C++, Java, C# などと同様に 変数名[インデックス] で要素にアクセス可能である。
length や splice() など便利なプロパティやメソッドも用意されている。

宣言・初期化

本章では、vector オブジェクトの宣言・初期化方法について説明する。

配列を宣言するには、空配列を宣言する、全てのデータを指定して宣言する、 元データを指定して宣言する、他のオブジェクトを元にして宣言する、のようにいくつもの方法がある。 本章ではそれらの方法を順次解説する。

空の配列宣言

空の配列を作るには、変数を宣言し [] で初期化するか、Array オブジェクトを new で生成して初期化する方法がある。

	var ar = [];

	var ar = new Array();

どちらがいいかは好みかもしれないが、筆者的は簡潔な前者の方が好きだ。

JavaScript は動的型な言語なので、C/C++等の様に配列宣言時に要素の型を指定する必要はない。とってもお手軽だ。

空の配列に後から要素を追加することが出来る。その方法は、次章で説明する。

要素を指定して初期化

下記の様に、値をカンマで区切ったリストで、[] または () の中に記述することで、要素を指定して、配列を初期化できる。

	var ar = [1, 2, "abc", 3, "xyz"];

	var ar = new Array(1, 2, "abc", 3, "xyz");

JavaScript は型に寛容な言語なので、配列要素は同じ型である必要はない。
上記の例のように、数値、文字列、オブジェクトなど何でも指定できる。

２次元配列

配列の要素は何でも良いと先に書いたが、配列の要素として配列を記述することが出来る。それが、２次元配列となる。

	var ar = [[1, 2], ["abc", 3, "xyz"]];

	var ar = new Array(new Array(1, 2), new Array("abc", 3, "xyz"));

※ 中身を確認するために、console.log(ar) で配列を表示すると、[Array[2], Array[2]] の様に、２次元配列を分かる形式で表示されるが、 document.write(ar) で表示すると、２次元配列であっても 1,2,3,4 の様に要素が順に表示されるだけで、２次元配列かどうかは確認できない。
動作確認を行う場合は、document.write() よりも console.log() を使用した方がよいようである。

演習問題：解答例

1. 空の配列 ar を宣言し、中身をコンソールに表示するプログラムを書き、正しく動作することを確認しなさい。
2. 要素 [9, 8, "abc", "xyz"] を持つ配列 ar を宣言し、中身をコンソールに表示するプログラムを書き、正しく動作することを確認しなさい。
3. 要素 [[9, 8, 7], ["abc", "xyz":] を持つ配列 ar を宣言し、中身をコンソールに表示するプログラムを書き、正しく動作することを確認しなさい。

値の参照、代入

[] 演算子 を使って、他の言語の普通の配列と同じように、配列要素値の参照・代入が可能。
括弧の中には何番目の要素かを指定する数値を書く。これをインデックス（添字）と呼ぶ。数値0が最初の要素を表す。

	var ar = [3, 1, 4];
	document.write(ar[0]);		//	最初の要素の 3 が表示される
	ar[1] = 2;							//	２番めの要素を 2 に書き換える
	document.write(ar[1]);		//	2 が表示される

２次元配列の場合は 配列名[インデックス][インデックス] で参照する。

演習問題：解答例

データの追加

• 配列名[インデックス] = 値;
• unshift(値)
• push(値)
• splice(位置, 0, 値)

配列要素を追加する場合、単に「配列名[インデックス] = 値;」と記述するだけでよい。 インデックスで指定される要素が存在しない場合は、新たに要素が追加される。

C/C++ や Java などでは、固定配列と動的配列というものがあり、範囲外をアクセスすると例外（エラー）が発生する。
しかし、JavaScript は非常に柔軟な言語なので、範囲外をアクセスしてもエラーにはならず、柔軟に対応してくれる。
これは、エラーが見過ごされることがあり危険な場合もあるのだが、初級者には優しい仕様と言えるだろう。

	var ar3 = [3, 1, 4];
	ar3[5] = "abc";
	document.write(ar3);

上記のコードを実行すると「3,1,4,,,abc」と表示される。

この例のように離れたインデックスを指定すると、指定されなかった部分には unknown 要素が挿入される。
次章で説明する length で要素数を参照すると、自動的に挿入された部分もカウントされる。上記の例で言えば 要素数＝6 となる。

特別に先頭または末尾に要素を追加するためのメソッド：unshift(値), push(値) が用意されている。

	var ar = [1, 2, 3, 4];
	ar.unshift(0);		//	先頭に 0 を挿入
	document.write(ar);		//	0,1,2,3,4 が表示される
	ar.push(9);			//	末尾に 9 を追加
	document.write(ar);		//	0,1,2,3,4,9 が表示される

C++ には、「+= 要素」や、「+= 動的配列」で要素を追加することが可能な動的配列クラスがあるが、JavaScript の配列はそれをサポートしていないようである。

その代わりと言ってなんだが、unshift(), push() に複数の引数を指定することができる。

	var ar = [1, 2, 3, 4];
	ar.unshift(0, 12);		//	先頭に 0, 12 を挿入
	document.write(ar);		//	0,12,1,2,3,4 が表示される
	ar.push(9, 8, 7);			//	末尾に 9, 8, 7 を追加
	document.write(ar);		//	0,12,1,2,3,4,9,8,7 が表示される

このあたりはかなり柔軟だ。さすが JavaScript。

JavaScript 配列には何故か insert() メソッドが無いので、削除も行う splice(位置、削除個数、値) メソッドを使用する。
削除個数に 0 を指定すると、指定位置への単なる挿入になる。

	var ar = [1, 2, 3, 4];
	ar.splice(1, 0, "hoge");
	document.write(ar);		//	1,"hoge",2,3,4 が表示される

演習問題：解答例

データの削除

1. shift()
2. pop()
3. splice(位置, 削除数)

その他のメンバ関数

オブジェクトの状態を取得

1. length

オブジェクトの要素を取得

オブジェクトの状態を変更

演習問題：解答例

参考

---

演習問題解答例

　

　 宣言

値の参照、代入

データの追加

データの削除

その他のメンバ関数