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

JavaScriptの配列は、単一の変数に複数の値を保存するためのグローバルオブジェクトです。

配列は、文字列、数字、オブジェクト、関数、他の配列を含むどんなデータ型も含むことができます。

JavaScriptコードで都市名を保存する場合を想像してみてください。都市名をそれぞれの変数に保存するのはこんな感じです：

　　let　city1　=　"New　Delhi";
　　let　city2　=　"Mumbai";
　　let　city3　=　"Jaipur";

しかし、国の都市名を変数に保存する必要がある場合、これが発生するのはたった3つだけでなく、100個以上かもしれません。

これほど多くの変数を使用し、すべての変数を追跡することは非常に困難なタスクです。

配列は、複数の値や値のセットを1つの変数にまとめて、順序付きの構造として解決します。

配列を作成します

JavaScriptで配列を作成する方法は2種類あります：

• リテラル-暗黙的に作成を使用し、中括弧[]を使用します。

• 簡潔な方法-直接シリアライズnewキーワードを使用して

初期化された配列を使用して、配列定数fruitsを作成します配列[]：

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

宣言は複数行にわたることができます：

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

これは配列コンストラクタnew Array()で初期化された同じデータが作成されます：

let fruits = new Array("Apple", "Mango", "Banana", "Orange");

これらの方法はどちらも配列を作成します。しかし、リテラル-暗黙的に作成（中括弧[]）メソッドがより一般的で推奨されています。なぜならnew Array()コンストラクタメソッドは、一致しないまたは予期せぬ結果が発生する可能性があります。

配列インデックス

配列には名前がありません/値に対して、0から始まる整数のインデックスを使用して配列に対してインデックスを割り当てます。

これはfruitsに割り当てる例の配列です：

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

これはfruits配列の各要素のインデックスの分解方法です：

配列の最初の要素は「Apple」で、インデックス値は0です。

最後の要素は「Orange」で、インデックス値は3。

配列の要素にアクセスします

カッコ内の要素のインデックスを参照することで、JavaScriptの配列の要素にアクセスできます。

let　fruits　=　["Apple",　"Mango",　"Banana",　"Orange"];
fruits[0];//　undefinedを返します
fruits[2];//　undefinedを返します

JavaScriptの配列のインデックスは0です：配列の最初の要素のインデックスは0、次の要素のインデックスは1と続きまして。

配列に存在しない要素にアクセスしようとすると、undefinedが返されます。

fruits[7];//　undefinedを返します

配列名を参照して、全体の配列にアクセスできます。

let　fruits　=　["Apple",　"Mango",　"Banana",　"Orange"];
document.getElementById("result").innerHTML = fruits;

配列 length 属性

この属性を使用してlength属性を使用して、配列に要素がいくつあるかを確認できます。

let　fruits　=　["Apple",　"Mango",　"Banana",　"Orange"];
fruits.length;　　　//　を返します　4

最後の要素のインデックスは、配列のlength属性値から1。

この例では、length属性を使用して最後の要素の値を表示しています：

let　fruits　=　["Apple",　"Mango",　"Banana",　"Orange"];
let lastIndex = fruits.length　-　1;
fruits[lastIndex];

配列に要素を追加する

fruits変数には、0から3のインデックス。新しい要素を配列に追加する場合は、次のインデックスに値を割り当てることができます。

let　fruits　=　["Apple",　"Mango",　"Banana",　"Orange"];
fruits[4]　=　"Guava";

　 　 要素を追加する際に意図せずインデックスをスキップすると、空文字('')の値を持つ要素が配列に作成されます。

fruits[6]　=　"Strawberry";

以下を使用してpush()メソッドは、配列の末尾に要素を追加するための方法で、このメソッドは問題を避けることができます。

let　fruits　=　["Apple",　"Mango",　"Banana",　"Orange"];
fruits.push("Strawberry");

以下を使用することもできますlength属性を使用して、新しい要素を配列に追加することができます。

let　fruits　=　["Apple",　"Mango",　"Banana",　"Orange"];
fruits[fruits.length]　=　"Beer";

配列内の要素を変更する

新しい値を割り当てるために割り当て演算子を使用することで、配列内のどんな値も上書きすることができます。

let　fruits　=　["Apple",　"Mango",　"Banana",　"Orange"];
fruits[0]　=　"Monkey";

配列は、似たデータタイプのリストを組み合わせるために通常使用されますが、技術的には、どんな値や値の組み合わせを含むこともできます。

let　myArray　=　[5,　22,　"Arrow",　"Bone",　true,　new　Date()];

遍历する

配列を遍历するために利用することができますforおよびlength属性を使用して、配列全体を遍历することができます。

この例では、 fruit 配列を作成し、各インデックスおよび各値をドキュメントに印刷します：

let　fruits　=　["Apple",　"Mango",　"Banana",　"Orange"];
let　txt　=　"";
//配列の長さを遍历する
for　(let　i　=　0;　i　<　fruits.length;　i++)　{
txt　+＝　i　+　"　＝　"　+　fruits[i]　+　"<br>";
}

以下を使用することもできますArray.forEach()方法：

let　fruits　=　["Apple",　"Mango",　"Banana",　"Orange"];
let　result　=　document.getElementById("result");
fruits.forEach(function(element)　{
result.innerHTML　+＝　element　+　"<br>";
});

以下を使用することもできますfor...of配列を遍历するループ、これはJavaScriptの新しい機能です：

let　fruits　=　["Apple",　"Mango",　"Banana",　"Orange"];
let　result　=　document.getElementById("result");
for　(let　x　of　fruits)　{
result.innerHTML　+＝　x;
}

for...ofループは配列内の要素のインデックスを検索しませんが、通常、配列を遍历するより簡単で簡潔な方法です。

多次元配列

多次元配列は、1つ以上の配列を含む配列です。

　　let　points　=　[
　　　[35,　28,　29,　31],
　　　[33,　24,　25,　29]
　　];

JavaScriptは深さが2、3、4、5またはもっと高いレベルの多次元配列です。しかし、多くの人にとって、3以上のレベルの配列を管理することは難しいです。

配列の次元は、要素を選択するために必要なインデックスの数を示します。

• 2次元配列の場合、2つのインデックスが必要です。

• 3次元配列の場合、3つのインデックスが必要です。

2次元配列は、最初の[ ]が行、2番目の[ ]が列であるテーブルとして見ることができます。

points[0][1];　　　//　を返します　28
points[1][0];　　　//　を返します　33

この例では、2次元配列を作成し、各インデックスおよび各値をドキュメントに印刷します：

let　points　=　[　[35,　28,　29,　31],　[33,　24,　25,　29]　];
let　row;
let　col;
for　(col　=　0;　col　<　2for　(row　=　0;　row　<++)　{
　　　;　row　4;　col++)　{
　　document.write(row,　col,　points[row][col]);
　　　}
}

もちろん、length行と列のサイズを取得する属性：

let　points　=　[
　　　[10,　12,　14,　16,　18],
　　　[20,　22,　24,　26],
　　　[30,　32,　34],
　　　[32,　34]
];
points.length;//　を返します　4　(合計行数)
points[0].length;//　を返します　5
points[1].length;//　を返します　4
points[2].length;//　を返します　3
points[3].length;//　を返します　2

ほとんどの場合、2次元の配列が十分で、一部の場合一貫して使用できますが、3次元の配列です。

JavaScriptの配列はオブジェクトです

JavaScriptでは、配列は特別なオブジェクトです。

typeofJavaScriptの演算子は配列に対して「Object」を返します。

let　fruits　=　["Apple",　"Mango",　"Banana",　"Orange"];
typeof　fruits;　　　//　「object」を返します

new Array()の使用を避けることを推奨します。

new Array()配列構造関数を使用する必要はありません。

代わりに、配列を隠し的に作成する方法をよく使用するべきです。つまり、直接方括号[]を使用する方法です。これはより一般的で人気があります。

以下の2つの異なる文でscoresという名前の新しい空の配列を作成する

　　let　scores　=　new　Array();　　//　この方法は推奨されません
　　let　scores　=　[];　　　　　//　推奨方法

以下の2つの異なる文で次の要素を含む配列を作成する5個の数字を持つ新しい配列：

let　scores　=　new　Array(2,　5,　10,　28,　10);　//　この方法は推奨されません
let　scores　=　[2,　5,　10,　28,　10];　　//　推奨方法

new Array()構造方法は一貫していない可能性があり、予期せぬ結果を生じることがあります：

let　scores　=　new　Array(10,　25);　　//　次の要素を含む2つの要素を持つ配列を作成する10および25)を含む配列
let　scores　=　new　Array(10);　　//　次の要素を含む配列を作成する10未定義の要素値を持つ配列

変数が配列かどうかを判断する方法 - Array.isArray()

ご存知の通り、JavaScriptのtypeof演算子は配列に対して「Object」を返します。

一般的な問題は：変数が配列かどうかを知る方法は？

この問題を解決するために、ECMAScript 5新しいメソッドを定義しましたArray.isArray()：

let　fruits　=　["Apple",　"Mango",　"Banana",　"Orange"];
Array.isArray(fruits);

オブジェクトが指定されたコンストラクタで作成された場合、instanceof演算子を使用してtrueを返すことができます：

let　fruits　=　["Apple",　"Mango",　"Banana",　"Orange"];
if　(fruits　instanceof　Array)　{
　　　//　実行するステートメント
}

配列を関数に渡す

以下の例では、配列を関数に渡します：

let　fruits　=　["Apple",　"Mango",　"Banana",　"Orange"];
myFunc(fruits);
function　myFunc(arg)　{
　　for　(let　elem　of　arg)　{
　　document.write(elem,　"<br>");
　　}
}

関数から配列を返す

以下の例では、関数から配列を返す方法を説明します：

function　myFunc()　{
　　let　fruits　=　["Apple",　"Mango",　"Banana",　"Orange"];
　　return　fruits;
}
let　myArray　=　myFunc();
document.write(myArray);