JavaScript 初歩のまとめ ⑨ 配列

以前 変数についてまとめたあとで 「次は 配列」と思っていたのを 間が空いてしまいましたが、今回ようやくまとめてみます。いつものように 思いつくことを できるだけ実際に ためしながら書いていこうと思います。

配列

配列は 変数のように 値を入れておける箱のような物をイメージするのがいいと思います。
変数は、ひとつの変数に ひとつの値を入れておくことができますが、配列の場合は ひとつの変数に いくつもの値を入れることができます。
代入された値を取り出したり、参照したり（アクセスすると言います。）する時に、複数の値に対して 変数名がひとつではどの値にアクセスするのか区別ができなくなってしまうので、配列では 変数名に 0 から始まる番号（添字 または インデックスと呼びます。）を付けて区別します。
関連のある複数の値を ひとつの名前で扱うことができるということは、ちょっと思いついただけでも 例えば 画面に表示する物の座標とか、商品の 名前と値段とかに役立ちそうです。

用語

インデックス / 添字　　配列に代入された値を 識別するために付けられた番号のこと。これは 0 から始まるので注意が必要です。

配列要素　　配列に代入されている個々の値のこと。単に要素という場合もあります。例えば 要素数が 3 の配列は 添字が、0~2 まであることになります。



配列の生成

配列の生成には何通りかの書き方がありますので 順に確かめていきます。



var 変数名 = new Array(値, 値, …);

この書き方は 配列の生成と同時に 値を代入します。値（この書き方では値と書いてある所は厳密には引数といいます。）を指定した数だけ配列要素数が生成されます。( ) の中に , で区切って代入する値を指定していきます。その順番で 添字が 0 から付いていきます。

ex.1

var arr = new Array(6, 3, 3);
document.write(arr, '<br>', arr[0]);

ex.1 の実行結果

配列の生成時に 3つの値を同時に代入しています。このため 配列変数 arr には 要素数も 3つ あることになります。
document.write で配列変数 arr, 改行タグ, 配列変数 arr の 0番目の要素を順に表示させています。arr とだけ指定して表示させると 全ての要素を カンマ区切りで表示してくれます。また、配列内の特定の要素だけにアクセスする場合は、変数名 [添字] の形で指定します。

var 変数名 = new Array(要素数);

これは最初の書き方と似ていますが、要素数だけを指定して、個々の値は何も代入しません。このため このまま 配列要素にアクセスすると 未定義値の undefined が返ります。

ex.2

var arr = new Array(6);
document.write(arr, '<br>', arr[0]);

ex.2 の実行結果

実行結果を パッと見ると 何のことか良く判りませんでしたが、要素数を 6 とだけ指定して配列を生成していますので、各要素には何も値が入っていません。このため arr を表示させると、何も要素が無いけれど 要素数は 6個あります。これを カンマ区切りで表示しているため カンマが5個並んでいるということのようです。
undefined, undefined, undefined, undefined, undefined, undefined とはならないんですね。
その後 arr[0] だけを表示させると今度は undefined が表示されました。
要素数だけを指定した配列に 後から値を代入する書き方は以下のようになります。



変数名[添字] = 値;

ex.3
var arr = new Array(6);
    arr[0] = 3;
    arr[2] = 5;
document.write(arr, '<br>', arr[0]);

ex.3 の実行結果

配列変数 arr の 0番目と 2番目に後から値を代入しています。ex.2 の実行結果と比べてみると 2番目の要素の所にちゃんと 5 が表示されています。




var 変数名 = [値, 値, …];

この書き方も ex.1 と同じで、配列の生成と同時に値が代入されます。左から , で区切った順に 0 から 添字が付いていきます。

ex.4

var arr = [6, 3, 3];
document.write(arr, '<br>', arr[0]);

ex.4 の実行結果

実行結果も ex.1 と同じになっているので、同じように使えそうです。

配列でも色々と試してみたいことがありますので、次回も配列のまとめの続きです。