Array

JavaScript の Array オブジェクトは、配列を構築するためのグローバルオブジェクトで、配列とは複数の要素の集合を格納管理するリスト構造です。

配列を作成する

var fruits = ["りんご", "バナナ"];

console.log(fruits.length);
// 2

配列の要素を取得する

var first = fruits[0];
// りんご

var last = fruits[fruits.length - 1];
// バナナ

配列のループ処理

fruits.forEach(function(item, index, array) {
  console.log(item, index);
});
// りんご 0
// バナナ 1

配列の末尾に要素を追加する

var newLength = fruits.push("みかん");
// ["りんご", "バナナ", "みかん"]

配列の末尾の要素を削除する

var last = fruits.pop(); // 配列の末尾の要素 "みかん" を削除
// ["りんご", "バナナ"];

配列の先頭の要素を削除する

var first = fruits.shift(); // 配列の先頭の要素"りんご" を削除
// ["バナナ"];

配列の先頭に要素を追加する

var newLength = fruits.unshift("いちご") // 配列の先頭に追加
// ["いちご", "バナナ"];

要素のインデックスを取得する

fruits.push("マンゴー");
// ["いちご", "バナナ", "マンゴー"]

var pos = fruits.indexOf("バナナ");
// 1

インデックス位置を指定して要素を削除する

var removedItem = fruits.splice(pos, 1); // 指定位置の要素を削除できます

// ["いちご", "マンゴー"]

インデックス位置から複数の要素を削除する

var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'];
console.log(vegetables); 
// ["Cabbage", "Turnip", "Radish", "Carrot"]

var pos = 1, n = 2;

var removedItems = vegetables.splice(pos, n); 
// 複数の要素を削除するには、n で削除する要素数を定義します
// 指定位置（pos）以降から n 個分の要素が削除されます

console.log(vegetables); 
// ["Cabbage", "Carrot"] (元の配列が変化)

console.log(removedItems); 
// ["Turnip", "Radish"]

配列をコピーする

var shallowCopy = fruits.slice(); // 配列のコピーを作成できます
// ["いちご", "マンゴー"]

構文

[element0, element1, ..., elementN] new Array(element0, element1[, ...[, elementN]]) new Array(arrayLength)

引数

elementN

JavaScript の配列は、与えられた要素で初期化されます。ただし、Array コンストラクタに引数が 1 個だけ与えられ、それが数値である場合を除きます (下記の arrayLength 引数を参照)。これは、Array コンストラクタで作成された JavaScript 配列にのみ当てはまる特殊なケースで、ブラケット構文 ("[]") で生成された配列リテラルには当てはまらないことに注意してください。

arrayLength

Array コンストラクタに 0 から 2³²-1 までの間の整数値 1 個が与えられた場合、その数値の要素数を持つ新しい JavaScript 配列が生成されます（注: これは arrayLength 分の空のスロットがある配列を意味します。スロットに実際の undefined 値があるわけではありません）。それ以外の数値が与えられた場合、RangeError が throw されます。

説明

配列は、リストのようなオブジェクトであり、配列に対して横断的な操作や変更を行う組み込みのメソッドを持ちます。JavaScript の配列は、要素数も要素の型も固定されていません。配列のサイズは常に可変であり、データを連続しない位置に格納できるため、JavaScript の配列は密であることが保証されていません (プログラマの使い方次第です)。一般に、これらは便利な特性ではありますが、固定された配列が必要であれば、Typed Array の使用を検討するのも良いでしょう。

配列は（連想配列のように）要素のインデックスに文字列を使うことはできず、整数を使う必要があります。ブラケット構文（またはドット構文）を使った非整数の設定・取得は、配列リストそのものからではなく、その配列のオブジェクトプロパティコレクションに紐付いた変数に対して行われます。配列のオブジェクトプロパティと配列リストの要素は異なり、配列の走査や変換の操作は名前付きプロパティに適用されません。

配列要素へのアクセス

JavaScript の配列のインデックスは 0 から始まるので、配列の最初の要素はインデックス 0 にあります。そして、最後の要素のインデックスは length プロパティの値から 1 を引いた値になります。不正なインデックス番号を使った場合は undefined を返します。

var arr = ["最初の要素", "2 番目の要素", "最後の要素"];
console.log(arr[0]);              // ログ : "最初の要素"
console.log(arr[1]);              // ログ : "2 番目の要素"
console.log(arr[arr.length - 1]); // ログ : "最後の要素"

toString が一つのプロパティであるように、配列における配列要素は Array オブジェクトのプロパティです。しかし、次のように配列にアクセスしようとすると、プロパティ名が正しくないため、構文エラーが投げられる事に注意してください:

console.log(arr.0); // 構文エラー

これは、JavaScript の配列とそのプロパティに限った話ではありません。数字から始まるプロパティは、ドット演算子を用いて参照できないため、ブラケット記法を用いる必要があります。例えば '3d' というプロパティを持つオブジェクトがある場合は、ドット記法ではなくブラケット記法を用いて参照しなければなりません。この類似点を、以下 2 つのコード例で示します:

var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
console.log(years.0); // 構文エラー
console.log(years[0]); // 正しく動作

renderer.3d.setTexture(model, 'character.png');     // 構文エラー
renderer['3d'].setTexture(model, 'character.png');  // 正しく動作

3d の例で、'3d' は引用符で括らなければなりません。配列要素へのアクセスにも years[2] でなく years['2'] を使う事ができますが、必要になることはないでしょう。years[2] の 2 は最終的に、JavaScript エンジンが内部的に toString メソッドで型変換することで文字列にされます。これは '2' と '02' が years オブジェクトの異なる場所を指すようにするためでです。このため、以下の例は true がログ出力されます:

console.log(years['2'] != years['02']);

同様に、オブジェクトのプロパティ名が偶然にも予約語だった(!) 場合は、ブラケット記法で文字列リテラルを使うことでのみアクセスできます (ただ、少なくとも FireFox 40.0a2 では、ドット記法でアクセスできてしまいます):

var promise = {
  'var'  : 'text',
  'array': [1, 2, 3, 4]
};

console.log(promise['var']);

length と数値プロパティとの関係

JavaScript 配列の length プロパティと数値プロパティは関連しています。配列の組み込みメソッド (join()、slice()、indexOf() 等) は、呼び出された時、配列の length プロパティの値を考慮します。また、push()、splice()等の他のメソッドも、配列の length プロパティを更新します。

var fruits = [];
fruits.push('バナナ', 'りんご', 'もも');

console.log(fruits.length); // 3

有効なインデックスを持つ JavaScript 配列の現在のサイズに収まらない位置に要素を追加すると、配列はそれを収められるサイズに拡張され、length プロパティも更新されます。

fruits[5] = 'マンゴー';
console.log(fruits[5]);  // 'マンゴー'
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 6

length プロパティを直接設定して増やすと以下のように隙間ができます。

fruits.length = 10;
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 10

length プロパティの数を減らすと、要素が削除されます。

fruits.length = 2;
console.log(Object.keys(fruits)); // ['0', '1']
console.log(fruits.length); // 2

これらについては Array.length ページで詳しく解説します。

match の結果を利用して配列を作成

正規表現と文字列の match の結果から配列を生成できます。この配列には、プロパティと、マッチに関する情報を提供する要素を持ちます。このような配列は、RegExp.exec、String.match、そして String.replace の戻り値です。これらのプロパティと要素を理解するために、以下の例を見て表を参照してください。

// 1 文字の d、1 文字以上の b、1 文字の d にマッチします
// マッチした b およびそれに続く d を記憶します
// 大文字小文字は区別しません

var myRe = /d(b+)(d)/i;
var myArray = myRe.exec('cdbBdbsbz');

このマッチから返されるプロパティと要素は次の通りです:

プロパティ

Array.length

Array コンストラクタの長さ。値は 1 です。

get Array[@@species]

コンストラクタ関数。派生オブジェクトを生成する時に使われます。

Array.prototype

これを使うとすべての Array オブジェクトにプロパティを追加することができます。

メソッド

Array.from()

配列型 (array-like) や反復型 (iterable) オブジェクトから、新しい Array インスタンスを生成します。

Array.isArray()

配列であれば true を、配列でなければ false を返します。

Array.of()

可変個の引数から新しい Array インスタンスを生成します。引数の数や型による特別処理はありません。

Array インスタンス

すべての Array インスタンスは、Array.prototype から継承します。コンストラクタの prototype オブジェクトを変更すると、すべての Array インスタンスに影響を及ぼすことができます。

プロパティ

メソッド

変更メソッド

アクセサ メソッド

反復メソッド

Array ジェネリックメソッド

文字列や他の配列のようなオブジェクト (関数の arguments など) に Array のメソッドを適用したいと考える場合があります。こうすると、文字列を文字の配列として扱えます (あるいは、配列ではないものを配列として扱う)。例えば、変数 str に含まれる文字がすべて英字であることをチェックするには、次のように書きます:

function isLetter(character) {
  return character >= 'a' && character <= 'z';
}

if (Array.prototype.every.call(str, isLetter)) {
  console.log("The string '" + str + "' contains only letters!");
}

この記法は、どちらかというと無駄であるため、JavaScript 1.6 で汎用的な簡易表記が導入されました:

if (Array.every(str, isLetter)) {
  console.log("The string '" + str + "' contains only letters!");
}

ジェネリックメソッド は String でも使用できます。

これらは現在 ECMAScript 標準に含まれていませんし、Gecko以外のブラウザーではサポートされていません。標準による代替手段としては、Array.from() を使って正規の配列に変換することです。と言っても、Array.from() は古いブラウザーではサポートされていませんけど。

if (Array.from(str).every(isLetter)) { 
  console.log("The string '" + str + "' contains only letters!"); 
}

例

配列を生成する

次の例では、空の配列「msgArray」を生成し、msgArray[0] と msgArray[99] に値を設定、その後配列の要素数が 100 である事を確認しています。

var msgArray = [];
msgArray[0] = 'Hello';
msgArray[99] = 'world';

if (msgArray.length === 100) {
  console.log("配列の length は 100 です。");
}

2 次元配列を生成する

以下では、文字列の 2 次元配列としてチェスボードを生成しています。最初の動きは (6,4) の 'P' を (4,4) にコピーすることでなされます。古い位置 (6,4) は空白にされます。

var board = [ 
  ['R','N','B','Q','K','B','N','R'],
  ['P','P','P','P','P','P','P','P'],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  ['p','p','p','p','p','p','p','p'],
  ['r','n','b','q','k','b','n','r'] ];

console.log(board.join('\n') + '\n\n');

// キングの前のポーンを 2 つ前へ移動
board[4][4] = board[6][4];
board[6][4] = ' ';
console.log(board.join('\n'));

出力を以下に示します:

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , , 
 , , , , , , , 
 , , , , , , , 
 , , , , , , , 
p,p,p,p,p,p,p,p
r,n,b,q,k,b,n,r

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , , 
 , , , , , , , 
 , , , ,p, , , 
 , , , , , , , 
p,p,p,p, ,p,p,p
r,n,b,q,k,b,n,r

配列を使って値のセットを表にする

values = [];
for (var x = 0; x < 10; x++){
 values.push([
  2 ** x,
  2 * x ** 2
 ])
};
console.table(values)

結果は次のようになります。

0	1	0
1	2	2
2	4	8
3	8	18
4	16	32
5	32	50
6	64	72
7	128	98
8	256	128
9	512	162

(最初の列は要素のインデックスです)

仕様

ブラウザー実装状況

関連情報

• JavaScript ガイド “Working with objects: オブジェクトプロパティのインデックス付け”
• JavaScript ガイド “Predefined Core Objects: Array オブジェクト”
• 配列内包 (Array comprehensions)
• Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras
• Typed Arrays