JavaScriptの配列 vol.1 -配列の宣言- - 真夜中のプログラミングTips

JavaScriptの摩訶不思議な構文・文法に慣れるため、基本的な構文・文法を真摯に勉強しています。「JavaScriptなんてデザイナーでも使える言語」と言う人もいるかもしれませんが、オリジナルのスクリプトをあれこれ書こうとすると凄く難しい言語です。

その理由はいたってシンプルです。お手軽なサンプルばかりを載せて、基本構文・文法をしっかり説明した書籍がほとんどなく、オリジナルのスクリプトを作ろうとすると、基本的なことでつまずいてしまうためです。（少なくとも自分はそう思います。）

さて、前置きが長くなりましたが、JavaScriptの配列についてあれこれ調べたので、個人的な備忘録も兼ねて記します（他の誰かの役に立てばそれはそれで嬉しいことです）。

1. 配列の宣言

JavaScriptの難しさはいろいろな意味で“緩すぎる”ことだと思います。配列の宣言だけとっても、以下のようなバリエーションがあります。（もしかしたら他にもあるのかもしれません。あれば教えて下さい。）
(1)

var arr_sample_1 = new Array(3); //要素数を指定して宣言
arr_sample_1[0]  = "abc";
arr_sample_1[1]  = "def";
arr_sample_1[2]  = "ghi";

(2)

var arr_sample_2 = new Array(); //要素数を指定せず宣言
arr_sample_2[0]  = "abc";
arr_sample_2[1]  = "def";
arr_sample_2[2]  = "ghi";

(3)

var arr_sample_3 = new Array("abc", "def", "ghi"); //要素を格納しつつ宣言

(4)

// JavaScript1.2以降では以下の宣言方法も可能
var arr_sample_4 = ["abc", "def", "ghi"]; //要素を格納しつつ宣言

(5)
これは特殊な宣言方法です。正確には(1)〜(4)と同じではありません。

function MakeArray(len){
	this.length = len;
	for(i=0; i < this.length; i++){
		this[i] = "";
	}
}
var arr_sample_5 = new MakeArray(3);
arr_arr_sample_5[0]  = "abc";
arr_arr_sample_5[1]  = "def";
arr_arr_sample_5[2]  = "ghi";

/* 応用例 */
function MakeArray109(len){
	this.length = len;
	for(i=0; i < this.length; i++){
		this[i] = 109;
	}
}
var arr_tokyu = new MakeArray109(3); // 要素数3, 全要素の値109 の配列

私が知っているだけでも、以上の5つのバリエーションがあります。特に(4), (5) については知っていないと、配列と認識することすら難しいと思います。以下、確認用コピー＆ペースト用のソースとなりますので、そのままコピーして動かして確認してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift-jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScriptの配列</title>
</head>
<body>
<script type="text/javascript">
<!--
//配列の要素数,キーと値を表示する関数
function ShowArrayInfo(array){
	document.write("配列要素数:"+array.length+"<br>");
	for(i in array){
		document.write("キー:"+i+"　値:"+array[i]+"<br>");
	}
}
//(1)
var arr_sample_1 = new Array(3);
arr_sample_1[0]  = "abc";
arr_sample_1[1]  = "def";
arr_sample_1[2]  = "ghi";

//(2)
var arr_sample_2 = new Array();//要素数を指定しない
arr_sample_2[0]  = "abc";
arr_sample_2[1]  = "def";
arr_sample_2[2]  = "ghi";

//(3)
var arr_sample_3 = new Array("abc", "def", "ghi");

//(4)
var arr_sample_4 = ["abc", "def", "ghi"]; //JavaScript1.2以降

//(5)
function MakeArray(len){
	this.length = len;
	for(i=0; i < this.length; i++){
		this[i] = "";
	}
}
var arr_sample_5 = new MakeArray(3);
arr_sample_5[0]  = "abc";
arr_sample_5[1]  = "def";
arr_sample_5[2]  = "ghi";

//(1) 〜 (5) までを定義関数ShowArrayInfoを使って表示すると、(5)を除いてすべて同じ結果になります。
document.write("<p>");
document.write("(1)<br>");
ShowArrayInfo(arr_sample_1);
document.write("<br>(2)<br>");
ShowArrayInfo(arr_sample_2);
document.write("<br>(3)<br>");
ShowArrayInfo(arr_sample_3);
document.write("<br>(4)<br>");
ShowArrayInfo(arr_sample_4);
document.write("<br>(5)<br>");
ShowArrayInfo(arr_sample_5);
document.write("</p>");

// -->
</script>
</body>
</html>

なお、Firefox1.5での出力結果は以下となり、(5)だけ異なることがわかります。

(1)
配列要素数:3
キー:0　値:abc
キー:1　値:def
キー:2　値:ghi

(2)
配列要素数:3
キー:0　値:abc
キー:1　値:def
キー:2　値:ghi

(3)
配列要素数:3
キー:0　値:abc
キー:1　値:def
キー:2　値:ghi

(4)
配列要素数:3
キー:0　値:abc
キー:1　値:def
キー:2　値:ghi

(5)
配列要素数:3
キー:length　値:3
キー:0　値:abc
キー:1　値:def
キー:2　値:ghi