【jQuery】入門8. 配列

こんにちは（・∀・）

jQuery入門、今回は配列についてです。

配列って何ですかー？

配列とは？

変数に続いてまたもや「何ですかそれは？！」ですね。配列とはデータをしまっておくクローゼットのような物です。変数は箱に入れましたね。配列はクローゼットに入れてください。

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

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

あれ、ちょっと覚えることが増えてきましたね...。簡単にいきましょう。

配列の生成(初期化)

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

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

var myArray1 = new Array();
myArray1[0] = "海";
myArray1[1] = "山";
myArray1[2] = "川";
$("#demo1").text(myArray1[1]);

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

2. new Arrayで配列の生成

var myArray2 = new Array("海", "山", "川");
$("#demo2").text(myArray2[1]);

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

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

var myArray3 = ["海", "山", "川"];
$("#demo3").text(myArray3[1]);

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

それでは何かやってみましょう。前にやりました現在日時で見ていきます。

HTML

<p class="demo1"></p>

JavaScript

$(function(){
var now = new Date();
var y = now.getFullYear();
var m = now.getMonth() + 1;
var d = now.getDate();
var w = now.getDay();
var wd = ["日", "月", "火", "水", "木", "金", "土"];
$(".demo1").text(y + "年" + m + "月" + d + "日" + "(" + wd[w] + ")");
});

Result

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

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

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

.length

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

var myArray4 = ["海", "山", "川"];
$("#demo4").text("配列の中には" + myArray4.length + "個の値が入っております。");

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

HTML

<p class="demo2"></p>

JavaScript

$(function(){
var myArray2 = ["海", "山", "川"];
$(".demo2").text("配列の中には" + myArray2.length + "個の値が入っております。");
});

Result

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

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

関連リンク

JavaScript入門
jQuery入門