JavaScript 配列

❮ 前章へ 次章へ ❯

JavaScript の配列は、1つの変数に複数の値を格納するために使用します。

var cars = ["Saab", "Volvo", "BMW"];
Try it Yourself »

配列とは?

配列は、一度に複数の値を保有できる特別な変数です。

項目のリスト(例えば、車名のリスト)を持っていた場合、車を1つの変数に格納する場合は次のようになります:

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

しかし、車をループして特定のものを見つけたいとしたらどうしますか? 3台ではなく、300台あればどうでしょうか?

解決策は配列です!

配列は1つの名前で多数の値を保有でき、インデックス番号で参照して値にアクセスできます。


この効果はブラウザ間で矛盾します。 JavaScriptキーワードの使用new

配列の作成

配列リテラルを使用するのは、JavaScript 配列を作成する最も簡単な方法です。

構文:

var array-name = [item1, item2, ...];      

var cars = ["Saab", "Volvo", "BMW"];
Try it Yourself »

スペースや改行は重要ではありません。 宣言は複数の行にまたがることができます:

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];
Try it Yourself »

最後の要素の後にカンマを入れないでください ("BMW", など)。
この影響はブラウザ間で異なります。


JavaScript キーワードの new を使用する

次の例も、配列を作成して、値を代入します:

var cars = new Array("Saab", "Volvo", "BMW");
Try it Yourself »

上の2つの例はまったく同じです。new Array() を使う必要はありません。
シンプルで、読みやすくて実行速度のために、最初のもの(配列リテラルメソッド)を使用してください。


配列の要素へのアクセス

インデックス番号を参照することで、配列要素を参照します。

次のステートメントは、cars の最初の要素の値にアクセスします:

var name = cars[0];

次のステートメントは、cars の最初の要素を変更します:

cars[0] = "Opel";

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
Try it Yourself »

[0] は、配列の最初の要素です。[1] は 2番目の要素です。配列のインデックスは0から始まります。


配列全体へのアクセス

JavaScript を使用では、配列名を参照することで、配列全体にアクセスできます:

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
Try it Yourself »

配列はオブジェクトです

配列は、特殊なタイプのオブジェクトです。 JavaScript の typeof 演算子は、配列に対して "object" を返します。

しかし、JavaScript 配列の最良の説明は配列です。

配列は、その "要素" にアクセスするために数字を使用します。 次の例では、person[0] は John を返します:

配列:

var person = ["John", "Doe", 46];
Try it Yourself »

オブジェクトは、「メンバー」にアクセスするために名前を使用します。 次の例では、person.firstName は John を返します:

Object:

var person = {firstName:"John", lastName:"Doe", age:46};
Try it Yourself »

配列要素はオブジェクトにできる

JavaScript 変数はオブジェクトにすることができます。配列は、特別な種類のオブジェクトです。

このため、同じ配列内に異なる型の変数を持つことができます。

配列内にオブジェクトを持つことができます。配列内に関数を持つことができます。配列内に配列を持つことができます:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

配列プロパティとメソッド

JavaScript 配列の本当の強みは、組込みの配列プロパティとメソッドです:

var x = cars.length;   // The length property returns the number of elements
var y = cars.sort();   // The sort() method sorts arrays

配列メソッドについては、次の章で説明します。


length プロパティ

配列の length プロパティは、配列の長さ(配列要素の数)を返します。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // the length of fruits is 4
Try it Yourself »

length プロパティは、配列インデックスより常に1つ大きい数値です。


配列要素のループ

配列をループする最良の方法は、"for" ループを使用することです:

var fruits, text, fLen, i;

fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
    text += "<li>" + fruits[i] + "</li>";
}
Try it Yourself »

配列要素の追加

新しい要素を配列に追加する最も簡単な方法は、push メソッドを使用することです:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // adds a new element (Lemon) to fruits
Try it Yourself »

新しい要素は、length プロパティを使って配列に追加することもできます:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // adds a new element (Lemon) to fruits
Try it Yourself »

警告 !

インデックスが大きい要素を追加すると、配列に未定義の「穴」ができます:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // adds a new element (Lemon) to fruits
Try it Yourself »

連想配列

多くのプログラミング言語は、名前付きインデックスで配列をサポートしています。

名前付きインデックスを持つ配列は、連想配列(またはハッシュ)と呼ばれます。

JavaScriptは名前付きインデックスの配列をサポートしていません

JavaScript では、配列は常に番号付きインデックスを使用します。

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length will return 3
var y = person[0];             // person[0] will return "John"
Try it Yourself »

警告 !!
名前付きインデックスを使用すると、JavaScript は配列を標準オブジェクトに再定義します。
その後は、すべての配列メソッドとプロパティは不正確な結果を生成します

 例:

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length will return 0
var y = person[0];             // person[0] will return undefined
Try it Yourself »

配列とオブジェクトの違い

JavaScript では、配列番号付きインデックスを使用します。

JavaScript では、オブジェクト名前付きインデックスを使用します。

配列は、番号付きのインデックスを使用する特別な種類のオブジェクトです。


配列を使用する場合とオブジェクトを使用する場合


new Array() を避ける

JavaScript の組込みの配列コンストラクタ new Array() を使用する必要はありません。

代わりに [] を使用してください。

次の2つの異なるステートメントは、points という名前の新しい空の配列を作成します:

var points = new Array();         // Bad
var points = [];                  // Good 

次の2つの異なるステートメントは、6つの数字を含む新しい配列を作成します:

var points = new Array(40, 100, 1, 5, 25, 10); // Bad
var points = [40, 100, 1, 5, 25, 10];          // Good
Try it Yourself »

new キーワードはコードを複雑にします。また、予期しない結果が生じることがあります:

var points = new Array(40, 100);  // Creates an array with two elements (40 and 100)

要素の1つを削除するとどうなりますか?

var points = new Array(40);       // Creates an array with 40 undefined elements !!!!!
Try it Yourself »

配列の認識方法

変数が配列かどうかをどうしたら分かりますか?、と言う質問がよくあります。

問題は、JavaScript 演算子 typeof が "object" を返すことです:

var fruits = ["Banana", "Orange", "Apple", "Mango"];

typeof fruits;             // returns オブジェクト
Try it Yourself »

JavaScript 配列はオブジェクトであるため、typeof 演算子は object を返します。

解決策1:

この問題を解決するために、ECMAScript 5は、新しいメソッド Array.isArray() を定義しています:

Array.isArray(fruits);     // returns true
Try it Yourself »

この解決策の問題は、古いブラウザでは ECMAScript 5 をサポートしていないことです。

解決策2:

この問題を解決するには、独自の isArray() 関数を作成することです:

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}
Try it Yourself »
、instanceof演算子はtrueを返します。

上の関数は、引数が配列の場合は常に true を返します。

より正確にいえば、オブジェクト・プロトタイプに "Array" という単語が含まれている場合は true を返します。

解決策3:

instanceof 演算子は、オブジェクトが指定のコンストラクタによって作成された場合は true を返します:

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits instanceof Array     // returns true
Try it Yourself »

練習問題による自己診断

Exercise 1 »   Exercise 2 »   Exercise 3 »   Exercise 4 »   Exercise 5 »


❮ 前章へ 次章へ ❯