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

目次

配列の宣言

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

// 配列の宣言
var array = new Array();

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

// 配列の宣言
var array = new Array(5);

配列の初期化

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

// 2次元配列の初期化
var array = [1, 2, 3];

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

// 2次元配列の初期化
var array = new Array(1, 2, 3);

配列の代入

JavaScriptで配列に値を代入するには、配列の要素ごとに値を代入する。

配列の要素は、[]にインデックス(0から始まる数値)を指定する。

// 配列の宣言
var array = new Array(3);

// 配列の代入
array[0] = 'A';
array[1] = 'B';
array[2] = 'C';

配列の要素数

JavaScriptで配列の要素数(長さ)は、lengthプロパティで取得できる。

// 配列の宣言
var array = ["foo", "bar", "baz"];

// 配列の要素数の分繰り返す
for (var i = 0; i < array.length; i++) {
  console.log(array[i]);
}

forEachでループ処理を行う

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

// 配列の宣言
var array = ["foo", "bar", "baz"];

// 配列の要素数の分繰り返す
array.forEach(function(element){
  document.writeln(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"];

// joinで連結
document.writeln(array.join());

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

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

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

// 配列の宣言
var array = ["foo", "bar", "baz"];

// joinで連結
document.writeln(array.join(''));

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

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

// 配列の宣言
var array = ["foo", "bar", "baz"];

// joinで連結
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){
  // 3より大きい要素
  return element > 3;
});

document.writeln(found);

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

Array.filter()

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

// 配列の宣言
var array = [1, 2, 3, 4, 5];

// 配列の検索
var found = array.filter(function(element){
  // 3より大きい要素
  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"));

Arrayオブジェクト

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

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

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

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