速習!JavaScript - 配列

配列とは、リストようなものです。
例えば
りんご、ナシ、バナナ、メロンのような果物のリストがあった時に、一つ一つ変数を設定するのではなく、ひとまとめにして配列として扱うことができます。
例：

var fruits = ['apple', 'pear', 'banana', 'melon'];

配列の作り方

角括弧に値をいれて作ります。
この時配列に入れている値を要素と呼びます。

構文:  var arr1 = [val1, val2, val3, val4, val5];

では買い物リストの配列を作成してみましょう

var shopping = ['パン', '牛乳', 'チーズ', 'ハム', '麺'];

配列には文字列以外でも格納することができます。
データ型が混在していても大丈夫です。

var crucible = ['パン', 1, 3.14, true, ['apple', 'pear'], {fruit: 'banana', color:'yellow'}];

配列はこんな感じになってます。

配列の要素を取得する

配列の要素を取得するためには角括弧[]に添え字を指定します。
添え字とは配列が格納されている順番のことで、0から始まります
var fruits = ['apple', 'pear', 'banana', 'melon'];
の場合、apple=0, pear=1, banana=2, melon=3 の添え字が割り振られています。

fruits[2] //banana が取得されます。

では配列に配列やオブジェクトが含まれている多次元配列ではどのように取得できるでしょうか。
先ほどのcrucibleの例をみてみましょう。

var crucible = ['パン', 1, 3.14, true, ['apple', 'pear'], {fruit: 'banana', color:'yellow'}];

crucible[4]で配列、crucible[5]でオブジェクトが取得できます。

配列中の配列の要素に取得する場合以下のように記述します：

crucible[4][0] //  apple が取得されます。

下記と同じことです。

var fritusArray = crucible[4];
fritusArray[0];

配列中のオブジェクトの要素に取得する場合以下のように記述します：

crucible[5].color //yellow が取得できます。

もしくは

crucible[5]['color']

配列を展開する

配列から要素を一つ一つ取得するのには、for文で配列の要素の個数分ループして添え字のカウントを増やしていく方法が一般的です。
for文についてはこちらを参照(後日制御構文についての記事を書き次第リンクを追加）

for文で展開する方法

// 0から始まる変数iが配列shoppingの要素の個数より小さい間処理を繰り返す。
// 処理が実行されたら変数iに1加算していく
for(var i=0; i<shopping.length; i++){
    //コンソールに配列shoppingの要素を表示する。
    console.log(shopping[i]);  //パン, 牛乳, チーズ, ハム, 麺 が表示されます。
}

またforEachメソッドで展開することもできます。

構文: array.forEach(callback[, thisObj]);

callbackは以下の引数をとります。

• currentValue(呼び出される要素),
• index(添え字(インデックス)),
• array(元となる配列)

 shopping.forEach(function (item, index, shopping) {
    console.log(item); //パン, 牛乳, チーズ, ハム, 麺 が表示されます。
});

※比較的新しく実装されたもの。ブラウザの実装サポート要確認。
Androidの標準ブラウザで使用できない可能性があります。
参考:Array.prototype.forEach

配列を追加する

配列の末尾に追加

array.push();

fruits.push('orange');

配列の先頭に追加

array.unshift();

fruits.unshift('blackberry');

配列を削除する

配列の末尾を削除

array.pop();

var fruit_last = fruits.pop();
// fruit_last : orange
// fruits : [ "blackberry", "apple", "pear", "banana", "melon" ]

配列の先頭を削除

array.shift();

var fruit_first = fruits.shift();
// fruit_first : blackberry
// fruits : ["apple", "pear", "banana", "melon" ]

初期化

fruits = [];

添え字(インデックス)を指定して削除

array.splice(begin,end);

var fruits = ['apple', 'pear', 'banana', 'melon'];
var removes = fruits.splice(1,2);
// fruits : [ "apple", "melon" ]
// removes:  [ "pear", "banana" ]

メソッド

配列が持つメソッド（関数）をいくつか紹介します。

joinメソッド

array.join(delimiter);

配列のすべての要素を結合して文字列に変換します。
括弧内にセパレーターを指定すると、区切り文字として扱われます。

fruits.join('|');  // 'apple|melon'

sliceメソッド

array.slice(begin, end)

配列の一部を取り出して新しい配列を返す。
（beginからendの一つ前の要素を返す）
元の配列は変化しない(spliceは変化するので注意）

indexOfメソッド

array.indexOf(begin, end)

引数に与えられた内容と同じ内容の要素のうち、最初のものの添え字を返す。
存在しない場合は-1

fruit.indexOf('apple') // 0

参考サイト：
developer.mozilla.org