JavaScriptの配列(Array)の詳しい解説_基礎知識

ECMAScript 配列は、他の言語の配列とはまったく異なります。 ECMAScript の配列も順序付きリストですが、配列内の各項目は任意のタイプのデータを保持できます。 ECMAScript 配列のサイズは動的に調整できます。
配列を作成するには 2 つの基本的な方法があります。 1 つ目は、以下に示すように、Array コンストラクターを使用する方法です。

コードをコピー コードは次のとおりです:

var Colors = new Array();

配列に保存する項目の数がわかっている場合は、次のようにパラメーターをコンストラクターに渡すこともできます。そのパラメーターは自動的に length 属性の値になります。

コードをコピー コードは次のとおりです:

var color = 新しい配列(20);

次のコードに示すように、配列に含める必要がある項目を Array コンストラクターに渡すこともできます。

コードをコピー コードは次のとおりです:

var Colors = new Array("red","blue");

さらに、以下に示すように、Array コンストラクターを使用するときに new 演算子を省略することもできます。

コードをコピー コードは次のとおりです: var color = Array(20);

配列を作成する 2 番目の方法は、配列リテラル表記を使用することです。配列リテラルは、次のように、カンマで区切られた配列項目を含む角かっこのペアで表されます。

コードをコピー

コードは次のとおりです: var color = ["赤","青"]; var names = [];

var 値 = [1,2,]//IE8 とその前の 3 項目、他の 2 項目の使用は推奨されません

オブジェクトと同様、数値リテラル表現を使用する場合、Array のコンストラクターは呼び出されません。
配列の値の読み取りと設定を行う場合は、次のように角かっこを使用し、対応する値の 0 から始まる数値インデックスを指定します。

コードをコピー

コードは次のとおりです: var Colors = ["red","blue"] //配列を定義します。 アラート(色[0]); //赤 color[1] = "black" //項目 2 を変更

color[2] = "brown" //3 番目の

を追加

配列内の項目の数はその length プロパティに格納され、以下に示すように常に 0 以上の数値が返されます。

コードをコピー

コードは次のとおりです: var Colors = ["red","blue"] //配列を定義します。 var names=[]; アラート(colors.length); //3 alert(names.length) //0

配列の長さの値は読み取り専用ではないことに注意してください。したがって、この値を設定すると、次のように配列の末尾から項目を移動したり、配列に項目を追加したりできます。



コードをコピー

コードは次のとおりです:

var Colors = ["赤","青"]; 色.長さ = 1; alert(colors[1]); //未定義

length 属性を使用して、配列の末尾にデータを簡単に追加することもできます:

コードをコピー

コードは次のとおりです:

var Colors = ["赤","青"]; color[colors.length] = "black" //位置 2 に を追加します。 color[colors.length] = "brown" //位置 3 に を追加します。

1. 検出アレイ

Web ページまたはグローバル スコープの場合、instanceof 演算子を使用できます:

コードをコピー コードは次のとおりです:

if(配列の値インスタンス){
// 操作を実行します
}

instanceof 演算子の制限はグローバル スコープです。Web ページに複数のフレームが含まれる場合、3 つ以上のグローバル実行環境が存在します。この問題を解決するために、ECMAScript5 は Array.isArray() メソッドを追加しました。このメソッドは次のように使用されます:

コードをコピー コードは次のとおりです:

if(Array.isArray(value)){
// 操作を実行します
}

2.変換方法
配列の toString() メソッドを呼び出すと、配列内の各値の文字列形式を連結したカンマ区切りの文字列が返されます。 valueOf() を呼び出しても配列が返されます。以下に示すように:

コードをコピー コードは次のとおりです:

var Colors = ['red', 'blue', 'green'];
alert(colors.toString()) //赤、青、緑
アラート(colors.valueOf()) //赤、青、緑
アラート(色) //赤、青、緑

配列によって継承される toLocalString()、tiString()、および valueOf() メソッドはすべて、デフォルトで配列項目をコンマ区切りの文字列の形式で返します。 join() メソッドを使用すると、さまざまな区切り文字を使用してこの文字列を構築できます。 join() メソッドは、次に示すように、区切り文字として使用される文字列であるパラメーターを 1 つだけ受け入れます:

コードをコピー コードは次のとおりです:

var Colors = ['red', 'blue', 'green'];
alert(colors.join(',')); //赤、青、緑
alert(colors.join('|')); //赤|青|緑

配列内の項目の値が null または未定義の場合、その値は、j​​oin()、toLocalString()、tiString()、および valueOf() メソッドの戻り結果で空の文字列で表されます。

3. スタックメソッド

JavaScript は、スタックのような動作を実現するために、配列に特化した Push() および Pop() オペレーションを提供します。

push() メソッドは、任意の数のパラメータを受け取り、それらを配列の末尾に 1 つずつ追加し、変更された配列の長さを返すことができます。 Pop() メソッドは、配列の末尾から最後の項目をオーバーフローし、配列の長さを減分して、削除された項目を返します。

コードをコピーします コードは次のとおりです:

var Colors = new Array() //配列を定義します
var count = Colors.push("red", "blue") // 2 つのアイテムをプッシュします
アラート(カウント); //2
count = Colors.push("black") //別のアイテムをプッシュします
アラート(カウント); //3
var item = color.pop() //最後のアイテムをポップします
アラート(アイテム); //「黒」
アラート(colors.length); //2

4. キューメソッド

スタック データ構造のアクセス ルールは LIFO (後入れ先出し) ですが、キューのアクセス ルールは FIFO (先入れ先出し) です。キューはリストの最後に項目を追加し、先頭の項目を削除します。

shift() メソッドは、配列の最初の項目を削除し、配列の長さ 1 の項目を返します。以下に示すように、push() メソッドと SHIFT() メソッドを組み合わせると、配列をキューのように使用できます。

コードをコピー コードは次のとおりです:

var Colors = new Array();
var count = Colors.push("赤", "青");
count = Colors.push("black");
アラート(カウント);
var item = color.shift() //最初のアイテムを取得します
アラート(アイテム); //「赤」
アラート(color.length); //2

ECMAScript は、配列の unshift() メソッドも提供します。 unshift() メソッドと SHIFT() メソッドはその逆を行い、配列の先頭に任意の数の項目を追加し、新しい配列の長さを返します。したがって、次のように、unshift() メソッドと SHIFT() メソッドを一緒に使用すると、配列の先頭に新しい項目を追加し、配列の末尾から項目を削除するという、逆方向のキューをシミュレートできます。

コードをコピー コードは次のとおりです:

var Colors = new Array();
var count = Colors.push("red", "green");
アラート(カウント); //2
count = Colors.unshift("black") //別のアイテムをプッシュします
アラート(カウント); //3
var item = color.pop() //最後のアイテムを取得します
alert(item) //green
alert(colors.length) //2

5. 並べ替え方法
配列には、並べ替えに直接使用できるメソッド reverse() と sort() がすでに 2 つあります。 reverse() メソッドは配列項目の順序を逆にします。

コードをコピー コードは次のとおりです:

var 値 = [2, 1, 3, 4, 5];
値.reverse();
アラート(値); //5,4,3,2,1

デフォルトでは、sort() メソッドは配列項目を昇順に並べ、各項目の toString() メソッドを呼び出し、文字列を比較して並べ替え方法を決定します。配列内の各項目が数値であっても、sort() メソッドは文字列を比較します。

コードをコピー コードは次のとおりです:

var 値 = [12, 11, 3, 4, 5];
値.sort();
アラート(値) //12,11,3,4,5

比較関数をパラメータとして sort() メソッドに渡すことができます。以下のように:

コードをコピー コードは次のとおりです:

関数 Compare(value1, value2) {
If (値 1 -1 を返す } else if (値 1 > 値 2) {
1 を返す } else {
0 を返す }
}
var 値 = [0, 1, 5, 10, 15];
値.sort(比較);
アラート(値); //0,1,5,10,15




6. 操作方法

ECMAScript には、配列を操作するためのメソッドが多数用意されています。その中で、 concat() メソッドは、現在の配列内のすべての項目に基づいて新しい配列を作成できます。

コードをコピー

コードは次のとおりです: var Colors = ["赤"、"緑"、"青"]; var Colors2 = Colors.concat("黄色", ["黒", "茶色"]);

アラート(色) //赤、緑、青

アラート(colors2); //赤、緑、青、黄、黒、茶色


lice() メソッドは、現在の配列の 1 つまたは複数の項目に基づいて新しい配列を作成でき、返される項目の開始位置と終了位置である 1 つまたは 2 つのパラメーターを受け取ることができます。引数が 1 つ指定された場合は、引数で指定された位置から現在の配列の末尾までのすべての項目を返します。 2 つのパラメーターは、指定された位置から始まるすべての項目 (終了位置の項目を除く) を返します。 Slip() メソッドは元の配列に影響を与えないことに注意してください。

コードをコピー

コードは次のとおりです: var color=["赤","緑","青","黒","茶色"]; var color2=colors.slice(1);

var color3=colors.slice(1,4);

アラート(colors2); //緑、青、黒、茶色
アラート(colors3) //緑、青、黒


Slice() メソッドの削除: 2 つのパラメーター (削除する最初の項目の位置と削除する項目の数) を指定するだけで、任意の数の項目を削除できます。
Slice() メソッドの挿入: 開始位置、0 (削除する項目の数)、挿入する項目の 3 つのパラメーターのみを指定することで、指定した位置に任意の数の項目を挿入できます。
Slipe() メソッドの置き換え: 指定した位置に任意の数の項目を挿入し、同時に任意の数の項目を削除できます。指定する必要があるのは、開始位置、削除する項目の数、および任意の数の 3 つのパラメーターだけです。挿入する項目の数。

コードをコピー コードは次のとおりです:

var Colors = ["赤"、"緑"、"青"];
//
を削除 var selected = Colors.slice(0, 1) //項目 1 を削除します
; var color3 = color.slice(1, 4);
アラート(色) //緑、青
アラート(削除されました); //赤
//
を挿入 Remove = Colors.slice(1, 0, " yellow", "orange"); // 位置 1 から
を挿入します アラート(色) //緑、黄、オレンジ、青
アラート(削除); //空の配列
//
を置き換えます Remove = Colors.slice(1, 1,"red","purple"); //位置 1 から
を挿入します アラート(色); //緑、「赤」、「紫」、オレンジ、青
アラート(削除されました); //"黄色"

7. 位置決め方法
ECMAScript5 は、配列に対して 2 つの位置メソッド、indexOf() と lastIndexOf() を提供します。どちらのメソッドも、検索する項目と、検索を開始する場所を示すオプションのインデックスという 2 つのパラメーターを受け取ります。 IndexOf() メソッドは配列の先頭から順に検索し、lastIndexOf() メソッドは配列の末尾から前方に検索します。
どちらのメソッドも、配列内で見つかる項目の位置を返し、見つからない場合は -1 を返します。

コードをコピー コードは次のとおりです:

変数番号 = [1, 2, 3, 4, 5, 4, 3, 2, 1];
alert(numbers.indexOf(4)) //3
alert(numbers.lastIndexOf(4)) //5
alert(numbers.indexOf(4, 4)) //5
alert(numbers.lastIndexOf(4, 4)) //3

8.反復方法

ECMAScript5 は、配列の 5 つの反復メソッドを定義します。各メソッドは 2 つのパラメータを受け入れます。1 つ目は反復される関数で、2 つ目は関数のスコープ オブジェクト (オプション) です。

反復関数は 3 つのパラメーターを受け入れます。1 つ目は反復する配列内の要素の値、2 つ目は反復する配列内の要素の位置、3 つ目は反復する配列自体です。

1.every() は、配列内の各項目に対して指定された関数を実行します。関数が各項目に対して true を返す場合、true を返します。
2. filter() は、配列内の各項目に対して指定された関数を実行し、関数が true を返す項目の配列を返します。
3. forEach() は配列内の各項目に対して指定された関数を実行します。このメソッドには戻り値がありません。 4. map() は配列内の各項目に対して指定された関数を実行し、各関数呼び出しの結果を返します。 > 5. some() は、配列内の各項目に対して指定された関数を実行します。関数がいずれかの項目に対して true を返す場合、true
を返します。 これらの反復方法でサポートされているブラウザは、IE9、Firefox2、Safari3、Opera 9.5、chrome
です。 これらのメソッドの中で最も類似したメソッドは、every() と some() で、どちらも配列内の項目が特定の条件を満たすかどうかをクエリするために使用されます。 Every() の場合、このメソッドが true を返す前に、渡された関数が各項目に対して true を返す必要があります。それ以外の場合は false を返します。 some() メソッドは、渡された関数が配列内の特定の項目に対して true を返す限り、true を返します。

コードをコピーします コードは次のとおりです:

var num = [1,2,3,4,5,6,7,8,9];
vareveryResult = num.every(function(item,index,array){
If(アイテム > 2) {
true を返します;
}
});
アラート(すべての結果); //false
var someResult = num.some(function(item) {
If(アイテム > 2) {
true を返します;
}
});
アラート(someResult); //true

Filter() は、指定された関数を使用して、返された配列に特定の項目が含まれているかどうかを判断します。

コードをコピーします コードは次のとおりです:

var num = [1,2,3,4,5,4,3,2,1];
var filterResult = num.filter(function(item) {
If(アイテム > 2) {
true を返します;
}
});
アラート(フィルター結果); //[3,4,5,4,3]

map() も配列を返します。この配列内の各項目は、元の配列内の対応する項目に対して渡された関数を実行した結果です。

コードをコピー コードは次のとおりです:

var num = [1,2,3,4,5,4,3,2,1];
var mapResult = num.map(function(item) {
If(アイテム > 2) {
true を返します;
}
}); //[2,3,6,8,10,8,6,4,2]

forEach() は、配列内の各項目に対して渡された関数を実行します。このメソッドには戻り値がなく、基本的に for ループを使用して配列を反復処理するのと同じです。

コードをコピー コードは次のとおりです:

var num = [1,2,3,4,5,4,3,2,1];
num.forEach(関数(項目) {
// 操作を実行します
});

9. 結合方法

2 つの新しいメソッド、reduceRight() とreduce() が ECMAScript5 に追加されました。どちらのメソッドも 2 つのパラメーターを受け入れます。1 つ目は配列を反復するために使用される関数です。この関数には、前の値、現在の値、項目のインデックス、および配列オブジェクトの 4 つのパラメーターがあります。ただし、この関数の値はすべて、最初のパラメータとして次の項目に自動的に渡されます。 2 番目の値は、最初の関数の最初のパラメーターの初期値として使用されます。

コードをコピー コードは次のとおりです:

var nums = [1,2,3,4,5];
var sum = nums.reduce(function(prev, cur,index, array) {
前のカーソルを返します;
});
アラート(合計);//15