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 shallowCopy = fruits.slice(); // このようにして配列のコピーを作成できます
// ["いちご", "マンゴー"]

構文

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

elementN

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

arrayLength

Array コンストラクターに0から2³²-1までの整数値のみが与えられた場合、その数だけの要素を持つ配列が作成されます。それ以外の数値が与えられた場合、RangeError が throw されます。

説明

配列とは、トラバーサルや変異などの操作の為のいくつかの組み込みメソッドを持つ、リストの様なオブジェクトの事を言います。JavaScript の配列は、要素数も型も固定されていません。配列のサイズは常に可変である為、JavaScript の配列は密であることが保証されていません。一般に、これらは便利な特性ではありますが、固定された配列が必要であれば、Typed Array の使用を検討するのも良いでしょう。

JavaScript の配列は連想配列として使うべきではありません。連想配列には objects を使用できますが、こちらにも注意点があります。例として Lightweight JavaScript dictionaries with arbitrary keys の投稿記事をご覧ください。

配列要素へのアクセス

JavaScript の配列のインデックスは 0 から始まります。配列の最初の要素のインデックスは 0。つまり、最後の要素のインデックスは length プロパティの値より 1 小さい値になります。

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

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

console.log(arr.0);

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

var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];

try {
  console.log(years.0);
}
catch (ex) {
  console.log("ブラケット記法でのアクセス");
  console.log(years[0]);
}

try {
  renderer.3d.setTexture(model, "character.png");
} catch (ex) {
  console.log("Using bracket notation");
  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"]);

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

JavaScript の配列の lengthプロパティと数値プロパティは関連しています。 join、 slice、 indexOf 等の配列のビルトインメソッドは、配列のlengthプロパティの値を考慮します。 また、push、 splice等は、配列の length プロパティも更新します。

var fruits = [];

fruits.push("banana", "apple", "peach");
console.log(fruits.length); // logs 3

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

fruits[3] = "mango";

console.log(fruits[3]);
console.log(fruits.length); // logs 4

length プロパティを直接設定した時も特殊な動作となります。

fruits.length = 10;

console.log(fruits);        // "undefined" で満たされている
console.log(fruits.length); // 10

これらについては length ページで更に解説します。

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

正規表現と文字列の一致から配列を作る事が出来ます。この配列にはプロパティと、マッチに関する情報を提供する要素を持ちます。 配列は RegExp.exec、 String.match、そして String.replace の戻り値です。 これらのプロパティと要素を理解するために、以下の例と表を参照して下さい。

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

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

プロパティとこの一致から返される要素は以下のとおりです。

プロパティ

Array インスタンスから継承されているPropertiesについては、Array インスタンスのPropertiesを参照してください。

Array.length

The Array constructor's length property whose value is 1.

Array.prototype

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

メソッド

Array.from()

Creates a new Array instance from an array-like or iterable object.

 

Array.isArray()

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

Array.of()

Creates a new Array instance with a variable number of arguments, regardless of number or type of the arguments.

Array インスタンス

Array インスタンスは、Array.prototype を継承します。全てのコンストラクタと同様に、コンストラクタのプロトタイプオブジェクトを変更して、Array インスタンスの全てを変更することができます。

プロパティ

メソッド

Mutator methods

Accessor methods

Iteration methods

Array ジェネリックメソッド

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

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

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

この記法はかなりむだであり、JavaScript 1.6 で汎用的な簡易表記を導入しました:

if (Array.every(isLetter, str))
  alert("The string '" + str + "' contains only letters!");

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

これらは現在 ECMAScript 標準に含まれていません (ただしこれを実現するために、ES6 の Array.from() を使用できます)。以下は、あらゆるブラウザでこれらを可能にするためのシムです:

/*globals define*/
// Array の拡張は提供されているものと仮定 (ひとつの方法として、さらにシムを使用します)
(function () {
    'use strict';

    var i,
        // 下記の方法で array のメソッドを構築することも可能ですが、
        //   getOwnPropertyNames() メソッドはシムを適用できません:
        // 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', 'isArray'
        ],
        methodCount = methods.length,
        assignArrayGeneric = function (methodName) {
            var method = Array.prototype[methodName];
            Array[methodName] = function (arg1) {
                return method.apply(arg1, Array.prototype.slice.call(arguments, 1));
            };
        };

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

例

例: 配列を生成する

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

var msgArray = new Array();
msgArray[0] = "Hello";
msgArray[99] = "world";

if (msgArray.length == 100) {
   print("配列の 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']];
print(board.join('\n') + '\n\n');

// キングの前のポーンを 2 つ前へ移動
board[4][4] = board[6][4];
board[6][4] = ' ';
print(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

ブラウザ実装状況

関連情報

• JavaScript ガイド "Working with objects" より、"オブジェクトプロパティのインデックスづけ"
• New in JavaScript 1.7: 配列内包
• New in JavaScript 1.6: Array の拡張
• Draft: Typed Arrays