JavaScript 入門 | 配列 (array) | 配列の基礎

配列の作成

JavaScript で配列を作る方法は次のとおりである。

構文

1. var arr = [配列要素1, 配列要素2,...];          // 配列リテラルを利用する方法
2. var arr = Array(配列要素1, 配列要素2,...);     // Array オブジェクトのコンストラクターを利用する方法
3. var arr = new Array(配列要素1, 配列要素2,...); // new 演算子を利用した Array オブジェクトの作成方法

上の 3 つの方法はいずれも同じ結果の配列を作成する。
配列リテラルは、角括弧 ([]) の中に配列要素をカンマで区切って並べる方法で作成する。

var arrLit = [1, true, "JavaScript"];             // 配列リテラルを利用する方法
var arrObj = Array(1, true, "JavaScript");        // Array オブジェクトのコンストラクターを利用する方法
var arrNewObj = new Array(1, true, "JavaScript"); // new 演算子を利用した Array オブジェクトの作成方法
document.write(arrLit + "<br>");                  // 1,true,JavaScript
document.write(arrObj + "<br>");                  // 1,true,JavaScript
document.write(arrNewObj);                        // 1,true,JavaScript

配列の参照

JavaScript で配列の各要素を参照したいときは、[] 演算子を使用する。

構文

配列名[インデックス]

JavaScript では、配列要素の数を配列の長さという。
この配列の長さは length プロパティに自動的に更新される。

JavaScript でインデックスは常に 0 から始まる。
また、インデックスには 0 以上の整数を返す任意の式も使用できる。
このようなインデックスには 232 より小さい正の数だけを使用できる。

次の例は、配列を作成し、作成した配列に要素を追加および削除する例である。

var arr = ["JavaScript"]; // 要素が 1 つだけの配列を作成する。
var element = arr[0];     // 配列の最初の要素を読み取って代入する。

arr[1] = 10;      // 配列の 2 番目の要素に数値 10 を代入する。配列の長さは 1 から 2 に増える。
arr[2] = element; // 配列の 3 番目の要素に変数 element の値を代入する。配列の長さは 2 から 3 に増える。

document.write("配列 arr の要素には [" + arr + "] がある。<br>"); // 配列の要素をすべて出力する。
document.write("配列 arr の長さは " + arr.length + " である。<br>"); // 配列の長さを出力する。

delete arr[2];    // 配列の 3 番目の要素を削除する。ただし配列の長さは変わらない。

document.write("配列 arr の要素には [" + arr + "] がある。<br>"); // 配列の要素をすべて出力する。
document.write("配列 arr の長さは " + arr.length + " である。");   // 配列の長さを出力する。

上の例で 3 番目の文は、配列の現在の長さより大きいインデックスに要素を保存しようとしている。
JavaScript では、このように配列の長さを超えるインデックスに要素を保存することが許可されている。
このとき、配列の長さは自動的にそのインデックスまで増える。

配列要素の追加

JavaScript で配列に新しい配列要素を追加する方法は次のとおりである。

構文

1. arr.push(追加する要素);         // push() メソッドを利用する方法
2. arr[arr.length] = 追加する要素; // length プロパティを利用する方法
3. arr[特定インデックス] = 追加する要素; // 特定のインデックスを指定して追加する方法

push() メソッドと length プロパティを利用する方法は、どちらも配列の末尾に新しい要素を追加する。

var arr = [1, true, "Java"];

arr.push("Script");           // push() メソッドを利用する方法
document.write(arr + "<br>"); // 1,true,Java,Script

arr[arr.length] = 100;        // length プロパティを利用する方法
document.write(arr + "<br>"); // 1,true,Java,Script,100

arr[10] = "JavaScript";       // 特定のインデックスを指定して追加する方法
document.write(arr + "<br>"); // 1,true,Java,Script,100,,,,,,JavaScript
document.write(arr[7]);       // undefined

上の例で、配列 arr の長さは最終的に 11 になる。
このとき、配列要素が存在するインデックスは 0、1、2、3、4、10 だけであり、残りのインデックスには配列要素が存在しない。

このようにインデックスに対応する配列要素がない部分を配列のホール (hole) という。
JavaScript では、このような配列のホールを undefined 値を持つ要素のように扱う。
したがって、上の例のように配列のホールを参照すると undefined 値を返す。

配列の巡回 (iteration)

配列のすべての要素へ順番にアクセスしたいときは、for 文のような繰り返し文を使用してアクセスできる。

var arr = [1, true, "JavaScript"];

var result = "<table><tr>";
for (var idx in arr) {
    result += "<td>" + arr[idx] + "</td>";
}
result += "</tr></table>";

document.write(result);

Array オブジェクト

JavaScript で配列 (array) は、順序付けられた値の集合として定義され、Array オブジェクトとして扱われる。 また、JavaScript はユーザーが配列に関連する作業を簡単に行えるように、さまざまなメソッドも提供している。

次の例は、配列と各配列要素の typeof 演算結果を示す例である。

var arr = new Array(10, "文字列", false);

document.write((typeof arr) + "<br>");    // object
document.write((typeof arr[0]) + "<br>"); // number
document.write((typeof arr[1]) + "<br>"); // string
document.write(typeof arr[2]);            // boolean