JavaScript 配列

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

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番目の要素です。

配列要素の変更

このステートメントは、最初の要素の値を変更します。

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演算子は、配列の「オブジェクト」を返します。

ただし、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"が返ってくる

警告！！
名前付きインデックスを使用する場合、JavaScriptは配列をオブジェクトに再定義します。

その後、いくつかの配列メソッドとプロパティが誤った結果を生成されます。

例：

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);

// 要素を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;

完全な配列リファレンス

配列の完全なリファレンスについては、次のURLにアクセスしてください。
完全なJavaScript配列リファレンス
このリファレンスには、配列のすべてのプロパティとメソッドの説明と例が含まれています。

人気オンラインプログラミングスクールランキング

プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細