【JavaScript】配列の基本

JavaScript

配列の考え方

JavaScriptのオブジェクトには、あらかじめ用意された一般的なオブジェクトがあります。
一般的なオブジェクトとは、JavaScriptに組み込まれたブラウザとは関係ない機能をまとめたもので組み込みオブジェクトとも呼ばれます。
Arrayオブジェクトは配列を表し、変数を１つの箱だと考えると複数の箱を集めて並べたようなものが配列です。

//配列の基本型
配列名 = array[要素１,要素２,要素３];

配列の要素を参照する

配列の要素を参照することができます。

<?xml version="1.0" encoding="utf-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>配列の参照</title>
</head>

<body>
<script type="text/javascript">

	var array01 = ["a","b","c","d","e"];
	document.write(array01[0]); //配列０番目の要素を表示します

	/*
	 * 実行結果：
	 * a
	 */
</script>
</body>

</html>

配列の要素を代入する

配列の要素にいろいろな値を代入することができます。

<?xml version="1.0" encoding="utf-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>配列の代入</title>
</head>

<body>
<script type="text/javascript">

	var array02 = ["a","b","c","d","e"];
	array02[2] = "x"; //要素「x」を代入します
	array02[3] = "y"; //要素「y」を代入します
	array02[4] = "z"; //要素「z」を代入します
	document.write(array02);
	
	/*
	 * 実行結果：
	 * a,b,x,y,z
	 */
	
</script>
</body>

</html>

配列の文字数

配列の要素数を.lengthを使ってカウントすることができます。

<?xml version="1.0" encoding="utf-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>配列の文字数</title>
</head>

<body>
<script type="text/javascript">
	
	var array03 = ["a","b","c","d","e"];
	document.write(array03.length); //配列名.lengthで配列の文字数をカウントします

	/*
	 * 実行結果：
	 * 5
	 */
	
</script>
</body>

連想配列

添字に文字列を使った配列を、連想配列といいます。

<?xml version="1.0" encoding="utf-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>連想配列</title>
</head>

<body>
<script type="text/javascript">
	var array04 = {"name":"田中","age":"25"}; // { }(ポイント：中括弧で囲む),「、」で配列を結ぶ
	document.write(array04["name"] + "です。<br>");
	document.write(array04["age"] + "歳です。<br>"); // array[要素];
	document.write(array04.age + "歳です。"); // array.要素
	
	/*
	 * 実行結果：
	 * 田中です。
	 * 25歳です。
	 * 25歳です。
	 */
</script>
</body>

</html>


＜例題１＞
連想配列を使って配列の要素を表示してみます。

<?xml version="1.0" encoding="utf-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>連想配列の使い方</title>
</head>

<body>
<script type="text/javascript">
	var array05 = {"身長":"173cm","体重":"65kg"}; //{}(ポイント：中括弧で囲む),「、」で配列を結ぶ
	document.write(array05["身長"] + "<br>");
	document.write(array05["体重"] + "<br>");
	document.write(array05.身長 + "<br>");
	document.write(array05.体重);
	
	/*
	 * 実行結果：
	 * 173cm
	 * 65kg
	 * 173cm
	 * 65kg
	 */
</script>
</body>

</html>


＜例題２＞
テストの得点が「90点,85点,75点,50点,65点」である場合の合計点と平均点を求めよ。

<?xml version="1.0" encoding="utf-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>合計点と平均点の求め方</title>
</head>

<body>
<script type="text/javascript">
	//変数の宣言
	var array06 = [90,85,75,50,65];
	var array07 = 0;
	//for文（計算の繰り返し）
	for (var i = 0; i <array06.length ; i++){
	array07 += array06[i]; //array07 = array07 + array06[i];
}
//合計点と平均点の表示
document.write("合計点は、" + array07 + "点です。" + "<br>");	
document.write("平均点は、" + array07/array06.length + "点です。");

	/*
	 * 実行結果：
	 * 合計点は、365点です。
	 * 平均点は、73点です。
	 */
</script>
</body>

</html>