JS Array(配列)オブジェクト

配列は、順序付けられた値のコレクションです。配列内の各値は要素と呼ばれ、各要素にはインデックスと呼ばれる配列内の数値位置があります。インデックスは 0 から始まり、順番に増加します。 JavaScript では、Array オブジェクトを使用して配列を定義できます。さらに、Array オブジェクトは配列に関連するさまざまなプロパティとメソッドも提供します。

 

Array オブジェクトを作成するための構文は次のとおりです。

var arr = new Array(values);
var arr = Array(values);

このうち、valuesは配列内の各要素から構成されるリストであり、複数の要素はカンマで区切られます。

サンプルコードは次のとおりです。

 var fruits = new Array( "りんご", "オレンジ", "マンゴー" );
console.log(fruits);  // 出力："["りんご", "オレンジ", "マンゴー"]" 

ヒント: new Array() を使用して配列を定義する場合、値パラメータが 1 つだけ指定されている場合、この値は配列の初期長を表すために使用されます。たとえば、 new Array(5)次の配列を定義することを意味します。長さは5。 JavaScript では、配列に許可される最大長は 2³²-1、つまり 4294967295 です。

Array() 関数を使用して配列を定義するほかに、角かっこ[ ]を直接使用して配列を定義することもできます。ここで、 [ ]は配列内の各要素であり、複数の要素,にはカンマが使用されます。サンプルコードは次のとおりです。

 変数fruitsに["apple", "orange", "mango"]を設定します。
console.log(fruits); //出力：(3) ["apple", "orange", "mango"] 

配列のインデックスを介して配列内の各要素にアクセスできます。サンプル コードは次のとおりです。

 var fruits = [ "りんご", "オレンジ", "マンゴー" ];

document.write(fruits[0] + "<br>");     // 出力：りんご
document.write(fruits[1] + "<br>");     // 出力：オレンジ
document.write(fruits[2] + "<br>");     // 出力：マンゴー 

Array オブジェクトのプロパティ

Array オブジェクトで提供されるプロパティとその説明を次の表に示します。

属性	説明
constructor	配列オブジェクトを作成するプロトタイプ関数を返します。
length	配列内の要素の数を設定または返します
prototype	このプロパティを使用すると、オブジェクトにプロパティとメソッドを追加できます

サンプルコードは次のとおりです。

 変数carsは、新しい配列（"Saab"、 "Volvo"、 "BMW"）を作成します。 

Array.prototype.name = null;は、配列のプロトタイプオブジェクトに新しいプロパティ "name"を追加することを意味します。ここでは名前をnullに設定しています。 

cars.name = "JavaScript";は、配列の"name"プロパティに値 "JavaScript"を設定することを意味します。 

document.write（cars.constructor + "<br>"）;は、配列のコンストラクタ関数を出力します。 

document.write（cars.length + "<br>"）;は、配列の長さを出力します。 

document.write（cars.name + "<br>"）は、配列の"name"プロパティの値を出力します。 

Array オブジェクトのメソッド

Array オブジェクトで提供されるメソッドとその説明を次の表に示します。

方法	説明
concat()	2 つ以上の配列を連結して結果を返します
copyWithin()	要素を配列内の指定された位置から配列内の別の指定された位置にコピーします
entries	配列を返す反復可能なオブジェクト
every()	数値要素の各要素が条件を満たすかどうかをチェックします
fill()	配列に固定値を入力します
filter()	数値要素を検出し、条件を満たすすべての要素の配列を返します。
find()	渡された関数の条件を満たす配列の要素を返します。
findIndex()	関数で渡された条件を満たす配列要素のインデックスを返します。
forEach()	コールバック関数は配列の要素ごとに 1 回実行されます。
from()	指定されたオブジェクトから配列を作成します
includes()	配列に指定された値が含まれているかどうかを判断します
indexOf()	配列内の要素を検索し、その位置を返します
isArray()	オブジェクトが配列かどうかを判別する
join()	配列のすべての要素を文字列に入れる
keys()	元の配列のキー (キー) を含む、配列の反復可能なオブジェクトを返します
lastIndexOf()	配列内の要素を検索し、最後に出現した要素を返します
map()	指定された関数で配列の各要素を処理し、処理された配列を返します
pop()	配列の最後の要素を削除し、削除された要素を返します
push()	配列の末尾に 1 つ以上の要素を追加し、配列の長さを返します
reduce()	配列内のすべての要素を (左から右に) 累積し、結果を返します
reduceRight()	配列内のすべての要素を (右から左に) 累積し、結果を返します
reverse()	配列内の要素の順序を逆にする
shift()	配列の最初の要素を削除して返す
slide()	配列の一部を取り、この新しい配列を返します
some()	配列要素内のいずれかの要素が指定された条件を満たすかどうかを確認します
sort()	配列の要素を並べ替える
splice()	配列から要素を追加または削除する
toString()	配列を文字列に変換して結果を返す
unshift()	配列の先頭に 1 つ以上の要素を追加し、新しい配列の長さを返します
valueOf()	配列オブジェクトのプリミティブ値を返します

サンプルコードは次のとおりです。

 var fruits = ["オレンジ", "バナナ", "りんご", "パパイヤ", "マンゴー"];

document.write(fruits.entries() + "<br>"); // 返します：[object Array Iterator]
document.write(fruits.includes("りんご") + "<br>"); // 返します：true
document.write(fruits.fill("ぶどう") + "<br>"); // 返します：ぶどう,ぶどう,ぶどう,ぶどう,ぶどう

var fruits = ["オレンジ", "バナナ", "りんご", "パパイヤ", "マンゴー"];
document.write(fruits.indexOf("マンゴー") + "<br>"); // 返します：4
document.write(Array.isArray(fruits) + "<br>"); // 返します：true
document.write(fruits.join("-") + "<br>"); // 返します：オレンジ-バナナ-りんご-パパイヤ-マンゴー
document.write(fruits.lastIndexOf("バナナ") + "<br>"); // 返します：1
document.write(fruits.pop() + "<br>"); // 返します：マンゴー
document.write(fruits.push("スイカ") + "<br>"); // 返します：5
document.write(fruits.unshift("レモン", "パイナップル") + "<br>"); // 返します：7
document.write(fruits.slice(1, 5) + "<br>"); // 返します：パイナップル,オレンジ,バナナ,りんご
document.write(fruits.sort() + "<br>"); // 返します：りんご,バナナ,レモン,オレンジ,パパイヤ,パイナップル,スイカ
document.write(fruits.valueOf() + "<br>"); // 返します：りんご,バナナ,レモン,オレンジ,パパイヤ,パイナップル,スイカ