JavaScript入門講座

Home > 配列

配列

配列とは同じ形式のデータが入る入れ物の集合体といえます。配列では先頭から順番に0,1,2,・・・とインデックス番号が割り当てられます。

配列のイメージ図

配列に値をセットする方法

配列に値をセットする方法としては宣言時に値をセットする方法と、空の配列を宣言してから値をセットする方法があります。

宣言時に値をセットする方法では、カンマ区切りの値を[]で囲ってセットします。


//配列に値をセット
var arr = ['ABC','DEF','GHI','JKL','MNO'];

空の配列を宣言してから値をセットする方法では空の配列を宣言後、インデックス番号を指定して値をセットします。


//空の配列を宣言
var arr = [];

//配列に値をセット
arr[0]='ABC';
arr[1]='DEF';
arr[2]='GHI';
arr[3]='JKL';
arr[4]='MNO';

配列から値を取得する方法

配列から値を取得するにはインデックス番号を指定して取得します。


var arr = ['ABC','DEF','GHI','JKL','MNO'];

//配列の値を表示
document.write(arr[0] , "<br />"););
document.write(arr[1] , "<br />"););
document.write(arr[2] , "<br />"););
document.write(arr[3] , "<br />"););
document.write(arr[4]);

forステートメントを使用すると配列にセットした値を全て取得すことができます。


var arr = ['ABC','DEF','GHI','JKL','MNO'];
//配列の値を全て表示
for(var i = 0 ; i < 5 ; i++){
	document.write(i,'番目の値:',arr[i],"<br />");
}

なお、配列の要素数はlengthプロパティを使用することにより取得することができます。以下はlengthプロパティを使用して配列にセットした値を全て取得しています。


var arr = ['ABC','DEF','GHI','JKL','MNO'];
//配列の値を全て表示
for(var i = 0 ; i < arr.length ; i++){
	document.write(i,'番目の値:',arr[i],"<br />");
}

配列の初期化

配列には動的に値をセットすることが可能です。以下はforステートメントを使用して要素数を10とした場合の配列の初期化のサンプルです。


//空の配列を用意
var arr = [];

//配列に値をセット
for(var i = 0 ; i < 10 ; i++){
	arr[i] = i;
}

//配列の内容を表示
for(var i = 0 ; i < arr.length ; i++){
	document.write(arr[i]+"<br />");
}

Arrayオブジェクトを使用して配列を初期化する場合、明示的に要素数を指定して宣言することができます。


var arr = new Array(10); //0~9

//配列に要素をセット
for(var i = 0 ; i < arr.length ; i++){
	arr[i] = i;
}

//配列の内容を表示
for(var i = 0 ; i < arr.length ; i++){
	document.write(arr[i]+"<br />");
}

2次元配列について

2次元配列に値を設定する場合は、配列を入れ子にして指定します。


var arr = [['A','B','C'],['D','E','F'],['G','H','I']];

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

2次元配列のイメージ図

2次元配列の初期化

2次元配列の要素数を決めて初期化して使用する場合、宣言時に[]の中にカンマ(,)を要素数-1 分、記述して更に入れ子で[]の中にカンマ(,)を要素数-1 記述します。以下は配列の要素数を3 X 10とした場合のサンプルです。


//2次元配列を初期化(3行10列の2次元配列)
var arr = [];
for (var i = 0; i < 3 ; i++) {
	arr[i] = [,,,,,,,,,];	//0~9
}

//2次元配列に値をセット
for(var i = 0 ; i < arr.length ; i++){
	for(var j = 0 ; j < arr[i].length ; j++){
		arr[i][j] = i +','+ j ;
	}
}

//2次元配列の内容を表示
for(var i = 0 ; i < arr.length ; i++){
	for(var j = 0 ; j < arr[i].length ; j++){
		document.writeln(arr[i][j]);
	}
	document.write("<br />");
}

2次元配列のイメージ図

Arrayオブジェクトを使用して2次元配列を初期化する場合、明示的に要素数を指定して宣言することができます。


//2次元配列を初期化(3行10列の2次元配列)
var arr = new Array(3);	//0~2

for (var i = 0; i < arr.length; i++){
	arr[i] = new Array(10);	//0~9
}

//2次元配列に値をセット

for (var i = 0; i < arr.length; i++){
	for (var j = 0; j < arr[i].length; j++){
		arr[i][j] = i +','+ j ;
	}
}

//2次元配列の内容を表示
for (var i = 0; i < arr.length; i++){
	for (var j = 0; j < arr[i].length; j++){
		document.writeln(arr[i][j]);
	}
	document.write("<br />");
}