【配列と連想配列】javascript入門

配列と連想配列の特徴を理解しておくといいと思います。
本記事では、配列と連想配列の比較を行い
連想配列のメリットを一つ紹介しようと思います。

配列

野菜の情報を格納した配列を作成します。
配列の中身を確認する際に、For文で展開し、indexを指定して
値を確認します。
下記のサンプルの場合、
インデックス0で、野菜のID(番号)が確認でき、
インデックス1で、野菜の名前が確認できます。

			//野菜リストを作成します。
			var vegetablesList = [];
			var vegetables1 = ["1" ,"レタス"];
			var vegetables2 = ["2" ,"ジャガイモ"];
			var vegetables3 = ["3" ,"人参"];
			vegetablesList.push(vegetables1);
			vegetablesList.push(vegetables2);
			vegetablesList.push(vegetables3);

			//野菜リストの情報を展開します。
			console.log("＜配列展開結果＞");
			for (var i = 0; i < vegetablesList.length; i++) {
				//vegetablesList[i][0] → 野菜のID : vegetablesList[i][1] → 野菜の名称
				//※indexを指定して、アクセスする必要があり、ソースを見た段階では理解しずらい。
				console.log(vegetablesList[i][0] + ":" + vegetablesList[i][1]);
			}

//野菜リストを作成します。

var vegetablesList = [];

var vegetables1 = ["1" ,"レタス"];

var vegetables2 = ["2" ,"ジャガイモ"];

var vegetables3 = ["3" ,"人参"];

vegetablesList.push(vegetables1);

vegetablesList.push(vegetables2);

vegetablesList.push(vegetables3);

//野菜リストの情報を展開します。

console.log("＜配列展開結果＞");

for (var i = 0; i < vegetablesList.length; i++) {

//vegetablesList[i][0] → 野菜のID : vegetablesList[i][1] → 野菜の名称

//※indexを指定して、アクセスする必要があり、ソースを見た段階では理解しずらい。

console.log(vegetablesList[i][0] + ":" + vegetablesList[i][1]);

}

連想配列

一方、連想配列の場合、インデックスの指定ではなく、
キー名で値を確認することができます。
下記のサンプルの場合、
fruitIdで、果物のID(番号)が確認でき、
fruitNameで、果物の名前が確認できます。

			//果物リストを作成します。
			var fruitList = [];
			var fruit1 = {fruitId:"1" ,fruitName:"ぶどう"};
			var fruit2 = {fruitId:"2" ,fruitName:"みかん"};
			var fruit3 = {fruitId:"3" ,fruitName:"めろん"};
			fruitList.push(fruit1);
			fruitList.push(fruit2);
			fruitList.push(fruit3);

			//果物リストの情報を展開します。
			console.log("＜連想配列展開結果＞");
			for (var i = 0; i < fruitList.length; i++) {
				//fruitList[i].fruitId → 果物のID : fruitList[i].fruitName → 果物の名称
				//※連想配列の場合、指定したキー名でアクセス可能なためソースを見て理解することが可能です。
				console.log(fruitList[i].fruitId + ":" + fruitList[i].fruitName);
			}

//果物リストを作成します。

var fruitList = [];

var fruit1 = {fruitId:"1" ,fruitName:"ぶどう"};

var fruit2 = {fruitId:"2" ,fruitName:"みかん"};

var fruit3 = {fruitId:"3" ,fruitName:"めろん"};

fruitList.push(fruit1);

fruitList.push(fruit2);

fruitList.push(fruit3);

//果物リストの情報を展開します。

console.log("＜連想配列展開結果＞");

for (var i = 0; i < fruitList.length; i++) {

//fruitList[i].fruitId → 果物のID : fruitList[i].fruitName → 果物の名称

//※連想配列の場合、指定したキー名でアクセス可能なためソースを見て理解することが可能です。

console.log(fruitList[i].fruitId + ":" + fruitList[i].fruitName);

}

コンソールで確認した場合、野菜情報も果物情報も特に問題なく実行されます。

しかし、ソースを確認した際に、
配列のインデックス0番ってなんだっけ？ということを回避できます。
つまり、理解しやすいソースコードになるため、連想配列の使用を強く推奨します。

初心者向けおすすめ書籍をご紹介！

jQueryの基本的なところから学びたい人向け

リンク

プログラミングを学んだけど、実際Webシステムで
どうやって開発するの？という方向けの書籍です

リンク

Kindle Unlimitedなら無料で読めます
初回登録、30日間無料！

Kindle Unlimitedを30日間無料体験する