【JavaScript】入門4. 配列

こんにちは（・∀・）

JavaScript入門、今回は配列についてです。以前ご紹介しました【jQuery】入門8. 配列とほぼ同じ内容になりますので復習と思ってご覧ください。

Contents

1. new Arrayで空の配列を生成
2. new Arrayで配列の生成
3. 角かっこ([])で囲んで値をカンマ(,)で区切って生成

配列

配列とはデータをしまっておくクローゼットのような物です。変数は箱に入れましたが配列はクローゼットに入れる感じとイメージしてください。

データを入れた引き出しは上から順番になっていて、1番目の引き出し、2番目の引き出し...、のように管理されます。それら引き出しは連番になっていて、引き出しの番号は0から始まります。したがって1番目の引き出しの番号は0、2番目の引き出しの番号は1...、というようになっております。

また、配列にもいくつかあり、コンストラクタ型、引数付きコンストラクタ型、配列リテラル型等があります。

配列の生成(初期化)

それでは配列を作っていきます。先にも言いましたが配列を生成する方法はいくつかあります。また、配列の生成は初期化ともいいます。

1. new Arrayで空の配列を生成

var a1 = new Array();
a1[0] = '海';
a1[1] = '山';
a1[2] = '川';

new Arrayで空の配列を生成して値があれば表示します。

2. new Arrayで配列の生成

var a2 = new Array('海','山','川');

new Arrayで配列を生成します。カンマ(,)で区切って値を足していきます。数値はそのままで良いのですが、文字列はクォーテーション('')またはダブルクォーテーション("")で括ってください。

3. 角かっこ([])で囲んで値をカンマ(,)で区切って生成

var a3 = ['海','山','川'];

こちらも同じくカンマ(,)で区切って値を足していきます。数値はそのままで、文字列はクォーテーション('')またはダブルクォーテーション("")で括ります。上記サンプル、書き方は違いますが、すべて同じ値「山」が返ります。

それでは何かやってみましょう。ボタンをクリックして現在日時を表示させます。

HTML

<button id="demo1"></button>

JavaScript

document.getElementById('demo1').addEventListener('click',function(){
var n = new Date();
var y = n.getFullYear();
var m = n.getMonth() + 1;
var d = n.getDate();
var w = n.getDay();
var wd = ['日','月','火','水','木','金','土'];
alert(y + '年' + m + '月' + d + '日' + '(' + wd[w] + ')');
},false);

Result

配列は変数の箱wdに格納されました。配列の中は'日','月','火','水','木','金','土'という順番で収納されています。番号順に変換すると日が0番目、月が1番目、火が2番目...、という形で曜日がしまってあります。

ではどうやって今日の曜日を抜き出すのでしょうか。

.new Date()で取得した現在日時をnowという箱(変数)に入れてあります。曜日はそこから.getDay()で抜き出してwという箱(変数)に入っております。ちなみに.getDay()には0～6の数値が入っていて、こちらも同じく日が0、月が1、火が2...、という形で取得してきます。なので変数wには今日の曜日の番号が入っています。そうです、今日の曜日(番号)はすでにwという箱に入っているので、あとは配列の中からその番号の順番の曜日を抜き出して表示させるだけなのです。

.length

配列の中に入っている数を数える必要がある場合があります。配列には.lengthというプロパティがあり簡単に配列数を数えることができます。使い方は次の通りです。

var a2 = ['海','山','川'];
alert('配列の中には' + a2.length + '個の値が入ってます');

変数a1.lengthで配列の中に入っている値の数を取得することができます。

HTML

<button id="demo2">demo2</button>

JavaScript

document.getElementById('demo2').addEventListener('click',function(){
var a2 = ['海','山','川'];
alert('配列の中には' + a2.length + '個の値が入ってます');
},false);

Result

いかがでしたでしょうか、何となくでもご理解いただけましたでしょうか？！

以上が配列についての簡単な解説でした。なんとなく理解はできたかなー、と思います。配列に関してはまだまだいろいろとあるのですが、入門編の配列に関してはここまで理解できていれば良いかと思います。とりあえず、JavaScriptやjQueryを使う上で便利なオブジェクトの一つだと理解していただければ良いかと思います。

関連リンク

JavaScript入門
jQuery入門