配列
配列順序付けられた値のコレクションです。 配列内の値は要素と呼ばれ、各要素はインデックスと呼ばれる配列内の数値位置によって特徴付けられます。 JavaScript の配列には型がありません。配列の要素は任意の型にすることができ、同じ配列の異なる要素は異なる型を持つことができます。 配列要素はオブジェクトまたは他の配列にすることもできるため、オブジェクトの配列や配列の配列などの複雑なデータ構造を作成できます。
JavaScript 配列のインデックスは 0 から始まり、32 ビット整数を使用します。配列の最初の要素のインデックスは 0 です。JavaScript 配列は動的であり、必要に応じてサイズが拡大または縮小できます。 配列を作成するときに固定サイズを宣言したり、サイズが変更されたときにメモリを再割り当てしたりする必要はありません。
JavaScript の配列はオブジェクトの特殊な形式であり、配列インデックスは、偶然にも整数である単なるプロパティ名以上の意味を持ちません。
配列を作成する最も簡単な方法は、リテラルを使用することです。リテラルは、角括弧で囲まれた配列要素をカンマで区切った単純なリストです。 配列リテラルの値は定数である必要はありません。オブジェクト リテラルを含む任意の式を使用できます。
変数が空 = ; // 空の配列 var 数値 = ; // 5 つの数値要素を含む配列 var misc = [ 1.1, true, "a", ]; // 異なるタイプの 3 つの要素 + 末尾のカンマ varbase = 1024; 変数テーブル = ; // 変数を含む配列 var arrObj = [, ]; // オブジェクトを含む内部の 2 つの配列
配列リテラル構文では、オプションで末尾のカンマを挿入できます。 リテラル [,] は、要素が 3 つではなく 2 つある配列に一致します。
配列を作成する別の方法は、コンストラクターを呼び出すことです。 配列()。 コンストラクターは 3 つの異なる方法で呼び出すことができます。
引数なしでコンストラクターを呼び出します。
変数 arr = 新しい Array();
この場合、リテラルと同等の空の配列が作成されます。
配列の長さを指定する単一の数値引数を使用してコンストラクターを呼び出します。
変数 arr = 新しい配列(10);
この場合、指定された長さの空の配列が作成されます。 Array() コンストラクターを呼び出すこの形式は、要素の数が事前にわかっている場合、配列にメモリを事前に割り当てるために使用できます。 これは配列に値を格納しないことに注意してください。
コンストラクター呼び出しで最初の 2 つ以上の配列要素または 1 つの非数値要素の値を明示的に指定します。
Var arr = new Array(5, 4, 3, 2, 1, "テスト");
この場合、コンストラクターへの引数は新しい配列の要素の値になります。 配列リテラルを使用することは、ほとんどの場合、Array() コンストラクターを使用するよりも簡単です。
配列要素には演算子を使用してアクセスします。 括弧の左側には配列参照がなければなりません。 括弧内には、負でない整数値を返す任意の式がなければなりません。 この構文は、配列要素の値の読み取りと書き込みの両方に役立ちます。 したがって、次の JavaScript 命令はすべて有効です。
// 1 つの要素を持つ配列を作成します var arr = ["world"]; // 要素 0 を読み取ります var value = arr; // 要素 1 に値を書き込みます arr = 3.14; // 要素 2 に値を書き込みます i = 2; arr[i] = 3; // 要素 3 に値を書き込みます arr = "hello"; // 要素 0 と 2 を読み取り、値を要素 3 に書き込みます arr] = arr;
配列は特殊なタイプのオブジェクトであることを思い出してください。 配列要素にアクセスするために使用される角括弧は、オブジェクトのプロパティにアクセスするために使用される角括弧とまったく同じように機能します。 JavaScript インタプリタは、括弧内の数値インデックスを文字列に変換し (インデックス 1 は文字列 "1" になります)、その文字列をプロパティ名として使用します。
数値インデックスを文字列に変換することに関して特別なことは何もありません。通常のオブジェクトでも同じことができます。
変数 obj = (); // 単純なオブジェクトを作成します obj = "one"; // 整数でインデックスを付ける
配列の特徴は、負でない整数のプロパティ名を使用すると、配列がプロパティの値を自動的に決定することです。 長さ。 たとえば、上記では単一の要素を持つ配列 arr を作成しました。 次に、インデックス 1、2、3 の要素に値を割り当てました。これらの操作の結果、配列の長さプロパティの値は 4 に変更されました。
配列内のインデックスとオブジェクトのプロパティ名を明確に区別する必要があります。 すべてのインデックスはプロパティ名ですが、整数で表される名前を持つプロパティのみがインデックスです。 すべての配列はオブジェクトであり、任意の名前を付けてプロパティを追加できます。 ただし、配列インデックスであるプロパティを操作すると、配列は必要に応じて length プロパティの値を更新することで応答します。
負の数値や整数以外の数値も配列のインデックスとして使用できることに注意してください。 この場合、数値は文字列に変換され、プロパティ名として使用されます。
配列に要素を追加する最も簡単な方法は、新しいインデックスに値を割り当てることであることはすでに説明しました。 このメソッドを使用して、配列の末尾に 1 つ以上の要素を追加することもできます。 押す():
変数 arr = ; // 空の配列を作成します arr.push("zero"); // 最後に値を追加します arr.push("one",2); // さらに 2 つの値を追加します
arr 要素に値を割り当てることで、配列の末尾に要素を追加することもできます。 配列の先頭に要素を挿入するには、次のメソッドを使用できます。 シフト解除()、配列内の既存の要素をより高いインデックスの位置に移動します。
通常のオブジェクト プロパティと同様に、delete 演算子を使用して配列要素を削除できます。
変数 arr = ; arrを削除します。 2着で到着。 // false、配列内のインデックス 2 は定義されていません arr.length; // 3: 削除演算子は配列の長さプロパティを変更しません
要素の削除は、その要素に未定義の値を割り当てることと似ています (ただし、少し異なります)。 配列要素に削除演算子を適用しても、長さプロパティの値が変更されたり、要素の削除によって残った空白を埋めるためにより高いインデックスを持つ要素が下にシフトされることはないことに注意してください。
新しい値を length プロパティに代入するだけで、配列の末尾の要素を削除することもできます。 配列にはメソッドがある ポップ()(push() メソッドの逆)、配列の長さを 1 だけ減らし、削除された要素の値を返します。 という方法もあります シフト()(unshift() メソッドの逆)、配列の先頭の要素を削除します。 delete 演算子とは異なり、shift() メソッドはすべての要素を現在のインデックスの下の位置にシフトします。
最後に多目的な方法があります スプライス()を使用すると、配列要素を挿入、削除、置換できます。 これは、length プロパティの値を変更し、必要に応じて配列要素をより低いインデックスまたはより高いインデックスにシフトします。 これらすべてのメソッドについては、少し後で見ていきます。
JavaScript は「真の」多次元配列をサポートしていませんが、配列の配列を使用して多次元配列をシミュレートする良い方法を提供します。 配列の配列内のデータ要素にアクセスするには、演算子を 2 回使用するだけです。
たとえば、変数行列が数値の配列の配列であるとします。 行列[x]の各要素は数値の配列です。 配列内の特定の数値にアクセスするには、行列 [x][y] という式を使用できます。 以下は、2 次元配列を九九として使用する具体的な例です。
// 多次元配列を作成します var table = new Array(10); // テーブルには 10 行あります for(var i = 0; i
ECMAScript 3 標準では、配列を操作するための便利な関数のセットとして Array.prototype が定義されており、任意の配列のメソッドとして使用できます。 これらの方法については、次のサブセクションで説明します。
Array.join() メソッドは、すべての配列要素を文字列に変換し、結合して、結果の文字列を返します。 オプションの引数として、結果文字列内の要素を区切るために使用される文字列をメソッドに渡すことができます。 区切り文字列が指定されていない場合は、カンマが使用されます。 たとえば、次のフラグメントの結果は文字列「1,2,3」になります。
変数 arr = ; arr.join(); // "1,2,3" arr.join("-"); // 「1-2-3」
Array.reverse() メソッドは、配列内の要素の順序を反転し、並べ替えられた配列を返します。 置換は元の配列で直接実行されます。 このメソッドは、並べ替えられた要素を含む新しい配列を作成するのではなく、既存の配列内の要素を並べ替えます。 たとえば、次のスニペットでは、 reverse() メソッドと join() メソッドを使用すると、文字列「3,2,1」が生成されます。
変数 arr = ; arr.reverse().join(); // "3,2,1"
Array.sort() メソッドは、ソース配列内の要素をソートし、ソートされた配列を返します。 sort() メソッドが引数なしで呼び出された場合、並べ替えはアルファベット順に行われます (必要に応じて、要素は比較のために一時的に文字列に変換されます)。 未定義の要素は配列の最後に移動されます。
アルファベット順以外の順序で並べ替えるには、引数として比較関数を sort() メソッドに渡すことができます。 この関数は、2 つの引数のうちどちらをソート済みリストの最初に置くかを設定します。 最初の引数を 2 番目の引数より前に指定する必要がある場合、比較関数は負の数を返す必要があります。 ソートされた配列で最初の引数が 2 番目の引数の後に続く場合、関数は 0 より大きい数値を返さなければなりません。 2 つの値が等しい場合 (つまり、順序は関係ありません)、比較関数は 0 を返す必要があります。
変数 arr = ; arr.sort(); // アルファベット順: 1111, 222, 33, 4 arr.sort(function(a,b) ( // 数値順: 4, 33, 222, 1111 return a-b; // ソート順に応じて 0 を返します aおよび b)); // 逆方向に最大値から最小値へソートします arr.sort(function(a,b) (return b-a));
このスニペットで名前のない関数を使用すると便利であることに注目してください。 比較関数はここでのみ使用されるため、名前を付ける必要はありません。
Array.concat() メソッドは、 concat() が呼び出された元の配列の要素と concat() に渡された引数の値を含む新しい配列を作成して返します。 これらの引数のいずれかがそれ自体配列である場合、その要素は返された配列に追加されます。 ただし、配列の配列を 1 次元配列に再帰的に変換することはできないことに注意してください。 concat() メソッドは元の配列を変更しません。 以下にいくつかの例を示します。
変数 arr = ; arr.concat(4, 5); // arr.concat() を返します。 // arr.concat(,) を返す // arr.concat(4, ]) を返す // ] を返す
Array.slice() メソッドは、指定された配列のスライスまたは部分配列を返します。 2 つのメソッド引数は、返されるフラグメントの先頭と末尾を指定します。 返される配列には、最初の引数で指定された番号の要素と、2 番目の引数で指定された番号の要素まで (ただし、要素は含まれません) 後続のすべての要素が含まれます。
引数が 1 つだけ指定された場合、返される配列には、配列の開始位置から終わりまでのすべての要素が含まれます。 いずれかの引数が負の場合、配列の末尾を基準とした相対的な要素番号が決定されます。 したがって、引数 -1 は配列の最後の要素に対応し、引数 -3 は配列の最後から 3 番目の要素に対応します。 ここではいくつかの例を示します。
変数 arr = ; arr.slice(0,3); // arr.slice(3) を返します。 // arr.slice(1,-1) を返します。 // arr.slice(-3,-2) を返します。 // 戻る
Array.splice() メソッドは、配列要素の挿入または削除を実行する汎用メソッドです。 lice() メソッドや concat() メソッドとは異なり、splice() メソッドは呼び出された元の配列を変更します。 splice() メソッドとスライス() メソッドは非常によく似た名前を持っていますが、実行する操作はまったく異なることに注意してください。
splice() メソッドは、配列から要素を削除したり、新しい要素を挿入したり、その両方を同時に行うことができます。 配列要素は、挿入または削除後に連続シーケンスを作成するために必要に応じてシフトされます。
splice() メソッドの最初の引数は、挿入または削除が実行される配列内の位置を指定します。 2 番目の引数は、配列から削除 (カット) する必要がある要素の数を指定します。 2 番目の引数を省略した場合は、指定された配列要素から配列の末尾までのすべての配列要素が削除されます。 splice() メソッドは、削除された要素の配列、または (要素が削除されなかった場合) 空の配列を返します。
splice() メソッドの最初の 2 つの引数は、削除する配列要素を指定します。 これらの引数の後には、最初の引数で指定された位置から開始して、配列に挿入する要素を指定する追加の引数を任意の数だけ続けることができます。
変数 arr = ; arr.splice(4); // 戻り値、arr = arr.splice(1,2); // 戻り値、arr = arr.splice(1,1); // 戻る ; arr = arr = ; arr.splice(2,0,"a","b"); // 戻る ; arr =
Push() メソッドと Pop() メソッドを使用すると、配列をスタックであるかのように操作できます。 Push() メソッドは、1 つ以上の新しい要素を配列の末尾に追加し、その新しい長さを返します。 Pop() メソッドは逆の操作を実行します。配列の最後の要素を削除し、配列の長さを減らし、削除した値を返します。 これらのメソッドはどちらも、変更されたコピーを作成するのではなく、元の配列を変更することに注意してください。
unshift() メソッドと SHIFT() メソッドは、配列の末尾ではなく先頭で要素を挿入および削除することを除いて、push() および Pop() とほぼ同じように動作します。 unshift() メソッドは、既存の要素をより大きなインデックスにシフトしてスペースを解放し、要素を配列の先頭に追加して、配列の新しい長さを返します。 SHIFT() メソッドは、配列の最初の要素を削除して返し、後続のすべての要素を 1 つ下にシフトして、配列の先頭に空いたスペースを占めます。
JavaScript の配列についてすべて学ぼうと決めた皆さん、こんにちは。 これまでのいくつかの出版物で、私はすでにいくつかの点に触れてきました。 今日の記事は完全なガイドです。
配列を作成するためのいくつかのオプションと、JavaScript で配列の長さを「引き出す」方法について説明し、それらの機能について説明し、主なプロパティとそれらを操作するためのメソッドをリストし、そしてもちろんテスト例も示します。 始めましょう!
まず理解する必要があるのは、配列は特定のメモリ セルに構造化データを格納するタイプであり、各メモリ セルには独自の識別子 (番号) があるということです。
これらは角かっこを使用して作成され、さまざまな機能とメソッドがあり、多次元にすることができます。 その主な利点は、すべての要素に番号が付けられているため、識別子を介してアクセスできることです。
ただし、別のタイプの配列もあります。 実際、オブジェクトに関する記事で、後者も配列であると述べました。 実際、それらは連想配列であり、「キー => 値」の形式の情報記憶システムを備えたデータ構造です。 この構造は多くの場合ハッシュと呼ばれますが、あまり一般的ではありませんが辞書と呼ばれます。
それぞれのタイプを詳しく見てみましょう。
連想配列を使用する場合、要素の追加と削除は非常に簡単です。 このスクリプト言語は型指定されておらず、厳密なルールも多くないため、オブジェクト要素をいくつかの方法で作成できます。オブジェクト要素をすぐにリストする、オブジェクト作成後に初期化する、コードの進行に合わせて作成するなどです。
ここでは、そのようなメカニズムの実装例を示したいと思います。 最初のプログラムでオブジェクトを作成しました 忍耐強い、その要素を列挙します。 ご覧のとおり、 忍耐強いパラメータ独自の値を持つネストされたオブジェクトを作成しました。
1 2 3 4 5 6 7 8 9 10 | var 患者 = 新しいオブジェクト(); patient.firstName ="インナ"patient.age =34,patient.param =( 身長:169 ,体重:55,病気:「いいえ」)alert(patient.firstName) //「インナ」と表示されますalert(patient.param .病気) // いいえを出力します |
var 患者 = 新しいオブジェクト(); patient.firstName ="インナ"patient.age =34,patient.param =( 身長:169 ,体重:55,病気:"いいえ")alert(patient.firstName) //「インナ」と表示されますalert(patient.param .病気) // いいえを出力します
既存のパラメータにもう 1 つパラメータ (姓など) を追加する必要がある場合、これは次のように行われます。 上記のコードに次の行を追加します。
患者の姓 = "ルツェンコ"
アラート (患者.姓)
このようにして、コレクションに新しいプロパティを簡単に補充できます。 値を変更したい場合は、選択したキーにその値を割り当てるだけです。
患者.名 = "カティア"
オブジェクトの場合は、delete コマンドを使用して不要なプロパティを削除する操作もあります。
患者の姓を削除
これらは、「数値インデックスを持つ配列」と呼ばれることもあります。 以前のバージョンと比較すると、ここではキーが数字の形式で表示されていますが、値は何でも構いません。 コレクションがそのようなオブジェクトに順序どおりに入力されない可能性があります。
したがって、ある要素をインデックス「0」のセルに入力し、次の要素をインデックス「4」で入力することができます。 中間メモリセルは空であり、アクセスされると「未定義」を出力します。
例として、製品の配列を作成する小さなアプリケーションを作成しました。
1 2 3 4 5 | var Goods = ["牛肉","パスタ","ハードチーズ","スパイス"]; アラート(商品); アラート(商品); Goods = "トマト" アラート(グッズ); |
var Goods = ["牛肉","パスタ","ハードチーズ","スパイス"]; アラート(商品); アラート(商品); Goods = "トマト" アラート(グッズ);
具体的には、買い物リスト全体を表示する方法と、1 つの商品を選択する方法を説明しました。 また、物件についても触れました 長さ、これについては後ほど具体的に説明します。 ついでに、少し解説しておきます。
新しい要素を配列の末尾に追加します。グッズ=「トマト」
構造化オブジェクトの先頭と末尾に要素を追加および削除できるコマンドが 4 つあります。
まず、配列の先頭で機能するメソッドについて説明します。 これらには以下が含まれます シフトそして シフトを解除する。 最初のコマンドは 1 つの値を削除し、2 番目のコマンドは値を追加します。
例として、前のプログラムのコードを取り出して変更しました。
1 2 3 4 5 6 7 8 | var Goods = ["牛肉","パスタ","ハードチーズ","スパイス"]; document.writeln(グッズ); //牛肉、パスタ、ハードチーズ、スパイス document.writeln(goods); //ハードチーズグッズ.unshift("トマト"); Goods.unshift("調理済み豚肉"); document.writeln(グッズ); // 豚肉、トマト、牛肉、パスタ、ハードチーズ、スパイス Goods.shift() document.writeln(goods); //トマト、牛肉、パスタ、ハードチーズ、スパイス |
var Goods = ["牛肉","パスタ","ハードチーズ","スパイス"]; document.writeln(グッズ); //牛肉、パスタ、ハードチーズ、スパイス document.writeln(goods); //ハードチーズグッズ.unshift("トマト"); Goods.unshift("調理済み豚肉"); document.writeln(グッズ); // 豚肉、トマト、牛肉、パスタ、ハードチーズ、スパイス Goods.shift() document.writeln(goods); //トマト、牛肉、パスタ、ハードチーズ、スパイス
得られた結果を実行したアクションのコメントに書き留めました。
次に、リストの末尾に要素を追加および削除するメソッドに移りましょう。 それで、 ポップ値を削除する責任があり、 押す- 追加用。
上記のコマンドを前のソフトウェア実装に追加してみましょう。
Goods.push("イタリアンハーブ");
document.writeln(グッズ);
その結果、最後の行が画面に表示されます。
「トマト、牛肉、パスタ、ハードチーズ、イタリアンハーブ。」
配列に書き込まれた要素の数を確認するには、オブジェクト プロパティを使用する必要があります。 長さ。 このコマンドは上記ですでに使用しています。
当時、コレクションの長さは 4 だったので、もう 1 つの製品を追加する必要がありました。 配列要素の番号付けは 0 から始まるため、この例では最初の空きセルはインデックス「4」の下にありました。 長さによってコレクションに含まれる製品の数が決まるのではなく、配列自体の長さが決まることに注意してください。 したがって、そのリストの中央の 2 つの要素が空だった場合、
(var Goods = ["牛肉","パスタ","ハードチーズ","スパイス"];)
そのプロパティは数値 6 になります。
このコマンドを理解すると、ループの解析を開始できます。 これらは、コレクションの要素を反復処理するために必要です。 これはなかなか手放せない便利な仕組みです。 サイクルでは、どの方向に、どの要素から、どの要素に沿って、どのステップで値を反復処理するかを指定できます。
最も人気があり、最も高速に実行されるループは、 for キーワードを使用して作成されたループです。
var Goods = ["牛肉","パスタ","ハードチーズ","スパイス"]; for (var i = Goods.length-1; i >=0; i=i-2) ( document.writeln((i+1)+"."+ Goods[i]); )
答えに「4. スパイス 2. パスタ」という行が含まれると判断した人は正解でした。 よくやった!
js 言語の作成者は、配列の操作を大幅に簡素化する多くのメソッドと関数を提供しました。 その中には、コレクションのコピー、要素の順序の変更、並べ替え、配列から文字列への変換、およびその逆の変換などを行うためのツールがあります。
このレッスンでは、配列について学び、配列の作成方法、要素に対する操作の実行方法を学び、配列を操作するときに使用できる基本的なメソッドとプロパティについても見ていきます。
配列とは、 順序付けられた値のコレクション。 このコレクション内の値は要素と呼ばれます。 配列内の各要素には、インデックスと呼ばれる独自のシリアル番号 (番号) があります。 インデックスには 0 から始まる番号が付けられます。
次の図は、5 つの要素で構成される数値配列を示しています。 この配列の要素には、123 (インデックス 0)、7 (インデックス 1)、50 (インデックス 2)、-9 (インデックス 3)、24 (インデックス 4) のデータが含まれています。
JavaScript での配列の作成は通常、次を使用して行われます。 配列リテラル.
配列リテラルは、カンマで区切られた要素のリストを含む角括弧です。
例えば:
変数が空 = ; // 空の配列 var 数値 = ; // 数値配列 var arr = ; // さまざまなデータ型を含む配列
JavaScript 配列内の値は同じ型である必要はありません。 それらの。 1 つの配列には、さまざまなデータ型の値を含めることができます。
特定の配列要素は、そのインデックスによってアクセスされます。 この操作はインデックス操作とも呼ばれます。
例えば:
// 3 つの要素で構成される配列を作成します var mobileColors = ["Black", "White", "Grey"]; // インデックス 0 と 2 のスマホカラー配列要素の値をブラウザのコンソールに表示します console.log("インデックス 0 のスマホカラー配列要素の値: " + スマホColors); // "インデックス0のsmartphoneColors配列要素の値: Black" console.log("インデックス2のsmartphoneColors配列要素の値: " + スマホColors); // "インデックス0のsmartphoneColors配列要素の値: Gray" // インデックス1のsmartphoneColors配列要素の値を「Red」に変更します mobileColors = "Red"; // ["Black", "Red", "Grey"] // インデックス 3 の mobileColors 配列要素を値 "Blue" に設定します mobileColors = "Blue"; // ["黒"、"赤"、"グレー"、"青"]
静的な値だけでなく、式を配列要素の値として使用することもできます。
変数長さ A = 7、幅 A = 5; 変数ポイント = ;
オブジェクトは配列要素の値として使用できます。
変数ポイント = [ (x1: 5, y1: 3), (x1: 7, y1: 10), (x1: 12; y1: 0) ]; // 3 つのオブジェクトで構成される配列
配列を作成する別の方法配列コンストラクター関数の呼び出しで構成されます。
引数なしのコンストラクター関数呼び出しは、空の配列を作成するために使用されます。
変数が空 = 新しい Array(); // 空の配列
配列を作成するこのメソッドはリテラルと同等です。
コンストラクター関数の引数として数値を指定すると、指定された数の要素で構成される配列が作成されます。 さらに、これらの要素はすべて、値として undefine を持ちます。
変数 arr = 新しい配列(5); // 5つの要素からなる配列(要素の値は不定)
複数の値または 1 つの数値以外の値を括弧内でコンストラクター関数に渡すと、渡された引数から配列が作成されます。
他の多くのプログラミング言語とは異なり、JavaScript の配列はサイズを自動的に変更します。 それらは本質的に動的です。 このような配列には次元を与える必要はありません。 JavaScript 配列のもう 1 つの特徴は、同じ配列の異なる要素に異なるタイプのデータを含めることができることです。
配列の長さ (要素数) は、length プロパティを使用して決定されます。
//Array 関数の要素の値を列挙して配列を作成します var volumeHDDs = new Array("500Gb","1Tb","2Tb"); // lengthArray 変数に配列の長さを割り当てます volumeHDDs var lengthArray = volumeHDDs.length;
配列の最初の要素の値は、この配列の大括弧内に数値 0 を指定することで取得されます。
// 3 つの要素で構成される配列を作成します var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //配列の最初の要素の値を取得します。 var firstValue = volumeHDDs;
配列の最後の要素の値は、この配列の角括弧内に式 array_name.length-1 を指定することによって取得されます。
// 3 つの要素で構成される配列を作成します var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //配列の最後の要素の値を取得します var lastValue = volumeHDDs;
配列要素の反復処理は、for ループを使用して行われます。
たとえば、配列のすべての要素を反復処理して、それらの値をブラウザー コンソール (F12) に表示してみましょう。
// 4 つの要素で構成される配列 nameStudents を作成します var nameStudents = new Array("Petya","Vasya","Kolya","Maxim"); //配列要素を 0 から配列長 1 まで反復します for (var i=0; i<= nameStudents.length-1; i++) { console.log(i+1 + " элемент массива = " + nameStudents[i]); }
delete 演算子は、配列から要素を削除するためではなく、指定された配列要素に未定義の値を割り当てるために使用されます。
Var namePlanets = new Array("金星","水星","地球","火星"); namePlanet を削除します。 for (var i=0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }
Array オブジェクトには、配列を操作するための次のメソッド (関数) が含まれています。
Push メソッドは、配列の末尾に要素を追加するように設計されています。 この要素の値は、このメソッドのパラメータとして指定されます。 その結果、push メソッドは、追加された内容を考慮して、配列内の要素の数を返します。
変数名Planets = ["金星"、"水星"、"地球"、"火星"]; namePlanets.push("木星"); // 5 console.log(namePlanets); // [「金星」、「水星」、「地球」、「火星」、「木星」]
Pop メソッドは、配列から最後の要素を削除するように設計されています。 このメソッドにはパラメータがありません。 その結果、配列の最後の (削除された) 要素の値が返されます。
変数名Planets = ["金星"、"水星"、"地球"、"火星"]; namePlanets.pop(); // 「火星」 console.log(namePlanets); // [「金星」、「水星」、「地球」]
シフト メソッドは、配列から最初の要素を削除するように設計されています。 インデックス 0 を持つ要素。配列の他のすべての要素は先頭にシフトされます。 それぞれのインデックスは 1 ずつ減らされます。このメソッドは、結果として削除された要素の値を返します。
変数名Planets = ["金星"、"水星"、"地球"、"火星"]; namePlanets.shift(); // "金星" console.log(namePlanets); // ["水星"、"地球"、"火星"]
unshift メソッドは、要素を配列の先頭 (他の要素の前) に追加するように設計されています。 この要素の値は、このメソッドのパラメータとして指定されます。 その結果、このメソッドは、追加された内容を考慮して、配列内の要素の数を返します。
Var namePlanets = ["水星", "地球", "火星", "木星"]; namePlanets.unshift("金星"); // 5 console.log(namePlanets); // [「金星」、「水星」、「地球」、「火星」、「木星」]
スライス メソッドは、配列のセクションをコピーするように設計されています。 ただし、元の配列は変更されず、選択された要素で構成される新しい配列が結果として返されます。
スライス メソッドには 2 つのパラメータがあります。
splice メソッドは、配列の内容を変更するように設計されています。 配列への要素の追加と削除の両方に使用できます。
splice メソッドの構文は次のとおりです。
Array.splice(startIndex, deleteCount [, element1[, element2[, ...]]]); /* startIndex (必須) - 配列の変更を開始する要素の開始インデックス。 startIndex として配列の長さより大きい数値を指定すると、開始インデックスは配列の末尾に設定されます。 startIndex として負の数値を指定した場合、開始要素は末尾から数えられます。 deleteCount (必須) - 配列から削除する必要がある要素の数を示す数値。 要素を配列から削除する必要がない場合は、deleteCount を 0 に設定する必要があります。この後、配列に追加する新しい要素を少なくとも 1 つ指定する必要があります。 startIndex から始まる配列内の残りの要素の数を超える数値を deleteCount として指定しても、この場合でもそれらは削除されます (つまり、開始インデックスから始まり、配列の最後までのすべての要素)。 element1、element2、.. (オプション) - 配列に追加する必要がある要素。 */
スプライス工法の使用例。
splice メソッドを使用して、配列から一部の要素を削除します。
変数名Planets = ["金星"、"水星"、"地球"、"火星"]; namePlanets.splice(2, 2); //["地球", "火星"] console.log(namePlanets); // [「金星」、「水星」]
splice メソッドを使用して配列から要素を削除し、そこに新しい要素を追加します。
変数名Planets = ["金星"、"水星"、"地球"、"火星"]; namePlanets.splice(1, 1, "天王星"、"海王星"、"土星"); // ["水星"] console.log(namePlanets); // [「金星」、「天王星」、「海王星」、「土星」、「地球」、「火星」]
splice メソッドは、配列に新しい要素を追加する場合にのみ使用します。
変数名Planets = ["木星", "土星", "天王星"]; namePlanets.splice(0, 0, "金星"、"水星"、"地球"、"火星"); // console.log(namePlanets); // [「金星」、「水星」、「地球」、「火星」、「木星」、「土星」、「天王星」]
join メソッドは、配列のすべての要素を文字列に結合するように設計されています。
結合メソッドの構文:
Array.join(); /* セパレータ (オプション) - 各配列要素間の接続文字列として使用されるセパレータ。 このパラメータを指定しない場合、接続文字列として「,」が使用されます。 空の文字列をパラメータとして指定した場合、返される文字列の配列要素は何も区切られません */
Var berries = ["ブドウ", "ブドウ", "カラント", "ローズヒップ"]; var berriesStr1 = berries.join(); // "ブドウ、ブドウ、スグリ、ローズヒップ" var berriesStr2 = berries.join(""); // "ブドウブドウカラントローズヒップ" var berriesStr3 = berries.join(", "); // "ブドウ、ブドウ、スグリ、ローズヒップ" var berriesStr4 = berries.join(" + "); // "ブドウ + ブドウ + スグリ + ローズヒップ"
文字列以外を区切り文字として使用すると、文字列に変換されます。
Var berries = ["ブドウ", "ブドウ", "カラント", "ローズヒップ"]; var berriesStr1 = berries.join(false); // "GrapesfalseGrapesfalseCurrantfalseRosehip" var berriesStr2 = berries.join(4/2); // "Grapes2Grapes2Currant2Rose Hip" 値として null または未定義を持つ配列要素は空の文字列にキャストされます。 var arr = ; var arrStr = arr.join(", "); // "0、5、-4"
Split メソッドは、文字列を配列に変換するように設計されています。 このメソッドには、文字列を指定できるパラメータが 1 つあり、それに基づいてこの文字列が文字列の配列に分割されます。
Var strElementComputers = "システム ユニット、モニター、キーボード、マウス、スピーカー、プリンター"; var elementComputers = strElementComputers.split(", "); console.log("配列内の要素の数: " + elementComputers.length); for (var i=0; i<= elementComputers.length-1; i++) { console.log(i + " элемент массива = " + elementComputers[i]); }
reverse メソッドは、配列要素を逆の順序で並べ替えるように設計されています。
Var namePlanets = new Array("金星","水星","地球","火星"); namePlanets.reverse(); console.log("配列内の要素の数: " + namePlanets.length); for (var i=0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }
sort メソッドは、配列要素をソートするために使用されます。 デフォルトでは、このメソッドは配列を文字列としてソートします。
Var namePlanets = new Array("金星","水星","地球","火星"); namePlanets.sort(); console.log("配列内の要素の数: " + namePlanets.length); for (var i=0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }
2017/06/21 12:17
JavaScript でオブジェクトの配列のサイズを計算するには、配列の長さプロパティを使用します。
Var arr = ["最初", "2番目"]; console.log(arr.length); // 2
JavaScript の配列にはインデックスが欠落している場合があります。 例えば
変数 arr = ; arr = "最初"; arr = "秒";
length プロパティは、配列の最大インデックス + 1 を返します。 この例では、長さ = 5 です。
Array.prototype.count = function())( var result = 0; for(var i = 0; i< this.length; i++) if (this[i] != undefined) result++; return result; }
使用例
変数 arr = ; arr = "最初"; arr = "秒"; console.log(arr.count()); //2
長さプロパティに値を割り当てることもできます。 これにより、既存の配列の長さを短縮できます。
Var arr = [「最初」、「2 番目」、「3 番目」]; arr.length = 2; コンソール.ログ(arr); // [「最初」、「2 番目」]
配列は通常のオブジェクトであるため、配列のサイズをバイト単位で計算することは、他のオブジェクトのサイズを計算することと何ら変わりません。 残念ながら、JavaScript にはサイズを計算するための API が提供されていないため、自分で計算する必要があります。 これは次のように行われます。オブジェクトのすべてのプロパティを調べます。プロパティがプリミティブ型の場合は、そのプロパティにオブジェクトが含まれている場合は、その型のインスタンスのサイズを全体の結果に追加します。その大きさ。
関数 sizeOf(obj) ( var bytes = 0; if(obj !== null && obj !== unknown) ( switch(typeof obj) ( case "number": バイト += 8; Break; case "string": バイト+= obj.length * 2; ケース "ブール": バイト += 4; ケース "オブジェクト": (bytes += sizeOf(obj); )
この方法は正確ではなく、無限ループに陥る可能性があるなど、多くの問題を抱えています。
この記事では、数値インデックスを持つ標準的な JavaScript 配列について説明します。 配列は角括弧を使用して宣言されます。
var Fruit = ["リンゴ"、"オレンジ"、"ロバ"]
要素を抽出するには、そのインデックスを角かっこで囲みます。 最初のインデックス 0 :
var フルーツ = ["リンゴ", "オレンジ", "ロバ"] アラート(フルーツ) アラート(フルーツ) アラート(フルーツ)
JavaScript 配列の長さを取得することもできます。
var Fruits = ["リンゴ", "オレンジ", "ロバ"]alert(fruits.length)
おっとっと! 2 つの果物と 1 頭のロバを含む配列を作成しました。 次に、ロバを取り除く必要があります。
JavaScript の Pop メソッドは、配列から要素を削除してそれを返します。
次の例は、配列から「Donkey」を取得する方法を示しています。
var Fruit = ["Apple", "Orange", "Donkey"] alter("I'm Remove "+fruits.pop()) // これで、["Apple","Orange"] のみになりました。alert("Now配列のサイズ : "+fruits.length) // ロバが削除されました
Pop は配列自体を変更することに注意してください。
Pop に相当するのは、要素を配列に追加する Push メソッドです。 たとえば、桃を追加するのを忘れていました。
var フルーツ = ["リンゴ", "オレンジ"] フルーツ.push("桃"); // これで ["Apple", "Orange", "Peach"] ができました。alert("Last element:"+fruits)
// 1 varstyles = ["Jazz", "Bluez"] // 2styles.push("Rock"n"Roll") // または:styles = "Rock"n"Roll" // 3styles = "Classic " // 4 アラート(styles.pop())
シフト/シフト解除メソッドは配列の末尾で動作しますが、シフトを使用して要素を上にシフトすることもできます ( 要素をシフトすることで配列の最初の値が削除されます)。 unshift メソッドを使用すると、JavaScript で配列の末尾から要素を追加できます。
var Fruits = ["Apple", "Orange"] var apple = Fruits.shift() // 現在は ["Orange"] のみです Fruits.unshift("Lemon") // 現在は ["Lemon", "オレンジ"]alert(fruits.length) // 2
シフトとシフト解除は両方とも、複数の要素を同時に操作できます。
var Fruits = ["Apple"] Fruits.push("Orange","Peach") Fruits.unshift("Pineapple","Lemon") // 配列は次のようになります: ["Pineapple", "Lemon", 「リンゴ」「オレンジ」「ピーチ」】
アラートを介して arr 配列からランダムな値を表示するコードを作成します。
var arr = ["プラム","オレンジ","ロバ","ニンジン","JavaScript"]
注: 最小値から最大値まで (両端を含む) の乱数を取得するコードは次のとおりです。
var rand = min + Math.floor(Math.random()*(max+1-min))
0 から arr.length-1 (両端を含む) までの乱数を抽出する必要があります。
var arr = ["プラム","オレンジ","ロバ","ニンジン","JavaScript"] var rand = Math.floor(Math.random()*arr.length)alert(arr)
JavaScript では、配列の反復処理は for ループを使用して行われます。
var フルーツ = ["パイナップル", "レモン", "リンゴ", "オレンジ", "ピーチ"] for(var i=0; i 指定された配列内の値を検索し、そのインデックスを返す関数 find(arr,value) を作成します。値が見つからない場合は -1 を返します。 例えば: arr = [ "test", 2, 1.5, false ] find(arr, "test") // 0 find(arr, 2) // 1 find(arr, 1.5) // 2 find(arr, 0) // -1 考えられる解決策は次のようになります。 関数 find(配列, 値) (for(var i=0; i しかし、 == は 0 と false の違いを定義していないため、これは正しくありません。 JavaScript で配列を操作する場合は、=== を使用する方が正確です。 さらに、最新の ES5 標準には Array#indexOf 関数が含まれています。 これを使用すると、次のような関数を定義できます。 function find(array, value) ( if (array.indexOf) return array.indexOf(value) for(var i=0; i さらに賢いのは、indexOf メソッドが存在するかどうかを確認する条件を指定して find を定義することです。 配列を受け取り、 arr からの数値のみを含む新しい配列を返す関数 filterNumeric(arr) を作成します。 これがどのように機能するかの例: arr = ["a", 1, "b", 2]; arr = フィルター数値(arr); // これでarr = 解決策は、配列を反復処理し、値が数値の場合は新しい配列に値を追加することです。 JavaScript 配列を文字列に変換する簡単な方法が必要な場合があります。 これが join メソッドの目的です。 指定された区切り文字を使用して、配列を文字列に連結します。 var フルーツ = ["レモン","リンゴ","オレンジ","ピーチ"]; var str = Fruit.join(", "); アラート(文字列); 逆変換は、split メソッドを使用して簡単に実行できます。 var フルーツ = "リンゴ、オレンジ、ピーチ"; var arr = フルーツ.split(","); // arr には ["Apple", "Orange", "Peach"] が含まれるようになりました オブジェクトには className プロパティが含まれており、これにはスペースで区切られたクラス名が含まれます。 クラス cls を追加する関数 addClass(obj, cls) を作成しますが、クラスが存在しない場合に限ります。 ddClass(obj, "new") // obj.className="open menu new" addClass(obj, "open") // 変更なし (クラスはすでに存在します) addClass(obj, "me") // obj.className= 「新しいメニューを開く」alert(obj.className) // className とループを複数の部分に分割する必要があります。 クラスが見つからない場合は追加されます。 ループはパフォーマンスを向上させるためにわずかに最適化されています。 function addClass(elem, cls) (for(var c = elem.className.split(" "), i=c.length-1; i>=0; i--) (if (c[i] == cls) ) return ) elem.className += " "+cls ) var obj = ( className: "メニューを開く" ) addClass(obj, "new") addClass(obj, "open") alter(obj.className) // メニューを開く新しい 上の例では、変数 c がループの先頭で定義され、その最後のインデックスが i に設定されます。 ループ自体は逆方向に処理され、条件 i>=0 で終了します。 i>=0 は i よりも検査が速いためです。 JavaScript では、配列内の検索を高速化します。 length プロパティを使用すると、次のように配列を切り詰めることができます。 長さを指定すると、ブラウザによって配列が切り捨てられます。 実際、JavaScript では、配列は自動長さ設定と特別なメソッドを備えたオブジェクトです。 これは、配列がメモリの連続したセグメントを表す他の言語の概念とは異なります。 これは、リンク リストに基づくキューやスタックとも異なります。 キーは数字ですが、任意の名前を付けることができます。 arr = arr = 5 arr.prop = 10 // これは行わないでください JavaScript では、配列はハッシュ テーブルであり、パフォーマンス上の利点もありますが、いくつかの欠点もあります。 たとえば、プッシュ/ポップは配列の最も外側の要素に対してのみ機能するため、信じられないほど高速です。 プッシュは末尾でのみ機能します。 var arr = ["My", "array"] arr.push("something") alter(arr) // string "array" シフト/シフト解除メソッドは、配列全体の番号を付け直す必要があるため、時間がかかります。 スプライス方法によっても番号付けが変更される場合があります。 結果はどうなるでしょうか? なぜ? arr = ["a", "b"] arr.push(function() (alert(this) )) arr() // ? 配列はオブジェクトなので、arr ..実際には、obj などのオブジェクトに対するメソッド呼び出しです。 方法: arr() // arr() と同じ // 構文的には間違っていますが、概念的には同じです: arr.2() // obj.method() と同じスタイルで書き直されました この場合、 this = arr が関数に渡されます。 arr の内容が出力されます。 arr = ["a", "b"] arr.push(function() (alert(this) )) arr() // "a","b",function length プロパティを使用すると、JavaScript の配列のサイズではなく、最後のインデックス + 1 を取得できます。 これは、インデックスに「ギャップ」がある疎な配列について話しているときに重要です。 次の例では、空の Fruit に 2 つの要素を追加しますが、長さの値は 100 のままです。 var フルーツ = // 空の配列 フルーツ = "桃" フルーツ = "リンゴ"alert(fruits.length) // 100 (ただし、配列には 2 つの要素しかありません) スパース配列を出力しようとすると、ブラウザは欠落しているインデックス値を空の要素として返します。 var Fruits = // 空の配列 Fruits = "Peach" Fruits = "Apple"alert(fruits) // ,Peach,Apple (またはそのようなもの) ただし、配列は 2 つのキーを持つオブジェクトです。 欠損値はスペースを取りません。 スパース配列は、配列メソッドが適用されると奇妙な動作をします。 彼らはインデックスが欠落していることを知りません。 var Fruits = Fruits = "Peach" Fruits = "Apple" alter(fruits.pop()) // "Apple" をポップします (インデックス 9 に) alter(fruits.pop()) // 指定されていない要素をポップします (インデックス 8 に) ) スパース配列は避けるようにしてください。 いずれにせよ、彼らの手法は正常に機能しません。 代わりにオブジェクトを使用してください。 ご存知のとおり、配列はオブジェクトなので、値を削除するには delete を使用できます。 var arr = ["Go", "to", "home"] delete arr // 今、 arr = ["Go", unknown, "home"] alter(arr) // 定義されていません 値が削除されたことがわかりますが、配列には指定されていない要素が含まれているため、期待どおりには削除されません。 delete 演算子はキーと値のペアを削除するだけです。 当然のことながら、配列は単なるハッシュであるため、削除された要素の位置は不定になります。 ほとんどの場合、インデックス間に「穴」を残さずに要素を削除する必要があります。 これに役立つ別の方法があります。 splice メソッドは要素を削除し、JavaScript 多次元配列に置き換えることができます。 その構文は次のとおりです。 arr.splice(インデックス, deleteCount[, elem1, ..., elemN]) インデックスから始まる deleteCount 要素を削除し、その場所に elem1、...、elemN を挿入します。 いくつかの例を見てみましょう。 var arr = ["Go", "to", "home"] arr.splice(1, 1) // インデックス 1 から始まる 1 つの要素を削除します alter(arr.join(",")) // ["Go " 、「ホーム」] (1 つの要素が削除されました) したがって、splice を使用して配列から 1 つの要素を削除できます。 配列要素番号はスペースを埋めるためにシフトされます。 var arr = ["Go", "to", "home"] arr.splice(0, 1) // インデックス 0 から開始して 1 つの要素を削除しますalert(arr) // "to" が最初の要素になりました 次の例は、要素を置換する方法を示しています。 splice メソッドは、削除された要素の配列を返します。 var arr = [「行く」、「行く」、「家」、「今」]; // 最初の 2 つの要素を削除します var selected = arr.splice(0, 2) alter(removed) // "Go", "to"<-- массив удаленных элементов
splice может вставлять элементы, задайте 0 для deleteCount.
var arr = ["Go", "to", "home"];
// со второй позиции
// удаляем 0
// и вставляем "my", "sweet"
arr.splice(2, 0, "my", "sweet")
alert(arr) // "Go", "to", "my", "sweet", "home" このメソッドでは、配列の末尾から数えられる負のインデックスも使用できます。 var arr = // 要素 -1 (最後から 2 番目) の場合 // 0 個の要素を削除し、 // 3 と 4 を挿入します arr.splice(-1, 0, 3, 4) alter(arr) // 1,2,3, 4.5 オブジェクトには className プロパティが含まれており、これにはスペースで区切られたクラス名が含まれます。 var obj = (クラス名: "メニューを開く") クラス cls が指定されている場合はそれを削除する関数 RemoveClass(obj, cls) を作成します。 RemoveClass(obj, "open") // obj.className="menu" RemoveClass(obj, "blabla") // 変更なし (削除するクラスはありません) className を複数の部分に分割し、これらの部分をループする必要があります。 一致するものが見つかった場合は、オブジェクトの JavaScript 配列から削除され、最後に再度追加されます。 これを少し最適化してみましょう。 function RemoveClass(elem, cls) (for(var c = elem.className.split(" "), i=c.length-1; i>=0; i--) (if (c[i] == cls) ) c.splice(i,1) ) elem.className = c.join(" ") ) var obj = ( className: "メニューを開く" ) RemoveClass(obj, "open") RemoveClass(obj, "blabla") アラート(obj.className) // メニュー 上の例では、変数 c がループの先頭に設定され、i がその最後のインデックスに設定されます。 ループ自体は逆方向に実行され、条件 i>=0 で終了します。 これは、 i>=0 が i よりも速くチェックされるために行われます。 これにより、 c でのプロパティの検索が高速化されます。 配列の一部を抽出するには、slice(begin[, end]) メソッドを使用します。 var arr = ["Why", "learn", "JavaScript"]; var arr2 = arr.slice(0,2) // 0 から始まる 2 つの要素を受け取りますalert(arr2.join(", ")) // 「学習してください」 このメソッドは JavaScript の配列の要素数を変更するのではなく、その一部をコピーすることに注意してください。 2 番目の引数を省略すると、特定のインデックスで始まるすべての要素を取得できます。 var arr = [「なぜ」、「学ぶ」、「JavaScript」]; var arr2 = arr.slice(1) // 1 から始まるすべての要素を取得しますalert(arr2.join(", ")) // "JavaScript を学びましょう" このメソッドは、 String#slice と同様に、負のインデックスをサポートします。 もう 1 つの便利な方法は reverse です。 「」のようなドメインの最後の部分を取得したいとします。 コム" から " my.site.com」 その方法は次のとおりです。 var ドメイン = "my.site.com" var last = ドメイン.split(".").reverse() アラート(最後) JavaScript 配列は、メソッドを呼び出して結果の配列から要素を取得するための複雑な構文 (reverse()) をサポートしていることに注意してください。 reverse() のような長い呼び出しを作成できます 0] arr.sort() アラート(arr) // 1, 15, 2 上記のコードを実行します。 1、15、2の順になります。 これは、このメソッドがすべてを文字列に変換し、デフォルトで辞書順を使用するためです。自己管理タスク
解決
自己管理タスク
解決
結合して分割する
自己管理タスク
解決
長さを使用して配列をトリミングする
配列はオブジェクトですが、これは何を意味するのでしょうか?
数値以外の配列キー
したがって、shift/unshift は Push/pop よりも遅くなります。 配列が大きくなるほど、JavaScript が配列を並べ替えるのにかかる時間が長くなります。 自己管理タスク
解決
スパース配列、長さの説明
配列からの削除
スプライス方法
自己管理タスク
解決
スライス法
逆の方法