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

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

初期化

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でループ（繰返し処理）を配列の要素数分行うには、次に示す2種類の方法がある。

for ループ
forEach ループ

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

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

連想配列

連想配列とは、配列のインデックスを数字ではなく、文字列で指定できる配列のことである。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	配列オブジェクトのプリミティブ値をを返す。

Array()

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

var array = new Array();

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

var array = new Array(5);

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

var array = new Array(2, 3);

Array.length

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);

Array.forEach()

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

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

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

Array.concat()

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);

Array.join()

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

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

document.writeln(array.join());

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

foo,bar,baz

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

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

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

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

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

foobarbaz

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

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

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

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

fooとbarとbaz

Array.unshift()

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

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

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

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

qux,foo,bar,baz

Array.push()

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

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

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

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

foo,bar,baz,qux

Array.splice()

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

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

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

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

foo,qux,baz

配列の途中にある要素を削除する

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

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

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

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

foo,baz

Array.shift()

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

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

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

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

bar,baz

Array.pop()

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

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

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

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

foo,bar

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の実行結果は次のようになる。

4,5

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.reverse()

配列の要素の順序を逆にするには、reverse メソッドを使用する。

const array = [1, 2, 3];
const reversed = array.reverse();
console.log(reversed);