JavaScript配列の詳しい解説_javascriptスキル

プログラミング言語における配列の重要性は自明のことですが、JavaScript の配列は最も一般的に使用されるオブジェクトの 1 つであり、弱い型であるため、非常に柔軟で強力です。同じ型またはそのサブタイプの要素のみを格納できる Java などの厳密に型指定された高級言語の配列とは異なり、JavaScript は複数の型の要素を同じ配列に格納でき、長さを動的に調整することもできます。データが増加するにつれて、または配列の長さの自動変更を減らします。

配列の作成

JavaScript でさまざまな方法で配列を作成する

コンストラクター

1. パラメーターなしのコンストラクター、空の配列を作成します

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

var a1=new Array();

2. 配列の長さを指定し (配列の長さは動的に調整できるため、あまり役に立ちません)、指定された長さの配列を作成する数値パラメーター コンストラクター

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

var a2=new Array(5);

3. 初期化データを含むコンストラクター、配列を作成し、パラメーター データを初期化します

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

var a3=new Array(4,'hello',新しい日付( ));

文字通り

1. 角括弧を使用して空の配列を作成します。これはパラメーターなしのコンストラクター

を呼び出すのと同じです。

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

var a4=[];

2. 角括弧を使用して初期化データを渡します。これは、初期化データを使用してコンストラクターを呼び出すことと同じです

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

var a5=[10];

注意

1. コンストラクターを使用して配列を作成する場合、数値パラメーターが渡されると、そのパラメーターの長さの配列が作成されます。複数のパラメーターが渡されると、配列が作成されます。初期化データとして配列に追加されます

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

var a1=new Array(5);
console.log(a1.length);//5
console.log(a1) //[]、配列は空です;

var a2=new Array(5,6);
console.log(a2.length);//2
console.log(a2); //[5,6]

ただし、リテラル メソッドを使用すると、渡されたパラメータの数に関係なく、パラメータは初期化コンテンツとして扱われます

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

var a1=[5];
コンソール.log(a1.length);//1
console.log(a1); var a2=[5,6];

console.log(a2.length);//2
console.log(a2); //[5,6]

2. 初期化パラメータを使用して配列を作成する場合、末尾に余分な「,」を含めないことをお勧めします。ブラウザごとに処理が異なります。

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

var a1=[1,2,3 ,];
console.log(a1.length);
console.log(a1);

最新のブラウザでこのスクリプトを実行した結果は想像したものと同じで、長さは 3 ですが、IE の下位バージョンでは実際に長さ 4 の配列であり、最後のデータは未定義です。

配列のインデックスと長さ

配列の値は、自然数インデックス アクセスを通じて読み書きでき、添字は結果の変数または式にすることもできます。負ではない整数

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

var a1=[1,2,3 ,4] ;
console.log(a1[0]) //1
var i=1;
console.log(a1[i]); //2
console.log (a1[i]) //3

配列もオブジェクトです。インデックスを使用できる秘密は、配列がインデックス値をオブジェクトの属性名として対応する文字列 (1=>”1”) に変換することです。

console.log(1 in a1);//確かに、これは属性です。
インデックスの特徴は、配列が長さ属性を自動的に更新することです。これは、JavaScript 構文では数値を使用できないと規定されているためです。変数名として使用できるため、array.1 のような形式で明示的に使用することはできません。実際、負の数値や数値以外の「インデックス」も許可されることがわかりますが、これらはインデックスではなく配列の属性になります

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

var a=new Array(1,2) ,3) ;
a[-10]="a[-10]";
a["sss"]="sss";

このようにして、すべてのインデックスが属性名であることがわかりますが、一般に、配列を使用する場合、配列範囲外エラーは発生しません。これは配列のインデックスが連続していない可能性があります。インデックスが存在しない要素にアクセスした場合は、unknown

が返されます。

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

var a=new Array(1,2) ,3) ;
a[100]=100;
console.log(a.length) //101
console.log(a[3]); // 未定義
コンソール。 log(a [99]); //未定義
console.log(a[100]); 100

上記の例では、a[100] に値を直接代入しても a[4] や a[99] には影響しませんが、配列の長さ属性は影響を受けます。配列内の最大のインデックス 1 は、配列の長さ属性値が最大インデックス値以下に強制的に設定されると、配列によって自動的に削除されます。インデックスが長さ以上のデータ。今コードにいくつかの文

を追加します。

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

a.length=2
console .log( a);//[1,2]

このとき、a[2] と a[100] が自動的に削除されることがわかります。同様に、length が最大インデックス 1 より大きい値に設定されている場合、配列は自動的に拡張されますが、追加は行われません。新しい要素は最後に空のスペースを追加するだけです

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

a.length=5;
console.log (a); //[1,2] //未定義の 3 つはありません

要素の追加・削除

基本的な方法

上記の例では、配列に要素を追加する方法を使用しています。インデックスを直接使用するだけです (インデックスは連続している必要はありません)

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

var a=new Array(1,2) ,3) ;
a[3]=4;
console.log(a);//[1, 2, 3, 4]

前に述べたように、配列もオブジェクトであり、インデックスは単なる特殊な属性であるため、オブジェクト属性を削除するメソッドを使用し、配列要素を削除するには delete を使用できます

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

delete a[2];
console.log (a[2]); //未定義

これは、未定義に a[2] を直接代入するのと似ています。配列の長さは変更されません。また、他のデータのインデックスと値の対応関係も変更されません。

スタックメソッド

一部の学生は、上記の例、特に削除方法を常に発見していますが、これは私たちが望んでいる方法ではなく、中間の要素を削除した後、後続の要素のインデックスが自動的に減少することを期待することがよくあります。スタックから 1 つを取得するのと同じように、配列の長さも同時に 1 つ減ります。配列は、最初に配列を使用できるようにポップとプッシュを行うのに役立ちます。スタックを使用する場合と同様に最後に終了します

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

var a=new Array(1,2) ,3) ;
a.push(4);
console.log(a);//[1, 2, 3, 4]
console.log(a.length);//4
console.log(a.pop(a));//4
console.log(a); //[1, 2, 3]
console.log(a.length);/ /3

キューメソッド

stack メソッドが実装されたので、先入れ先出しキューをどのように減らすことができるでしょうか。shift メソッドは配列インデックスの最小の要素を削除し、後続の要素のインデックスを 1 つ減らすことができます。長さも 1 つ減少します。これは、shift/push Queue を使用してシミュレートできます。もちろん、配列の先頭に要素を追加するために使用される、shift メソッドに対応する unshift メソッドもあります。

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

var a=new Array(1,2) ,3) ;
a.unshift(4);
console.log(a);//[4, 1, 2, 3]
console.log(a.length);//4
console.log(a.shift(a));//4
console.log(a); //[1, 2, 3]
console.log(a.length);/ /3

究極のアーティファクト

JavaScript は、配列の追加と削除を一度に行う問題を解決するための splice メソッドを提供します (2 つのメソッドを組み合わせて置換効果を実現できます)。このメソッドには 3 つのパラメーターがあります。

1. インデックス作成を開始します

2. 要素の変位を削除します

3. もちろん、複数の新しい要素を記述して

を挿入することもできます。

splice メソッドは、削除された要素で構成される新しい配列を返します。削除がない場合は空の配列を返します

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

var a=new Array(1,2,3, 4,5 );

削除

最初の 2 つのパラメータを指定すると、スプライスを使用して配列要素を削除できます。これにより、インデックス調整と長さ調整も行われます

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

var a=new Array(1,2) ,3, 4,5);
console.log(a.splice(1,3));//[2, 3, 4]
console.log(a.length);//2
コンソール .log(a);//[1,5]

配列のインデックスが 0 から始まらない場合、そのような配列は非常に興味深い結果になります

。

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

var a=new Array();
a[2]=2;
a[3]=3;
a[7]=4;
a[8 ]=5;

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

console.log(a.splice(3) ,4) ); //[3]
console.log(a.length); //5
console.log(a);

上記の例からわかるように、splice の最初のパラメータは、配列インデックスに対する相対値ではなく、絶対的なインデックス値です。2 番目のパラメータは、削除された要素の数ではなく、削除アクションの回数です。配列は実際にはインデックス方向に移動されますが、継続的に移動されます。同時に、後続の要素のインデックスが調整され、前のインデックスは無視されます

挿入と交換

メソッドの第2パラメータ、つまり削除アクションの実行回数を0に設定し、第3パラメータ以降に挿入する内容を記入すれば、spliceは挿入を行うことができます。という操作を行い、第二引数が0でない場合は削除してその位置に挿入するという置換効果となります

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

var a=new Array(1,2) ,3, 4,5);
a.splice(1,0,9,99,999);
console.log(a.length); //8
console.log(a);/ /[1 , 9, 99, 999, 2, 3, 4, 5]
a.splice(1,3,8,88,888);
console.log(a.length);//8
console .log(a);//[1, 8, 88, 888, 2, 3, 4, 5]

共通メソッド

結合(文字)

このメソッドは、C# などの言語でも使用できます。その機能は、パラメーターをコネクタとして使用して、配列要素 (オブジェクトは toString() メソッドを呼び出します) を文字列に接続することです。

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

var a=new Array(1,2) ,3, 4,5);
console.log(a.join(',')); //1,2,3,4,5
console.log(a.join(' ') ); / /1 2 3 4 5
スライス(開始,終了)

スプライス方法であるスライスと混同しないでください

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

var a=new Array(1,2) ,3, 4,5);
console.log(a) //[1, 2, 3, 4, 5]
console.log(a.slice(1,2));//
console.log(a.slice(1,-1));//[2, 3, 4]
console.log(a.slice(3,2));//[]
console. log(a); //[1, 2, 3, 4, 5]

メソッドは、パラメータが 1 つだけの場合に使用されます。パラメータが負の数であると思われる場合は、配列の末尾から数えます (-3 は配列の下から 3 番目を意味します。ほとんどの人はこれを行いません)。 、ただし、配列の長さが分からず、最後の n を破棄したい場合に便利ですが、配列の長さは適切です。知っておいてください...、非常に紛らわしい使用法)、start が end より大きい場合は、注目に値します。そのスライスは元の配列を変更しませんが、新しい配列を返します。

concat(配列)

これは切断のように見えますが、実際には発音的な単語ではありません。 a.concat(b) は、a と b で構成される新しい配列を返します。元の配列も配列

内で再帰的に連結しません。

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

var a=new Array(1,2,3,4,5);
var b=new Array(6,7,8,9);
console.log(a. concat(b));//[1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(a); //[1, 2, 3, 4, 5]
console.log(b); //[6, 7, 8, 9]
reverse()

メソッドは配列の順序を逆にするために使用されます。前のメソッドとの違いは、元の配列

を変更することです。

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

var a=new Array(1,2) ,3, 4,5);
a.reverse();
console.log(a) //[5, 4, 3, 2, 1]

;

同様に、配列のインデックスが連続していないか、0 から始まる場合は、結果に注意する必要があります

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

var a=new Array();
a [2]=2;
a[3]=3;
a[7]=4;
a[8]=5;

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

a.reverse();

並べ替え

配列のソートにはsortメソッドを使用します。パラメータがない場合は、オブジェクト要素のtoStringを呼び出してアルファベットの昇順にソートされます。独自の定義に従って並べ替える場合は、並べ替えメソッドを渡すことができます。これは、並べ替えによって元の配列も変更されます。

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

var a=new Array(5,4) ,3, 2,1);
a.sort();
console.log(a);//[1, 2, 3, 4, 5]

しかし。 。 。

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

var a=new Array(7,8) ,9, 10,11);
a.sort();
console.log(a);//[10, 11, 7, 8, 9]

アルファベット順では、7 は 10 より大きいためです。この時点で、カスタム並べ替え関数を渡す必要があります

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

var a=new Array(7,8) ,9, 10,11);
a.sort(function(v1,v2){
return v1-v2;
console.log(a);//[7, 8, 9, 10 、11]

原理は C# の並べ替え (.NET Framework の設計パターン - リストの並べ替えに戦略パターンを適用する) と似ていますが、メソッドを直接渡すことができる点が異なります。 以下の内容は完全に推測です。

sort は、2 つの要素のサイズを比較するたびに、パラメーターがない場合はアルファベットを直接決定します。パラメーターがある場合は、比較される 2 つのパラメーターがカスタム メソッドに渡されて呼び出されます。比較 2 つの数値はカスタム メソッドの v1 と v2 に渡されます)。戻り値が 0 より大きい場合は、v1>v2 を意味します。それが 0 より小さい場合は、v1=v2 を意味します。 0、それは v1

最後に

これらを理解すると、配列は強力で柔軟ですが、要素の走査や要素の位置の取得においていくつかの不便さもあり、これらは ECMAScript で解決されているので、上手に使用できます。これにより、JavaScript がエレガントかつ効率的になります。