JavaScript における配列とは、数値や文字列等のデータを順番に並べた集合である。JavaScript において、配列は Array オブジェクトで表される。Array オブジェクトには長さ（要素数）を示す length プロパティや、配列を追加・削除・連結するメソッドを持つ。このページでは、配列の初期化、ループ、操作方法を紹介する。
JavaScriptで配列を初期化するには、配列の要素を配列リテラル（[]で囲んだ要素）で指定する。
var array = ["foo", "bar", "baz"];または、Arrayオブジェクトのコンストラクタの引数に要素のリストを渡して、配列の宣言と初期化を行うこともできる。
var array = new Array(1, 2, 3);2次元配列を初期化するには、次のようにする。
var array = [
[1, 2, 3],
[4, 5, 6]
];JavaScriptで配列の長さ（要素数）は、lengthプロパティで取得できる。
const array = ["foo", "bar", "baz"];
// 要素数 3
console.log(array.length);2次元配列の長さ（要素数）は、次元毎にlengthプロパティで取得する。
const array = [
[1, 2, 3], // 1行目
[4, 5, 6] // 2行目
];
// 行数
console.log(array.length);
// 1行目の列数
console.log(array[0].length);
// 2行目の列数
console.log(array[1].length);JavaScriptでループ（繰返し処理）を配列の要素数分行うには、次に示す2種類の方法がある。
JavsScript の for ループで繰り返し処理をするには、以下のようにする。
var array = ["foo", "bar", "baz"];
for (var i = 0; i < array.length; i++) {
console.log(array[i]);
}JavsScript で配列の要素ごとに繰り返し処理を行うには、Array オブジェクトの forEach メソッドを使う。
var array = ["foo", "bar", "baz"];
array.forEach(function(element){
console.log(element);
});JavaScriptの配列に要素を追加するには、以下に示すメソッドを使う。
| メソッド | 説明 |
|---|---|
| unshift | 配列の先頭に要素を追加する。 |
| push | 配列の末尾に要素を追加する。 |
| splice | 配列の途中に要素を追加する。 |
配列の先頭に要素を追加するには、Arrayオブジェクトのunshiftメソッドを使う。
const array = ["foo", "bar", "baz"];
// 先頭に追加
array.unshift("qux");
// qux,foo,bar,baz
console.log(array.join());配列の末尾に要素を追加するには、Arrayオブジェクトのpushメソッドを使う。
const array = ["foo", "bar", "baz"];
// 末尾に追加
array.push("qux");
// foo,bar,baz,qux
console.log(array.join());上記のJavaScriptの実行結果は次のようになる。
配列の途中に要素を追加するには、Arrayオブジェクトのspliceメソッドを使う。
var array = ["foo", "bar", "baz"];
array.splice(1, 1, "qux");
// foo,qux,baz
console.log(array.join());JavaScriptの配列から要素を削除するには、以下に示すメソッドを使う。
| メソッド | 説明 |
|---|---|
| shift | 配列の先頭から要素を削除する。 |
| pop | 配列の末尾から要素を削除する。 |
| splice | 配列の途中から要素を削除する。 |
配列の先頭の要素を削除するには、Arrayオブジェクトのshiftメソッドを使う。
let array = ["foo", "bar", "baz"];
// 先頭を削除
array.shift();
// bar,baz
console.log(array.join());配列の末尾の要素を削除するには、Arrayオブジェクトのpopメソッドを使う。
let array = ["foo", "bar", "baz"];
// 末尾を削除
array.pop();
// foo,bar
console.log(array.join());配列の途中の要素を削除するには、Arrayオブジェクトのspliceメソッドを使う。
let array = ["foo", "bar", "baz", "qux"];
// 1 の位置から 2 個を削除
array.splice(1, 2);
// foo,qux
console.log((array.join());JavaScript の配列を連結するには、以下に示すメソッドを使う。
| メソッド | 説明 |
|---|---|
| concat | 配列を連結する。 |
| apply | 配列を連結する。 |
| join | 配列を連結した文字列を作成する。 |
JavaScriptで配列を連結するには、Arrayオブジェクトのconcatメソッドを使う。
const array1 = ["foo", "bar", "baz"];
const array2 = ["qux", "quux", "corge"];
const array3 = array1.concat(array2);
// foo,bar,baz,qux,quux,corge
console.log(array3.join());Array.prototype.push.applyで配列を連結することもできる。
var array1 = ["foo", "bar", "baz"];
var array2 = ["qux", "quux", "corge"];
Array.prototype.push.apply(array1, array2);
// foo,bar,baz,qux,quux,corge
console.log(array1.join());JavaScriptで配列の要素を連結した文字列を作成するには、Arrayオブジェクトのjoinメソッドを使う。
const array = ["foo", "bar", "baz"];
// foo,bar,baz
console.log(array.join());joinメソッドの引数を省略した場合、区切り文字として「,」が各要素の間に入る。
区切り文字を入れたくない場合は、join('')とする。
const array = ["foo", "bar", "baz"];
// foobarbaz
console.log(array.join());任意の区切り文字列を指定したい場合は、joinメソッドの引数に区切り文字列を指定する。
const array = ["foo", "bar", "baz"];
// fooとbarとbaz
console.log(array.join("と"));指定した値に一致する要素のインデックスを検索する場合は、indexOfメソッドを使う。一致する要素が見つからなかった場合、indexOfメソッドは -1 を返す。
const array = ["foo", "bar", "baz"];
// 0
console.log(array.indexOf("foo"));
// 1
console.log(array.indexOf("bar"));
// 2
console.log(array.indexOf("baz"));
// -1
console.log(array.indexOf("foobar"));検索の開始位置を指定したい場合は、indexOfの第2引数に検索を開始するインデックスを指定する。
const array = ["foo", "bar", "baz", "foo"];
// 0
console.log(array.indexOf("foo", 0));
// 3
console.log(array.indexOf("foo", 1));JavaScriptで配列に値を代入するには、配列の要素ごとに値を代入する。
配列の要素は、[]にインデックス（0から始まる数値）を指定する。
var array = new Array(3);
array[0] = 'A';
array[1] = 'B';
array[2] = 'C';2次元配列に代入するには、次のようにする。
var array = new Array(2, 3);
array[0][0] = 1;
array[0][1] = 2;
array[0][2] = 3;
array[1][0] = 4;
array[2][1] = 5;
array[3][2] = 6;連想配列とは、配列のインデックスを数字ではなく、文字列で指定できる配列のことである。JavaScriptでは連想配列も使うことができる。
var size = {width: 300, height 250};
console.log(size.width);
console.log(size.height);また、連想配列とよく似たものに JSON (JavaScript Object Notation) がある。
Arrayオブジェクトのプロパティ
| プロパティ | 説明 |
|---|---|
| constructor | Arrayオブジェクトのプロトタイプを作成した関数 |
| length | 配列の要素数 |
| prototype | プロパティとメソッドをオブジェクトに追加することを可能にする |
Arrayオブジェクトのメソッド
| メソッド | 説明 |
|---|---|
| concat | 2つ以上の配列を結合して、結合した配列のコピーを返す。 |
| join | 配列の全要素を結合して文字列にする。 |
| pop | 配列の最後の要素を削除して、削除した要素を返す。 |
| push | 配列の最後に要素を追加して、新しい長さを返す。 |
| reverse | 配列の要素の順序を逆にする。 |
| shift | 配列の最初の要素を削除して、削除した要素を返す。 |
| slice | 配列の一部を選択して、選択した要素群を返す。 |
| sort | 配列の要素をソートする。 |
| splice | 配列の要素を置き換える。 |
| toString | 配列を文字列に変換して、結果を返す。 |
| unshift | 配列の先頭に要素を追加して、新しい長さを返す。 |
| valueOf | 配列オブジェクトのプリミティブ値をを返す。 |
JavaScriptで配列の変数を宣言するには、Arrayオブジェクトをインスタンス化する。
var array = new Array();Arrayオブジェクトのコンストラクタの引数に要素数（長さ）を指定して、配列を宣言することもできる。
var array = new Array(5);2次元配列を宣言するには、次のようにする。
var array = new Array(2, 3);配列から条件に合った要素を検索するには、Arrayオブジェクトのfindメソッドを使う。
条件に最初に合致した要素が、findメソッドの戻り値として返される。
var array = [1, 2, 3, 4, 5];
var found = array.find(function(element){
return element > 3;
});
document.writeln(found);上記のJavaScriptの実行結果は次のようになる。
条件に合致するすべての要素を検索したい場合は、Arrayオブジェクトのfilterメソッドを使う。
var array = [1, 2, 3, 4, 5];
var found = array.filter(function(element){
return element > 3;
});
document.writeln(found);上記のJavaScriptの実行結果は次のようになる。
一致する最初の要素ではなく、一致する最後の要素を検索したい場合は、ArrayオブジェクトのlastIndexOfメソッドを使う。
var array = ["foo", "bar", "baz", "foo"];
document.writeln(array.lastIndexOf("foo"));配列の要素の順序を逆にするには、reverse メソッドを使用する。
const array = [1, 2, 3];
const reversed = array.reverse();
console.log(reversed);