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オブジェクトのメソッド

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

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

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

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

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

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

Array.push()

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

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

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

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

Array.splice()

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

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

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

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

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

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

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

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

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

Array.shift()

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

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

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

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

Array.pop()

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

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

array.pop();
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"));

Array.reverse()

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

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