JavaSscriptのArrayグローバルオブジェクトは、高階層のリストのようなオブジェクトである配列のためのコンストラクタです。

• 文法
• 説明
• プロパティ・メソッド
• Arrayのジェネリックメソッド
• サンプル
• 仕様
• ブラウザ互換性
• 参考

文法

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

引数	説明
element0, element1, ..., elementN	JavaScript配列はArrayのコンストラクタに引数として数値を指定された場合を除き、 与えられた要素を基に初期化されます。(後述) この特別なケースはJavaScriptの配列がArrayコンストラクタで作られた場合のみに適用され、 括弧の文法を使用して作成される配列リテラルには適用されない事に注意してください。
arrayLength	Arrayコンストラクタに渡された唯一の引数が0～232-1の間(含む)の整数である場合、 lengthにその数値が指定された新しいJavaScriptの配列を返します。 もし、これに該当しない数値の場合は、RangeError例外がスローされます。

説明

配列は、内部の変更や探索を行うメソッドのあるprototypeを持つ、リストのようなオブジェクトです。 JavaScript配列のlengthも、その要素の型も、固定されているものではありません。 配列のサイズ長は任意に増やすことも減らすことも出来るため、 配列の各要素が満たせれていることが保証されません。 一般的にこれらは便利なものではありますが、 これらの機能がある特定の使用について望ましくない場合、型付きの配列の使用を検討するのが良いかもしれません。

一部の人には、 配列を連想配列として使用すべきでは無い と考えている人もいるでしょう。 そのような場合は、プレーンなObjectを代わりに使用することが可能ですが、 そのプレーンなObject自身にも注意すべきことがあります。 その一例として、「Lightweight JavaScript dictionaries with arbitrary keys (任意のキーによるJavaScript辞書)」 を参照してみてください。

配列要素へのアクセス

JavaScript配列は0始まりの連番で、最初の配列要素はインデックス番号が0になり、 最後の要素のインデックス番号は配列のlengthプロパティから1を引いた値になります。

var arr = ["first element", "second element"];
console.log(arr[0]);              // "first element"を出力
console.log(arr[1]);              // "second element"を出力
console.log(arr[arr.length - 1]); // "second element"を出力

配列の要素は、toStringがプロパティであるのと同様にオブジェクトのプロパティになりますが、 下記のように配列の要素にアクセスしようとすると、 プロパティ名が不正であるとして、シンタックスエラーがスローされます。

console.log(arr.0);

JavaScript配列とそのプロパティが特別であるから、このような事が起こるわけではありません。 JavaScriptの数値で始まるプロパティには、ドット符号付きで参照することは出来ないため、 括弧符号を使用してアクセスする必要があります。 例えば、プロパティ名"3d"を持つオブジェクトがあるとすると、 これには括弧符号を使用した場合のみにしかアクセスすることは出来ません。 例えば、

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"としてクォーテーションをする必要がある事に注意してください。 JavaScript配列のインデクッスも同様にクォーテーションすることが可能ですが(years[2]の代わりにyears["2"])、 必須ではありません。 years[2]の2は、JavaScriptエンジンによる暗黙のtoString変換を通して、強制的に文字列にさせられます。 これは"2"と"02"がyearsオブジェクトの異なるスロットを参照するためであり、 下記の例では結果はtrueになります。(訳注:それぞれのスロットに異なる値が入っていること)

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

同様にオブジェクトの予約されている単語名のプロパティは、 括弧符号内に文字列リテラルを指定することでのみ、アクセスすることが可能です。

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

console.log(promise['array'])

lengthと数値プロパティの関係について

JavaScript配列のlengthプロパティと数値プロパティには関連性があります。 幾つかの組み込みの配列メソッド(例えば、join、slice、indexOf他)は、 それらが呼び出された際に配列のlengthプロパティの値を考慮します。 他のメソッド(例えば、puth、splice他)もまた、結果として配列のlengthプロパティを更新します。

var fruits = [];
fruits.push("banana", "apple", "peach");

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

JavaScriptの配列でプロパティの設定がされる際に、 そのプロパティが正しい配列インデックスであり、且つその配列の範囲外である場合、 その結果を受けてJavaScriptエンジンが配列のlengthを更新します。

fruits[5] = "mango";
console.log(fruits[5]); // "mango"
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ページ上により詳しく説明されています。

正規表現マッチの結果による配列について

正規表現と文字列とのマッチの結果で、JavaScript配列を作成することが可能です。 この配列はマッチ結果についての情報を提供するプロパティと要素を持ち、 これにはRegExp.exec、String.match、String.replaceなどによって返されます。 これらのプロパティと要素についての説明を分かり易くするために、下記の例を確認し、その下テーブルを参照してください。

// Match one d followed by one or more b's followed by one d
// Remember matched b's and the following d
// Ignore case

//

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

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

プロパティ 要素	説明	例
input	正規表現マッチを行った元の文字列です。 読み込み専用プロパティです。	cdbBdbsbz
index	0始まりのインデックス番号で、文字列内でマッチした場所を表します。 読み込み専用プロパティです。	1
[0]	最後にマッチした文字を示す読み込み専用の要素です。	dbBd
[1], ...[n]	丸括弧()形式の正規表現が含まれる場合、 その部分文字列のマッチを示す読み込み専用の要素です。 可能な丸括弧の部分文字列の数に制限はありません。	[1]: bB [2]: d

プロパティ・メソッド

• プロパティ

• .length

  lengthプロパティは配列の要素数を示す32bitの正の整数です。

• メソッド

• Array.isArray()

  もしオブジェクトが配列であれば、Array.isArray()メソッドはtrueを返し、そうでなければfalseを返します。

• メソッド(prototype)

• .concat()

  concat()メソッドは他の値と/または値を連結して構成した新しい配列を返します。

• .every()

  every()メソッドは、提供された関数によってテストが実装され、配列内の各要素の全てがそのテストにパスするかを確認します。

• .filter()

  filter()メソッドは、提供された関数によって実装されるテストをパスした要素から成る新しい配列を作成します。

• .forEach()

  forEach()メソッドは、配列要素ごとに提供された関数を実行します。

• .indexOf()

  indexOf()メソッドは、与えられた要素が配列内で最初に見つかるインデックスを返し、何も見つからなければ-1を返します。

• .join()

  join()メソッドは、配列内の全ての要素を文字列として連結します。

• .lastIndexOf()

  lastIndexOf()メソッドは、与えられた要素が配列内で見つかった最後のインデックス番号を返し、見つからなければ-1を返します。配列はfromIndexが逆向きに検索されます。

• .map()

  map()メソッドは、配列の各要素での提供された関数を呼び出した結果を使用して、新しい配列を作成します。

• .pop()

  pop()メソッドは、配列から最後の要素を削除し、その要素を返します。

• .push()

  push()メソッドは配列の最後に1つ以上の要素を追加し、新しい配列のlengthを返します。

• .reduce()

  reduce()メソッドは配列に対して関数を適用し、その処理によって配列の各値を(左から右に)一つの値にまとめます。

• .reduceRight()

  reduceRight()メソッドは配列に対して関数を適用し、その処理によって配列の各値を(右から左)一つの値にまとめます。

• .reverse()

  reverse()メソッドは、その配列を逆転させます。配列の最初の要素だったものが最後の要素になり、最後の要素だったものが最初の要素になります。

• .shift()

  shift()メソッドは配列から最初の要素を削除して、その要素を返します。このメソッドは配列のlengthを変更します。

• .slice()

  slice()メソッドは配列の一部分の浅いコピーを新しい配列オブジェクトにして返します。

• .some()

  some()メソッドは配列内の要素が提供された関数によって実装されるテストをパスするか否かをテストします。

• .sort()

  sort()メソッドは配列の要素を適切にソートし、その配列を返します。

• .splice()

  splice()メソッドは古い要素の削除しながら、新しい要素を追加することで、配列の内容を変更します。

• .toLocaleString()

  toLocaleString()メソッドは、その配列と要素を表す文字列を返します。

• .toString()

  toString()メソッドは、その配列と要素を表す文字列を返します。

• .unshift()

  unshift()メソッドは、1つ以上の要素を配列の先頭に追加し、配列の新しいlengthを返します。

Arrayのジェネリックメソッド

時に文字列やその他の配列形式のオブジェクト(関数のargumentsのような)に、 配列のメソッドを適用したいケースがあるかもしれません。 これを行うためには、文字の配列として文字列を扱います。(そうでなければ、配列として配列では無いものを取り扱います) 例えば、変数strの各文字をチェックをするために次のように書くことが出来ます。

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

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

この表記は無駄が多く、JavaScript1.6では一般的な略記が導入されました。

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

ジェネリックは、文字列上でも利用可能です。

これらは現在、ECMAScript標準の一部ではありません。 (ただし、ES6のArray.from()はこれと同じことを行うのに使用することが可能です。) 下記は、全てのブラウザで、その使用を可能にするshim(楔)です。

// 配列拡張は既に含まれているとみなします。
// (同様に、これらのためにpolyfillsが使用できるかもしれません)
(function () {
    'use strict';

    var i,
        // 下記のものを使用して、メソッドの配列を構築することも出来ますが、
        // getOwnPropertyNames()は、non-shimableです。
        // Object.getOwnPropertyNames(Array).filter(function (methodName) {
        //     return typeof Array[methodName] === 'function'});
        methods = [
            'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift',
            'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf',
            'forEach', 'map', 'reduce', 'reduceRight', 'filter',
            'some', 'every'
        ],
        methodCount = methods.length,
        assignArrayGeneric = function (methodName) {
            if (!Array[methodName]) {
                var method = Array.prototype[methodName];
                if (typeof method === 'function') {
                    Array[methodName] = function () {
                        return method.call.apply(method, arguments);
                    };
                }
            }
        };

    for (i = 0; i < methodCount; i++) {
        assignArrayGeneric(methods[i]);
    }
}());

サンプル

例: 配列の作成

下記の例はlengthが0の配列、msgArrayを作成し、 msgArray[0]とmsgArray[99]を割り当てることで、配列のlengthを100に変更しています。

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

if (msgArray.length === 100) {
    console.log("The length is 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');

// キング('k')のポーン('p')を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

仕様

ブラウザ互換性

デスクトップ

機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	◯	◯	◯	◯	◯

モバイル

機能	Android	Chrome for Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	◯	◯	◯	◯	◯	◯

参考

• JavaScript Guide: “Indexing object properties
• JavaScript Guide: “Predefined Core Objects: Array Object”
• Array comprehensions
• Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras
• Typed Arrays

 Back to top