JavaScriptの配列とArrayオブジェクト

JavaScriptにおける配列とは、数値や文字列等のデータを順番に並べた集合である。

宣言

JavaScriptで配列の変数を宣言するには、Arrayオブジェクトをインスタンス化する。

var array = new Array();

Arrayオブジェクトのコンストラクタの引数に要素数(長さ)を指定して、配列を宣言することもできる。

var array = new Array(5);

2次元配列を宣言するには、次のようにする。

var array = new Array(2, 3);

初期化

JavaScriptで配列を初期化するには、配列の要素を配列リテラル([]で囲んだ要素)で指定する。

var array = ["foo", "bar", "baz"];

または、Arrayオブジェクトのコンストラクタの引数に要素のリストを渡して、配列の宣言と初期化を行うこともできる。

var array = new Array(1, 2, 3);

2次元配列を初期化するには、次のようにする。

var array = [
  [1, 2, 3],
  [4, 5, 6]
];

代入

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で配列の要素数(長さ)は、lengthプロパティで取得できる。

var array = ["foo", "bar", "baz"];

console.log(array.length);

2次元配列の要素数は、次元毎にlengthプロパティで取得する。

var array = [
  [1, 2, 3],
  [4, 5, 6]
];

console.log(array.length);
console.log(array[0].length);
console.log(array[1].length);

ループ処理

JavaScriptでループ(繰返し処理)を配列の要素数分行うには、次に示す2種類の方法がある。

var array = ["foo", "bar", "baz"];

for (var i = 0; i < array.length; i++) {
  console.log(array[i]);
}

JavaScriptで配列の要素ごとに繰り返し処理を行うには、ArrayオブジェクトのforEachメソッドを使う。

var array = ["foo", "bar", "baz"];

array.forEach(function(element){
  console.log(element);
});

連結

JavaScriptで配列を連結するには、Arrayオブジェクトのconcatメソッドを使う。

var array1 = ["foo", "bar", "baz"];
var array2 = ["qux", "quux", "corge"];

array1.concat(array2);

Array.prototype.push.applyで配列を連結することもできる。

var array1 = ["foo", "bar", "baz"];
var array2 = ["qux", "quux", "corge"];

Array.prototype.push.apply(array1, array2);

joinで配列の要素を連結した文字列を作成する

JavaScriptで配列の要素を連結した文字列を作成するには、Arrayオブジェクトのjoinメソッドを使う。

var array = ["foo", "bar", "baz"];

document.writeln(array.join());

上記のJavaScriptの実行結果は次のようになる。

joinメソッドの引数を省略した場合、区切り文字として「,」が各要素の間に入る。

区切り文字を入れたくない場合は、join('')とする。

var array = ["foo", "bar", "baz"];

document.writeln(array.join(''));

上記のJavaScriptの実行結果は次のようになる。

任意の区切り文字列を指定したい場合は、joinメソッドの引数に区切り文字列を指定する。

var array = ["foo", "bar", "baz"];

document.writeln(array.join("と"));

上記のJavaScriptの実行結果は次のようになる。

追加

既存の配列に要素を追加できる。

先頭に追加

配列の先頭に要素を追加するには、Arrayオブジェクトのunshiftメソッドを使う。

var array = ["foo", "bar", "baz"];

array.unshift("qux");
document.writeln(array.join());

上記のJavaScriptの実行結果は次のようになる。

末尾に追加

配列の末尾に要素を追加するには、Arrayオブジェクトのpushメソッドを使う。

var array = ["foo", "bar", "baz"];

array.push("qux");
document.writeln(array.join());

上記のJavaScriptの実行結果は次のようになる。

途中に追加

配列の途中に要素を追加するには、Arrayオブジェクトのspliceメソッドを使う。

var array = ["foo", "bar", "baz"];

array.splice(1, 1, "qux");
document.writeln(array.join());

上記のJavaScriptの実行結果は次のようになる。

削除

既存の配列から要素を削除できる。

先頭を削除

配列の先頭の要素を削除するには、Arrayオブジェクトのshiftメソッドを使う。

var array = ["foo", "bar", "baz"];

array.shift();
document.writeln(array.join());

上記のJavaScriptの実行結果は次のようになる。

末尾を削除

配列の末尾の要素を削除するには、Arrayオブジェクトのpopメソッドを使う。

var array = ["foo", "bar", "baz"];

array.pop();
document.writeln(array.join());

上記のJavaScriptの実行結果は次のようになる。

途中を削除

配列の途中の要素を削除するには、Arrayオブジェクトのspliceメソッドを使う。

var array = ["foo", "bar", "baz"];

array.splice(1, 1);
document.writeln(array.join());

上記のJavaScriptの実行結果は次のようになる。

検索

Array.find()

配列から条件に合った要素を検索するには、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()

条件に合致するすべての要素を検索したい場合は、Arrayオブジェクトのfilterメソッドを使う。

var array = [1, 2, 3, 4, 5];

var found = array.filter(function(element){
  return element > 3;
});

document.writeln(found);

上記のJavaScriptの実行結果は次のようになる。

Array.indexOf()

指定した値に一致する要素のインデックスを検索する場合は、indexOfメソッドを使う。

一致する要素が見つからなかった場合、indexOfメソッドは -1 を返す。

var array = ["foo", "bar", "baz"];

document.writeln(array.indexOf("bar"));

上記のJavaScriptの実行結果は次のようになる。

検索の開始位置を指定したい場合は、indexOfの第2引数に検索を開始するインデックスを指定する。

var array = ["foo", "bar", "baz", "foo"];

document.writeln(array.indexOf("foo", 1));

Array.lastIndexOf()

一致する最初の要素ではなく、一致する最後の要素を検索したい場合は、ArrayオブジェクトのlastIndexOfメソッドを使う。

var array = ["foo", "bar", "baz", "foo"];

document.writeln(array.lastIndexOf("foo"));

連想配列

連想配列とは、配列のインデックスを数字ではなく、文字列で指定できる配列のことである。JavaScriptでは連想配列も使うことができる。

var size = {width: 300, height 250};

console.log(size.width);
console.log(size.height);

また、連想配列とよく似たものに JSON (JavaScript Object Notation) がある。

Arrayオブジェクト

Arrayオブジェクトのプロパティ

Arrayオブジェクトのプロパティ
プロパティ 説明
constructor Arrayオブジェクトのプロトタイプを作成した関数
length 配列の要素数
prototype プロパティとメソッドをオブジェクトに追加することを可能にする

Arrayオブジェクトのメソッド

Arrayオブジェクトのメソッド
メソッド 説明
concat 2つ以上の配列を結合して、結合した配列のコピーを返す。
join 配列の全要素を結合して文字列にする。
pop 配列の最後の要素を削除して、削除した要素を返す。
push 配列の最後に要素を追加して、新しい長さを返す。
reverse 配列の要素の順序を逆にする。
shift 配列の最初の要素を削除して、削除した要素を返す。
slice 配列の一部を選択して、選択した要素群を返す。
sort 配列の要素をソートする。
splice 配列の要素を置き換える。
toString 配列を文字列に変換して、結果を返す。
unshift 配列の先頭に要素を追加して、新しい長さを返す。
valueOf 配列オブジェクトのプリミティブ値をを返す。