配列は、複数の値を保持できる特別な変数です。
const cars = ["Saab", "Volvo", "BMW"];
自分で試してみる » 配列を使用する理由
アイテムのリスト(車の名前のリストなど)がある場合、車を単一の変数に格納すると、次のようになります。
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
しかし、車をループして特定の車を見つけたい場合はどうすればよいでしょうか?車が3台ではなく 300台だったらどうでしょうか。
解決策は配列です！
配列は1つの名前で多くの値を保持でき、インデックス番号を参照して値にアクセスできます。
配列の作成
JavaScript配列を作成する最も簡単な方法は、配列リテラルを使用することです。
構文：
const array_name = [item1, item2, ...];
constを使用して配列を宣言するのが一般的な方法です。
配列の
constについては
JS 配列定数 を参照して下さい。
例
const cars = ["Saab", "Volvo", "BMW"];
自分で試してみる »
スペースと改行は重要ではありません。宣言は複数の行にまたがることができます。
例
const cars = [
"Saab",
"Volvo",
"BMW"
];
自分で試してみる »
配列を作成して、要素を提供することもできます。
例
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
自分で試してみる »
JavaScript newの使用
次の例でも配列を作成し、それに値を割り当てます。
例
const cars = new Array("Saab", "Volvo", "BMW");
自分で試してみる »
上記の2つの例は、まったく同じことを行います。new Array()使用する必要はありません。
配列要素へのアクセス
インデックス番号 を参照して配列要素にアクセスします。
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
自分で試してみる »
注意： 配列のインデックスは0から始まります。
[0]は最初の要素です。[1]は2番目の要素です。
配列要素の変更
このステートメントは、最初の要素の値を変更します。
例
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
自分で試してみる »
配列を文字列に変換する
JavaScriptのメソッド
toString()は、配列を(カンマ区切りの)配列値の文字列に変換します。
例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
完全な配列へのアクセス
JavaScriptでは、配列名を参照することで完全な配列にアクセスできます。
例
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
自分で試してみる »
配列はオブジェクトです
配列は特別なタイプのオブジェクトです。JavaScriptのtypeof演算子は、配列の「オブジェクト」を返します。
ただし、JavaScript配列は配列として説明するのが最も適切です。
配列は数値 を使用して、その「要素」にアクセスします。この例では、person[0]のジョンを返します。
配列：
const person = ["John", "Doe", 46];
自分で試してみる »
オブジェクトは名前 を使用してその「メンバー」にアクセスします。この例では、person.firstNameJohnを返します。
オブジェクト:
const person = {firstName:"John", lastName:"Doe", age:46};
自分で試してみる »
配列要素はオブジェクトにすることができます
JavaScript変数はオブジェクトにすることができます。配列は特別な種類のオブジェクトです。
このため、同じ配列に異なる型の変数を含めることができます。
配列の中にオブジェクトを持つことが出来ます。配列の中に関数を持つことが出来ます。配列の中に配列を持つことが出来ます。
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
配列のプロパティとメソッド
JavaScript配列の真の強みは、組み込みの配列プロパティとメソッドです。
cars.length // 要素の数を返します。
cars.sort() // 配列をソートします。
配列メソッドについては、次の章で説明します。
length プロパティ
lengthプロパティは、配列の長さ(配列要素の数)を返します。
例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;
自分で試してみる »
lengthプロパティは、常に最大の配列インデックスよりも1つ大きくなります。
最初の配列要素へのアクセス
例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];
自分で試してみる »
最後の配列要素へのアクセス
例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];
自分で試してみる »
配列要素のループ
配列をループする1つの方法は、forループを使用することができます。
例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
自分で試してみる »
また、Array.forEach()関数も使用できます。
例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
text += "<li>" + value + "</li>";
}
自分で試してみる »
配列要素の追加
新しい要素を配列に追加する最も簡単な方法は、push()メソッドを使用します。
例
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // fruitsに新しい要素（レモン）を追加する
自分で試してみる »
lengthプロパティを使用して新しい要素を配列に追加することもできます。
例
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // fruitsに「レモン」を加える
自分で試してみる »
警告！
高いインデックスを持つ要素を追加すると、配列に未定義の「穴」が作成される可能性があります。
例
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon"; // fruitsに不定形の「穴」を作る
自分で試してみる »
連想配列
多くのプログラミング言語は、名前付きインデックスを持つ配列をサポートしています。
名前付きインデックスを持つ配列は、連想配列(またはハッシュ)と呼ばれます。
JavaScriptは名前付きインデックスを持つ配列をサポートしません。
JavaScriptでは、配列 は常に番号付きインデックス を使用します。
例
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // 3が返ってくる
person[0]; // "John"が返ってくる
自分で試してみる »
警告！！ 誤った結果 を生成されます。
例：
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // 0が返ってくる
person[0]; // undefinedが返ってくる
自分で試してみる »
配列とオブジェクトの違い
JavaScriptでは、配列は番号付きインデックス を使用します。
JavaScriptでは、オブジェクトは名前付きインデックス を使用します。
配列は、番号付きのインデックスを持つ特別な種類のオブジェクトです。
配列を使用する時、オブジェクトを使用する時。
・JavaScriptは連想配列をサポートしていません。文字列 (テキスト) にする場合は、オブジェクト を使用する必要があります。数字 にする場合は、配列 を使用する必要があります。
JavaScript new Array()
JavaScriptには組み込みの配列コンストラクターnew Array()があります。
その代わり、[]でも安心して使えます。
次の 2 つの異なるステートメントは、pointsという名前の新しい空の配列を作成します。
const points = new Array();
const points = [];
次の2つの異なるステートメントは両方とも、6つの数値を含む新しい配列を作成します。
const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
自分で試してみる »
newで予期しない結果が生じる場合があります。
// 3つの要素を持つ配列を作成する
const points = new Array(40, 100, 1);
自分で試してみる »
// 2つの要素を持つ配列を作成する
const points = new Array(40, 100);
自分で試してみる »
// 要素を1つ持つ配列を作成する
const points = new Array(40);
自分で試してみる »
よくある間違い
const points = [40];
この２つのコードは同じではありません。
const points = new Array(40);
// 40個の未定義要素を持つ配列を作成する
const points = new Array(40);
自分で試してみる »
配列を認識する方法
よくある質問: 変数が配列かどうかはどうすればわかりますか?
問題は、JavaScript演算子が"typeof""object"を返すことです。
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
自分で試してみる »
JavaScript配列はオブジェクトであるため、typeof演算子はobjectを返します。
解決策 1:
この問題を解決するために、ECMAScript 5(JavaScript 2009)は新しいメソッドArray.isArray()を定義しました。
解決策 2:
instanceofオブジェクトが特定のコンストラクターによって作成された場合、演算子はtrueを返します。
const fruits = ["Banana", "Orange", "Apple"];
fruits instanceof Array;
自分で試してみる »
完全な配列リファレンス
配列の完全なリファレンスについては、次のURLにアクセスしてください。
完全なJavaScript配列リファレンス
このリファレンスには、配列のすべてのプロパティとメソッドの説明と例が含まれています。
