ViVi Home > 技術文書 > さくさく理解する JavaScript 入門 >
さくさく理解する JavaScript 配列入門


 

 

さくさく理解する
JavaScript 配列入門
Copyright (C) 2014 by Nobuhide Tsuda

目次

  1. JavaScript 配列とは
  2. 宣言・初期化
  3. 値の参照、代入
  4. データの追加
  5. データの削除
  6. その他のメンバ関数
  7. 参考
  8. 演習問題解答例

関連ページ

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

2次元配列

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

	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]] の様に、2次元配列を分かる形式で表示されるが、 document.write(ar) で表示すると、2次元配列であっても 1,2,3,4 の様に要素が順に表示されるだけで、2次元配列かどうかは確認できない。
動作確認を行う場合は、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番めの要素を 2 に書き換える
	document.write(ar[1]);		//	2 が表示される

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

演習問題:解答例

データの追加

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

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

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

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

演習問題:解答例

参考


演習問題解答例

 

  宣言

値の参照、代入
データの追加
データの削除
その他のメンバ関数