15-3.Javascriptの関数、オブジェクト、配列③Javascriptの配列

寒さのせいか運動不足なのか凝り固まった背中がみしっといきまして、「ぎっくり背中」とよばれるもののようなものになりました…
くそー。。。
さっさとおわらすぞー。あと2回で15章しゅうりょうだーーー。

本題に入りますと、
Javascriptの配列処理はPHPとよく似ていますが、シンタックスに少し違いがあります。

PHPの配列はこちら。
taro-ris.hatenablog.com

【目次】
1.Javascriptの配列
　　1-1.数値でインデックス化される配列
　　1-2.連想配列
　　1-3.多次元配列

1-1. 数値でインデックス化される配列

新しい配列を作成するには次のシンタックスを使用します。

arrayname = new Array()

また次の簡素化された形式をも使用できます。

arrayname［］

PHPでは配列に新しいエレメントを追加するとき、エレメントの位置を指定しなくても割り当てることができました。

$arrayname = "Element 1";
$arrayname = "Element 2";
これをJavascriptでも配列のpushメソッドを使って同様のことができます。
この方法では、アイテムの数を追跡せずにアイテムの追加を続けることができます。
arrayname.push("Element 1")
arrayname.push("Element 2")

配列にエレメントがいくつかあるかを知りたいときにはlengthプロパティを使用します。
document.write(arrayname.length)

他にも、エレメントの位置を追跡したり特定の位置に置きたい場合には次のシンタックスが使用できます。
arrayname[0] = "Element 1"//0番めの位置にElement1を追加
arrayname[1] = "Element 2"//1番めの位置にElement1を追加

以上を踏まえて、配列を作成し値を入れ、中身を出力するコードをみてみましょー

＜script＞
numbers = []
numbers.push("One")
numbers.push("Two")
numbers.push("Three")

for (j = 0 ; j < numbers.length ; ++j)
document.write("Element " + j + " = " + numbers[j] + "
")
＜/script＞

結果はこちら。

1-2. 連想配列

これで配列にアイテムを追加する方法とアイテムを参照する方法がわかりましたが、Javascriptの配列ではもっと多くのことが行えます。
連想配列とよばれる、エレメントを番号ではなく名前で参照するタイプの配列をみていきます。

連想配列を作成するには、中かっこの中でエレメントのブロックを定義します。各エレメントは、コロンの左にキーを、コロンの右にその内容（値）を配置することで定義します。

以下のコードは、あるスポーツ店のボール部の商品の保持に使用できそうな連想入れるの作成方法です。
（なんか、たとえが渋い。。。）

＜script＞
balls = {"golf": "Golf balls, 6",
"tennis": "Tennis balls, 3",
"soccer": "Soccer ball, 1",
"ping": "Ping Pong balls, 1 doz"}

for (ball in balls)
document.write(ball + " = " + balls[ball] + "
")
＜/script＞

結果はこちら。

ここでは配列が作成され、値が正しく入れられたことを確認するためにinキーワードをつかったまた別のforループを使用しています。このループでは、配列内でのみ使用する新しい変数（この場合、ball）内すべてのエレメントを繰り返し処理するという方法がとられます。このループはballs配列の各エレメントに作用し、エレメントのキー値をballに割り当てます。

1-3. 多次元配列

Javascriptで多次元配列を作成する場合にも、単に配列の中に別の配列を作成するだけです。
例として、2次元のチェッカー盤（8×8）の詳細を保持する配列をみてみます。

＜script＞

checkerboard = Array(
Array(' ', 'o', ' ', 'o', ' ', 'o', ' ', 'o'),
Array('o', ' ', 'o', ' ', 'o', ' ', 'o', ' '),
Array(' ', 'o', ' ', 'o', ' ', 'o', ' ', 'o'),
Array(' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '),
Array(' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '),
Array('O', ' ', 'O', ' ', 'O', ' ', 'O', ' '),
Array(' ', 'O', ' ', 'O', ' ', 'O', ' ', 'O'),
Array('O', ' ', 'O', ' ', 'O', ' ', 'O', ' '))

document.write("＜pre＞")
for (j = 0 ; j < 8 ; ++j)
{
for (k = 0 ; k < 8 ; ++k)
document.write(checkerboard[j][k] + " ")
document.write("
")
}
document.write("＜/pre＞")
＜/script＞

結果はこちた。

小文字のoが黒駒、大文字のOが白駒を表しています。ループをネストして配列を処理し、その内容を表示します。
外側のループはステートメントを2つ含むので、それらを囲む中かっこがいります。

内側のループでは行内の各マスを処理し、位置［j］［k］にある文字とスペースを出力します。

いじょー。
明日は配列のメソッドの使用をやります。
なんかこまごまあるので次回にまわします。

これが終わったら、前挫折して放置してたPHPとMYSQLのやつに戻って、最後にjavascriptとPHPのなんたらをやろうとおもてます。いや、、javatつっきったほうがいいかな。。うん。そのほうがいい。

おわり。