JavaScript 配列

配列は複数の値を保持できる特別な変数です：

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

なぜ配列を使用するのか？

アイテムのリスト（例えば、車の名前のリスト）がある場合、単一の変数で車を保持すると以下のようになります：

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

しかし、車をループして特定のものを見つけたり、3台ではなく300台の車がある場合はどうでしょうか？

その解決策が配列です！

配列は1つの名前で多くの値を保持でき、インデックス番号を使って値にアクセスできます。

配列の作成

配列リテラルを使用するのが最も簡単な方法です：

const array_name = [item1, item2, ...];      

通常、const キーワードで配列を宣言するのが一般的です。

例

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

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

例

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

また、配列を作成してから要素を追加することもできます：

例

const cars = [];
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";

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

以下の例は、Array も作成し、それに値を割り当てます：

例

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

上記の2つの例はまったく同じことを行います。

new Array() を使用する必要はありません。

シンプルで可読性があり、実行速度が速いので、配列リテラルの方法を使用するのが良いでしょう。

配列要素へのアクセス

インデックス番号を指定して配列要素にアクセスします：

const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];

配列要素の変更

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

cars[0] = "Opel";

例

const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";

配列を文字列に変換する

JavaScript のメソッド toString() は配列を文字列に変換します（カンマで区切られた配列の値）。

例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

結果：

Banana,Orange,Apple,Mango

全体の配列にアクセスする

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

例

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

配列はオブジェクトです

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

しかし、JavaScript の配列は配列として最良に説明されます。

この例では、person[0] は John を返します：

配列：

const person = ["John", "Doe", 46];

オブジェクトは名前を使用してその “メンバー” にアクセスします。この例では、person.firstName は John を返します：

オブジェクト：

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 = "
";
for (let i = 0; i < fLen; i++) {
  text += "
" + fruits[i] + "
";
}
text += "
";

また、Array.forEach() 関数を使用することもできます：

例

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

let text = "
";
fruits.forEach(myFunction);
text += "
";

function myFunction(value) {
  text += "
" + value + "
";
}

配列要素の追加

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

例

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

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

例

const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon";  // "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" を返します

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

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);
// 要素が1つの「配列」を作成します：
const points = [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() が定義されました：

Array.isArray(fruits);

解決策 2:

instanceof 演算子は、指定されたコンストラクタで作成されたオブジェクトであれば true を返します：

const fruits = ["Banana", "Orange", "Apple"];

(fruits instanceof Array);

ネストされた配列とオブジェクト

オブジェクト内の値は配列であり、配列内の値はオブジェクトであることがあります：

例

const myObj = {
  name: "John",
  age: 30,
  cars: [
    {name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
    {name:"BMW", models:["320", "X3", "X5"]},
    {name:"Fiat", models:["500", "Panda"]}
  ]
}

配列内の配列にアクセスするには、各配列に対して for-in ループを使用します：

例

for (let i in myObj.cars) {
  x += "
" + myObj.cars[i].name + "
";
  for (let j in myObj.cars[i].models) {
    x += myObj.cars[i].models[j];
  }
}