８．Javascriptの配列

８．Javascriptの配列
　　複数の値をまとめて扱う場合、数個程度であれば、変数を使ってもあまり問題はないと思います。
　　しかし、これが沢山（例えば１００個）になれば大変ですし、無駄が多くなります。
　　そのようなときは「配列」を使うと便利です。
　　配列は、複数の変数の集合体を表します。
　１）配列の宣言
　　　Javascriptの配列は、Arrayクラスになっています。
　　　配列を使用するときは、「new」演算子を使って、配列オブジェクトを生成しないと配列を使うことができません。
　　①配列の長さを指定して宣言します

　　　＜書式＞var myArray=Array(5);

　　　　上記のように宣言した場合は、myArray[0]　～　ｍｙArray[4]までの５つの配列変数が宣言されます。
　　　　この配列の範囲以外の配列に値を代入するとその配列が新しく作られます。
　　　　例えば、

　　　　　myArray[6]="山田";

　　　　とするとmyArray配列は、myArray[0]～myArray[6]までの７つの配列になります。
　　　　存在しない配列にアクセスしようとすると配列が見つからない意味の「undefined」になります。　　　　

　　　＜サンプル１＞（ファイル名：js8-1-1-1.html）
　　　　　配列一つ一つに値を代入しています。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>配列の宣言</title>
</head>
<body>
<script type="text/javascript">
<!--
   var myArray= new Array(5);
   myArray[0]=1;
   myArray[1]=2;
   myArray[2]=3;
   myArray[3]=4;
   myArray[4]=5;
   for(var i=0;i<5;i++){
      document.write(myArray[i]);
   }
// -->
</script>
</body>
</html>

　　　＜サンプル２＞（ファイル名：js8-1-1-2.html）
　　　　　繰り返し（ループ）を使って配列に値を代入しています。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>配列の宣言</title>
</head>
<body>
<script type="text/javascript">
<!--
   var myArray= new Array(5);
   for(var i=0;i<5;i++){
      myArray[i]=i+1;
   }
   for(var i=0;i<5;i++){
      document.write(myArray[i]);
   }
// -->
</script>
</body>
</html>

　　　＜サンプル３＞（ファイル名：js8-1-1-3.html）
　　　　宣言した配列の長さを調べてみましょう。
　　　　配列の長さを調べるプロパティに「length」があります。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>配列の長さを調べる</title>
</head>
<body>
<script type="text/javascript">
<!--
   var myArray= new Array(5);
   alert(myArray.length); //宣言時の配列の長さを表示ています。
   myArray[6]="山田";
   alert(myArray.length); //新たに配列を追加してからの配列の長さを調べています。
   alert(myArray[10]); //存在しない配列にアクセスしている。「undefined」と表示されます。
// -->
</script>
</body>
</html>

　　②配列の長さを指定しないで宣言します

　　　＜書式＞var myArray=Array();

　　　　上記のように宣言した場合は、配列は用意されますが配列の長さは、０になります。
　　　　以下のように配列の値を代入するとその配列が新しく作られます。

　　　　　myArray[0]="山田";
　　　　　myArray[1]="鈴木";

　　　＜サンプル４＞（ファイル名：js8-1-2-1.html）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>配列の長さを指定せずに宣言します</title>
</head>
<body>
<script type="text/javascript">
<!--
   var myArray= new Array();
   alert(myArray.length); //宣言時の配列の長さを表示ています。
   myArray[0]="山田";
   myArray[1]="鈴木";
   alert(myArray.length); //新たに配列を追加してからの配列の長さを調べています。
// -->
</script>
</body>
</html>

　　③配列の宣言時に配列を初期化します
　　　　配列を宣言するときに配列に値を代入します。

　　　　＜書式＞var myArray=Array(1,2,3,4,5);
　　　　　　　　　　var myArray=Array("山田","鈴木");

　　　　＜サンプル５＞（ファイル名：js8-1-3-1.html）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>配列の宣言時に配列を初期化します</title>
</head>
<body>
<script type="text/javascript">
<!--
   var myArray1=new Array(1,2,3,4,5);
   var myArray2=new Array("山田","鈴木");
   for(var i=0;i<myArray1.length;i++){
      document.write(myArray1[i]);
   }
   document.write("<b />\n");
   document.write(myArray2[0]);
   document.write(myArray2[1]);
// -->
</script>
</body>
</html>

　２）２次元配列（配列の配列）
　　　２次元配列の宣言の方法は、少し特殊で以下のように行います。
　　　＜書式＞
　　　　　myArray=new Array();
　　　　　myArray[0]=new Array();

　　　　のように行います。

　　　＜サンプル６＞（ファイル名：js8-2-1.html）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>２次元配列（配列の配列）</title>
</head>
<body>
<script type="text/javascript">
<!--
   var myArray=new Array();
   for(var i=0;i<10;i++){
      myArray[i]=new Array();
   }
   for(i=1;i<10;i++){
      for(j=1;j<10;j++){
         myArray[i][j]=i*j;
      }
   }
   for(i=1;i<10;i++){
      for(j=1;j<10;j++){
         document.write(myArray[i][j]);
      }
      document.write("<br />\n");
   }
// -->
</script>
</body>
</html>

　３）連想配列
　　　配列のキーに文字列を使った配列を連想配列といいます。
　　　＜書式＞
　　　　　var myArray=new Array();
　　　　　myArray["abc"]="xyz";

　　　　アクセスの仕方
　　　　　a=myArray["abc"];　通常の配列を使ったアクセス
　　　　　a=myArray.abc;　　　配列オブジェクトのプロパティにアクセス

　　　＜サンプル７＞（ファイル名：js8-3-1.html）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>２次元配列（配列の配列）</title>
</head>
<body>
<script type="text/javascript">
<!--
   var myArray=new Array();
   var str="abc";
   myArray["abc"]="山田";
   alert("通常の配列を使ったアクセス"+myArray["abc"]);
   alert("配列オブジェクトのプロパティにアクセス"+myArray.abc);
   alert("配列の添え文字を変数にした場合"+myArray[str]);
// -->
</script>
</body>
</html>