【JavaScript】Array（配列）オブジェクトの基本的な使い方

JavaScript の配列である Array オブジェクトの基本メソッドについてまとめました。繰り返し用のメソッドは Array（配列）の繰り返しメソッドを参照して下さい。

配列の生成

配列の生成方法は以下の通りです。

var ary = ['hoge', 'fuga', 'bar'];  // 配列リテラルを使用
var ary = new Array('hoge', 'fuga', 'bar');  // コンストラクタを使用
var ary = Array('hoge', 'fuga', 'bar');  // Array関数を使用

空の配列を作成したい場合や、サイズを指定して作成することもできます。

var ary = [];
var ary = new Array();
var ary = new Array(10);  // サイズ10の空の配列を生成

配列の要素はインデックス番号をキーに配列名[インデックス番号]の形式でアクセスすることが可能です。配列には先頭要素を 0 として順番にインデックス番号が振られていきます。

console.log(ary[1]);  // fuga

配列の要素数は最後のインデックス番号によって決まります。

var ary = ['hoge', 'fuga', 'bar'];
console.log(ary.length);  // 3
ary[99] = 'max';
console.log(ary.length);  // 100

Arrayクラスメソッド

メソッド	概要
isArray	オブジェクトが配列であれば true、配列でなければ false を返す。

Arrayインスタンスプロパティ

プロパティ	概要
length	配列の要素数を保持している。

Arrayインスタンスメソッド

配列を書き換えるメソッド

メソッド	概要
pop	配列から最後の要素を取り除いて、その要素を返す。
push	配列の末尾に要素を追加して、新しい配列の要素数を返す。
reverse	配列の要素を反転させる。
shift	配列から最初の要素を取り除いて、その要素を返す。
unshift	配列の最初に要素を追加して、新しい配列の要素数を返す。
sort	配列の要素をソートする。
splice	古い要素を取り除きつつ新しい要素を追加する。

配列を書き換えないメソッド

メソッド	概要
concat	配列に他の配列や値を結合する。
join	配列内の要素を区切り文字で連結する。
slice	配列の一部を取り出して新しい配列を返す。
indexOf	引数に与えられた内容と同じ要素の最初のインデックスを返す。
lastIndexOf	引数に与えられた内容と同じ要素の最後のインデックスを返す。
toString	配列とその要素を表す文字列を返す。
toLocaleString	ロケール固有の文字列に分割される。

Array - JavaScript | MDN

メソッド詳細

Array.prototype.pop()

配列の最後の要素を取り除き、呼び出し元にその値を返します。既存の配列が変更されます。

var ary = ['hoge', 'fuga', 'bar'];
var v = ary.pop();
console.log(v);  // bar
console.log(ary);  // ["hoge", "fuga"]

Array.prototype.push()

配列の末尾に要素を追加し、戻り値として新しい配列の length プロパティを返します。要素は復数追加できますが、配列などを指定した場合はそのまま追加されてしまうので、concat の方が適してる場合もあります。

var ary = ['hoge', 'fuga', 'bar'];
var len = ary.push(1, 2, 3);
console.log(len);  // 6
console.log(ary);  // ["hoge", "fuga", "bar", 1, 2, 3]
ary.push(['foo']);  //
console.log(len);  // 7
console.log(ary);  // ["hoge", "fuga", "bar", 1, 2, 3, ["foo"]]

Array.prototype.shift()

0 番目のインデックスの要素を取り除き、続くインデックスの値をずらします。呼び出し元には、削除された値を返します。length プロパティが 0 の場合 undefined を返します。

var ary = ['hoge', 'fuga', 'bar'];
var v = ary.shift();
console.log(v);  // hoge
console.log(ary);  // ["fuga", "bar"]
console.log(ary.length);  // 2

Array.prototype.unshift()

配列の最初に 1 つ以上の要素を追加し、戻り値として新しい配列の length プロパティを返します。

var ary = ['hoge', 'fuga', 'bar'];
var len = ary.unshift(1, 2, 3);
console.log(len);  // 6
console.log(ary);  // [1, 2, 3, "hoge", "fuga", "bar"]

Array.prototype.sort()

引数にはソート順を定義する比較関数を指定します。比較関数が省略された場合、配列は各要素の文字列比較に基づき辞書順にソートされます。比較関数が与えられた場合、配列の要素は比較関数の返り値に基づきソートされます。

compareFunction(a, b) が 0 未満の場合、a を b より小さい添字にソートします。
compareFunction(a, b) が 0 より大きい場合、b を a より小さい添字にソートします。
compareFunction(a, b) が 0 を返す場合、a と b は互いに関して順序を変えません。

文字列として比較されると数値でも以下のようにソートされてしまうため、数値の比較関数を与えてやる必要があります。

var ary = [8, 60, 20, 9];
ary.sort();  // 文字列としてソートされた結果：[20, 60, 8, 9]
ary.sort(function compare(a,b) {return a - b});  // 数値としてソート：[8, 9, 20, 70]

Array.prototype.concat()

メソッドを呼び出した配列に、引数で指定した他の配列や値が順に続くように結合された、新しい配列を返します。既存の配列は変更されません。

var result = array.concat(value1, value2, ..., valueN);

以下のように配列や値を一緒に引数に指定することも可能です。

var ary = ['hoge', 'fuga', 'bar'];
var result = ary.concat(1,2,[10,20]);  // ["hoge", "fuga", "bar", 1, 2, 10, 20]

Array.prototype.join()

配列のすべての要素を文字列に変換したものが、指定した区切り文字で1 つの文字列に結合されます。デフォルトの区切り文字はカンマで、空文字を渡した場合は区切り文字なしで結合されます。undefined または null の要素は、空文字列に変換されます。既存の配列は変更されません。

var ary = ['hoge', 'fuga', undefined, 'bar'];
var result = ary.join();  // "hoge,fuga,,bar"
var result = ary.join('');  // "hogefugabar"

Array.prototype.slice()

引数で取得する開始位置と終了位置を指定しますarray.slice(begin[,end]) 指定した begin から end の直前までのインデックスの要素を取り出します。begin を省略した場合は 0 番目の要素から、end を省略した場合は配列の最後まで取り出します。

var ary = ['hoge', 'fuga', 'bar', 'foo'];
var result = ary.slice(1,3);  // ["fuga", "bar"]
var result = ary.slice(2);  // ["bar", "foo"]
var result = ary.slice();  // ["hoge", "fuga", "bar", "foo"]

Array.prototype. indexOf()

引数に与えられた内容と同じ内容を持つ要素の内、最初の要素のインデックスを返し、存在しない場合は -1 を返します。要素の比較は三重イコール演算子===が使用されます。fromIndex で検索を開始するインデックスの指定が可能です。

var index = array.indexOf(searchElement[, fromIndex]);

Array.prototype. lastIndexOf()

引数に与えられた内容と同じ内容を持つ要素の内、最後の要素のインデックスを返し、存在しない場合は -1 を返します。要素の比較は三重イコール演算子===が使用されます。配列は fromIndex から逆向きに検索されるため、検索を開始するインデックスの指定が可能です。

var index = array.lastIndexOf(searchElement[, fromIndex]);

TASK NOTES