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 ArrayConst」の章を参照してください。
例
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。
cars[0] = "Opel";
例
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
フルアレイにアクセスする
JavaScriptを使用すると、配列名を参照して完全な配列にアクセスできます。
例
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
配列はオブジェクトです
配列は特殊なタイプのオブジェクトです。JavaScriptのtypeof演算子は、配列の「オブジェクト」を返します。
ただし、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 // Returns the number of elements
cars.sort() // Sorts the array
配列メソッドについては、次の章で説明します。
長さプロパティ
配列の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"); // Adds a new element (Lemon) to fruits
length次のプロパティを使用して、新しい要素を配列に追加することもできます。
例
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Adds "Lemon" to fruits
警告 ！
インデックスの高い要素を追加すると、配列に未定義の「穴」が作成される可能性があります。
例
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon"; // Creates undefined "holes" in fruits
連想配列
多くのプログラミング言語は、名前付きインデックスを持つ配列をサポートしています。
名前付きインデックスを持つ配列は、連想配列（またはハッシュ）と呼ばれます。
JavaScriptは、名前付きインデックスを持つ配列をサポートしていません。
JavaScriptでは、配列は常に番号付きインデックスを使用します。
例
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // Will return 3
person[0]; // Will return "John"
警告 ！！
名前付きインデックスを使用する場合、JavaScriptは配列をオブジェクトに再定義します。
その後、一部の配列メソッドとプロパティは誤った結果を生成します。
例：
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // Will return 0
person[0]; // Will return 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予期しない結果をもたらす可能性があります。
// Create an array with three elements:
const points = new Array(40, 100, 1);
// Create an array with two elements:
const points = new Array(40, 100);
// Create an array with one element ???
const points = new Array(40);
一般的なエラー
const points = [40];
と同じではありません：
const points = new Array(40);
// Create an array with one element:
const points = [40];
// Create an array with 40 undefined elements:
const points = new Array(40);
配列を認識する方法
よくある質問は次のとおりです。変数が配列であるかどうかを確認するにはどうすればよいですか。
The problem is that the JavaScript operator typeof returns
"object":
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
The typeof operator returns object because a JavaScript array is an object.
Solution 1:
To solve this problem ECMAScript 5 (JavaScript 2009) defined a new method Array.isArray():
Array.isArray(fruits);
Solution 2:
The instanceof operator returns true if an object is created
by a given constructor:
const fruits = ["Banana", "Orange", "Apple"];
fruits instanceof Array;
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.