JavaScriptの配列

JavaScriptの配列は、単一の変数に複数の値を保存するために使用されます。

例

var cars = ["Saab", "Volvo", "BMW"];

自分で試してみる

配列とは何ですか？

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

プロジェクトリスト（例えば、車種リスト）がある場合、車種を1つの変数に保存するのは以下のようになります：

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

ただし、すべての車を巡回して特定の値を見つけたい場合はどうですか？300の車種が300の車種であればどうですか？

解決策は配列です！

配列は多くの値を一つの名前で保存し、インデックス番号を参照してこれらの値にアクセスできます。

配列の作成

配列テキストを使用することは、JavaScriptの配列を作成する最も簡単な方法です。

文法：

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

例

var cars = ["Saab", "Volvo", "BMW"];

自分で試してみる

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

例

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];

自分で試してみる

最後の要素の後にカンマを書かないでください（例：「BMW」）。

ブラウザ間の互換性問題が発生する可能性があります。

JavaScriptのキーワードnewを使用します

以下の例も配列を作成し、値を割り当てます：

例

var cars = new Array("Saab", "Volvo", "BMW");

自分で試してみる

以上の二つの例は効果が完全に同じです。以下を使用する必要はありません new Array()。

簡潔さ、可読性、実行速度を考慮して、最初の方法（配列テキストメソッド）を使用してください。

配列要素にアクセスします

参照を通じてインデックス番号（下標番号）配列の要素を参照するために使用します。

この文はcars配列の最初の要素の値を参照します：

var name = cars[0];

この文はcars配列の最初の要素を変更します：

cars[0] = "Opel";

例

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

自分で試してみる

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

配列要素を変更する

この文はcars配列の最初の要素の値を変更します：

cars[0] = "Opel";

例

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

自分で試してみる

完全な配列にアクセスする

JavaScriptを使って、配列名を参照して完全な配列にアクセスできます：

例

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

自分で試してみる

配列はオブジェクト

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

しかし、JavaScriptの配列は配列として最もよく説明されます。

配列はこのように使用されます数字「要素」にアクセスするために使用します。この例では、person[0] Bill を返します：

配列：

var person = ["Bill", "Gates", 62];

自分で試してみる

オブジェクトはこのように使用されます名前「メンバー」にアクセスするために使用します。この例では、person.firstName Bill を返します：

オブジェクト：

var person = {firstName:"Bill", lastName:"Gates", age:19};

自分で試してみる

配列の要素はオブジェクトです

JavaScript の変数はオブジェクトです。配列は特別なタイプのオブジェクトです。

そのため、同じ配列に異なるデータ型の変数を保存できます。

オブジェクトを配列に保存できます。関数も配列に保存できます。さらに配列自体も保存できます：

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

配列の属性とメソッド

JavaScript 配列の本当の力は配列の属性とメソッドに隠されています：

例

var x = cars.length;   // length 属性は要素の数を返します
var y = cars.sort();   // sort() メソッドで配列をソート

次の章で配列メソッドを学びます。

length 属性

length 属性は配列の長さ（要素の数）を返します。

例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // fruits の長さは 4

自分で試してみる

length 属性は常に最高配列索引（インデックス）を超えています。

最初の配列要素にアクセスする

例

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

自分で試してみる

最後の配列要素にアクセスする

例

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.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>";
}

自分で試してみる

以下を使用することもできます Array.foreach() 関数：

例

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
  text += "<li>" + value + "</li>";
}

自分で試してみる

配列要素の追加

配列に新しい要素を追加する最良の方法は、以下を使用するです push() メソッド：

例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // fruitsに新しい要素（Lemon）を追加

自分で試してみる

また、以下を使用することもできます length 属性を使って配列に新しい要素を追加：

例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // fruitsに新しい要素（Lemon）を追加

自分で試してみる

警告！

最高索引の要素を追加することで、配列に未定義の「穴」が作成されます：

例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // fruitsに新しい要素（Lemon）を追加

自分で試してみる

関連配列

多くのプログラミング要素が名前付き索引の配列をサポートしています。

名前付き索引を持つ配列は、関連配列（またはハッシュ）と呼ばれます。

JavaScript サポートされていません名前付き索引の配列のみを使用できます。

JavaScriptでは、配列は数字インデックス。

例

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.lengthは3を返します
var y = person[0];              // person[0]は"Bill"を返します

自分で試してみる

警告！

名前付き索引を使用する場合、JavaScriptは配列を標準オブジェクトとして再定義します。

その後、すべての配列のメソッドとプロパティは正しい結果を生成しません。

例：

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length;         // person.lengthは0を返します
var y = person[0];              // person[0]はundefinedを返します

自分で試してみる

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

JavaScriptでは、配列使用数字インデックス。

JavaScriptでは、オブジェクト使用名前インデックス。

配列は数字インデックスを持つ特別なオブジェクトの種類です。

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

  • JavaScriptは関連配列をサポートしていません
  • 要素名を文字列（テキスト）それでは、オブジェクト。
  • 要素名を数字それでは、配列。

new Array()を避ける

JavaScriptの内蔵の配列構築関数を使用する必要はありません new Array()。

以下を使用してください [] 代わりに！

以下の2つの異なる文は、pointsという名前の新しい空配列を作成します：

var points = new Array();         // 悪い
var points = [];                  // 良い

以下の2つの異なる文は、6つの数字を含む新しい配列を作成します：

var points = new Array(40, 100, 1, 5, 25, 10); // 悪い
var points = [40, 100, 1, 5, 25, 10];          // 良い

自分で試してみる

new キーワードはコードを複雑にします。また、予期せぬ結果を引き起こします：

var points = new Array(40, 100);  // 40と100を含む2つの要素を含む配列を作成

その中の1つの要素を削除するとどうなるでしょう？

var points = new Array(40);       // 40個の未定義要素を含む配列を作成！！！

自分で試してみる

配列を識別する方法

一般的な問題は：ある変数が配列であるかどうかを知る方法は何ですか？

問題は、JavaScriptの演算子 typeof を返します"object":

var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits;             // objectを返します

自分で試してみる

typeof演算子は"object"を返します。なぜなら、JavaScriptの配列はオブジェクトに属します。

解決策 1：

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

Array.isArray(fruits);     // true を返します

自分で試してみる

この方法の問題は ECMAScript 5 にあります 古いブラウザはサポートしていません。

解決策 2：

あなた自身の isArray() この問題を解決する関数：

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

自分で試してみる

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

またはより正確な説明として：オブジェクトのプロトタイプが「Array」を含んでいる場合に true を返します。

解決策 3：

オブジェクトが指定された構造体で作成されている場合 instanceof 演算子は true を返します：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array     // true を返します

自分で試してみる