超入門 JavaScript ⑨ ~配列~

配列は 、1 つの変数に複数のデータを格納するために使われます。
例として、1週間を配列で表現してみましょう。

var week = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var weekJp = ['日', '月', '火', '水', '木', '金', '土'];

このような感じになります。
1行目は、「week」という1つの変数に複数のデータ「Sun」から「Sat」までが格納されています。
2行目は、「weekJp」という1つの変数に複数のデータ「日」から「土」までが格納されています。

では、配列の中にあるデータを取得する方法を見ていきましょう。
「Sun」をアラート表示させたい、というケースをプログラミングすると、以下のようになります。

var week = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

alert( week[0] );

上記コードの2行目で、変数「week」の0番目を表示させています。
これは非常に重要な項目なのですが、配列のインデックスは1番目からではなく、0番目から数えるルールになっているからです。

では次に、すべての曜日をアラートさせるコードを書いてみます。

var week = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

alert( week[0] );
alert( week[1] );
alert( week[2] );
alert( week[3] );
alert( week[4] );
alert( week[5] );
alert( week[6] );

このようになります。
インデックスを個別で指定して、ピンポイントでデータを出したい場合には良いですが、配列の全量を出力したい場合には面倒ですね。
1週間なら7つしかないのでまだ良いとして、100個、1000個のデータとなると、さすがに現実的ではありません。

これを解決する手段は、次回の投稿を予定している「繰り返し」構文です。
繰り返し構文については、次回詳しく見ていきます。

さて、配列の要素は、大カッコ([ ])でインデックスを指定することにより取得可能でした。
そして、取得した要素の内容は、変更することもできます。

var week = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

week[0] = 'Sunday';
alert( week[0] );

上記のプログラムを動作させてみると、「Sun」ではなく「Sunday」がアラートされるはずです。
実際にコードを記述して、動かしてみてください。

ここまでで、配列の基本はおさえられたと思います。

次に、配列が持っているいくつかの便利メソッドを紹介します。
メソッド」という単語が初めて出てきました。
今の段階では、「何かのオブジェクトからドット(.)を使って呼び出せる関数のようなもの」という程度の認識で大丈夫です。

配列には、要素を追加したり削除したりできるメソッドがあります。
push と pop です。
サンプルコードで使い方を見てみましょう。
まずは push メソッドからです。

var arr = [5, 10, 2];

arr.push(6);
alert( arr[3] );

このプログラムを実行すると、最後に追加した「6」がアラート表示されるはずです。
続いて、配列の末尾の要素を削除するメソッド「pop」を使ってみます。

var arr = [5, 10, 2];

arr.push(6);
alert( arr[3] );

arr.pop();
alert( arr[3] );

pop メソッドを追加したことにより、一度「6」が表示された後に末尾が削除されるため、次のアラートでは「undefined」がアラートされるはずです。

最期に、メソッドではありませんが、配列の要素数を調べるために使われる重要なプロパティを紹介します。

length というプロパティです。

var week = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

alert( week.length );

こちらを実行すると、「7」がアラート表示されます。
week の要素数が7つだからです。

配列については以上です。

次回は、いよいよ制御構文の最難関ステージ「回帰(繰り返し)」に入ります。

それでは良いプログラミング・ライフを!


この記事が気に入ったらサポートをしてみませんか?