JavaScript 配列

今回は配列をやります。

定義

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
<script type="text/javascript">
	// 空の配列
	var ary1 = [];
	var ary2 = new Array();

	// 初期値がセットされた配列
	var ary3 = ["aaa","bbb"];
	var ary4 = new Array("aaa","bbb");

	// 領域だけ確保
	var ary5 = [,,];
	var ary6 = new Array(3);
</script>
</head>
<body>
</body>
</html>

配列は [ ] で定義します。オブジェクトは { } で定義します。

配列のループ

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
<script type="text/javascript">

	// 配列のループ
	var ary = ["one","two","three"];

	// EcmaScript5
	Object.keys(ary).forEach(function (key) {
		console.log("Object.keys:" + ary[key]);
	});

	// EcmaScript6
	for(let val of ary){
		console.log("of:" + val);
	}

	// inは使い方により予想外の動作をするため使わない方がいい
	for(var idx in ary){
		console.log("in:" + ary[idx]);
	}

	for(var n = 0;n < ary.length;n++){
		console.log("len:" + ary[n]);
	}
</script>
</head>
<body>
</body>
</html>

ループする場合、配列をObject.keys、of、inでループするか、配列のサイズ(.length)を出して、サイズ分だけループさせます。

配列の追加

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
<script type="text/javascript">
	// 空の配列
	var ary = [];

	// 要素の追加
	ary[0] = "aaa";

	// 最後に要素を追加
	ary.push("end");

	// 最初に要素を追加
	ary.unshift("start");

	// 指定場所に要素を追加
	// (挿入位置,0,要素,・・・)
	ary.splice(2,0,"bbb","ccc");

	//start,aaa,bbb,ccc,endと表示される
	alert(ary.toString());
</script>
</head>
<body>
</body>
</html>

配列に要素を追加する場合、インデックスを指定するか、push、unshift、splice関数を使用します。

配列の参照、削除


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
<script type="text/javascript">
	// 配列の初期化
	var ary = ["start","aaa","bbb","end"];

	// 配列の参照(aaaが出力)
	console.log(ary[1]);

	// 指定位置、サイズの配列の抜き出し(bbbが配列で出力され、元配列から削除)
	console.log(ary.splice(2,1));

	// 一番後ろの配列の抜き出し(endが出力され、元配列から削除)
	console.log(ary.pop());

	// 一番前の配列の抜き出し(startが出力、元配列から削除)
	console.log(ary.shift());

	// 上の３処理でそれぞれ配列の中身を削除しているため、ここでは1が出力
	console.log(ary.length);
</script>
</head>
<body>
</body>
</html>

配列を参照するにはインデックスを指定します。配列から値を取り出し、同時に削除する場合は、pop、shift関数を使用します。
指定インデックスの配列を削除するにはspliceメソッドを使います。使い方は関数を参照。

関数

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
<script type="text/javascript">

	// 文字列を指定文字で区切り、配列作成
	var ary = "111,2,33,4,5".split(",");

	// 配列を文字列に変更
	console.log(ary.toString());
	// → 111,2,33,4,5

	// 配列の大きさ
	console.log(ary.length);
	// → 5

	// 配列の大きさを変更
	ary.length = 3;
	console.log(ary.toString());
	// → 111,2,33

	// 配列の順番を逆に並び替え
	ary.reverse();
	console.log(ary.toString());
	// 111,2,33 → 33,2,111

	// 配列の順番を並び替え
	ary.sort();
	console.log(ary.toString());
	// 33,2,111 → 111,2,33

	// ソート条件の指定(数値順)
	ary.sort(function(a,b){return a-b});
	console.log(ary.toString());
	// 111,2,33 → 2,33,111

	// 区切り文字指定の文字列出力
	console.log(ary.join("-"));
	// 2,33,111 → 2-33-111

	// 配列の結合(元配列の変更なし)
	var ary2 = ary.concat([6,7]);
	console.log(ary2.toString());
	// 2,33,111 → 2,33,111,6,7


	// 指定箇所の抜き出し(元配列の変更なし)
	// (開始位置、終了位置[省略可])
	console.log(ary2.slice(1,4).toString());
	// 2,33,111,6,7 → 33,111,6


	// ★配列指定位置の削除にも使える↓

	// 配列の分割(元配列の変更あり)
	// (開始位置、長さ[省略可])
	var ary3 = ary2.splice(1,2);
	console.log(ary3.toString());
	// 2,33,111,6,7 → 33,111

	console.log(ary2.toString());
	// 2,33,111,6,7 → 2,6,7

</script>
</head>
<body>
</body>
</html>

配列で使える主な関数の例を記述しました。動作についてはコメントを参照して下さい。

配列の存在チェック


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
<script type="text/javascript">
	// 配列の初期化
	var ary = ["start","aaa","end"];

	//配列の存在チェック
	if(ary.indexOf("aaa") >= 0){
		alert("OK")
	}
	if(ary.indexOf("bbb") >= 0){
		alert("NG")
	}

</script>
</head>
<body>
</body>
</html>

ページのトップへ戻る