Array オブジェクトは要素のコレクションを表します。これは、複数の変数の混乱を避けるために大規模なデータセットを維持し、それによってそれらを並べ替えるのに役立ちます。ユーザーが追加のメソッドやプロパティを Array オブジェクトに適用したい場合、その新しいプロパティ/メソッドを各要素に 1 つずつ適用する必要はありません。代わりに、JavaScript 配列を使用すると効果的に実行できます。 プロトタイプ 」コンストラクター。このコンストラクターは、新しいメソッドとプロパティを目的の Array オブジェクトに適用するのに役立ちます。
このガイドでは、JavaScript での Array の「プロトタイプ」コンストラクターの使用について説明します。
JavaScript で配列「プロトタイプ」コンストラクターを使用する方法
アレイ」 プロトタイプ コンストラクターは、JavaScript 関数を利用して Array オブジェクトに新しいメソッドとプロパティを追加するために使用されます。構築されたプロパティをすべての配列値に、デフォルトでその名前と値として適用します。
構文
Array.prototype.name = 値
上記の構文では、「 名前 ” は、新しく追加されたプロパティをその “ 価値 」は Array オブジェクト全体に適用されます。
構文を利用して、上で定義したプロパティを実際に使用してみましょう。
HTMLコード
まず、記載されている HTML コードを見てください。
< p > の 'プロトタイプ' コンストラクターが役立ちます の 新しいメソッドの追加 / 指定された配列のプロパティ ( ) 物体。 p >< ボタン クリック時 = 「jsFunc()」 > 各文字列の長さを取得する ボタン >
< p ID = 'サンプル' > p >
< p ID = 'ために' > p >
上記のコード行では次のようになります。
- ” ”タグで段落文を指定します。
- ” <ボタン> 」タグは、ボタンのクリック時に指定された関数「jsFunc()」を呼び出す「onclick」イベントをボタンに埋め込みます。
- 最後の2つ「 ” タグは、それぞれ「sample」と「para」という ID が割り当てられた空の段落を追加します。
ノート： この HTML コードは、このガイドのすべての例で使用されています。
例 1: 新しいメソッドを追加して「プロトタイプ」コンストラクターを適用し、配列オブジェクトの長さをカウントする
この例では、「プロトタイプ」コンストラクターを利用して、新しく追加されたメソッドを利用して Array オブジェクト内の各文字列の長さをカウントします。
JavaScript コード
指定された JavaScript コードに従います。
< 脚本 >Array.prototype.stringLength = 関数 ( ) {
ために ( ここで、t = 0 ; t < この長さ; t++ ) {
これ [ t 】 = これ [ t ] 。長さ;
}
} ;
関数 jsFunc ( ) {
var str = [ 「HTML」 、 「CSS」 、 「ジャバスクリプト」 】 ;
document.getElementById ( 'サンプル' ) .innerHTML = str;
str.stringLength ( ) ;
document.getElementById ( 'ために' ) .innerHTML = str;
}
脚本 >
上記のコード行では次のようになります。
- 配列の基本構文を適用します。 プロトタイプ 「新しいメソッドを追加するコンストラクター」 文字列の長さ 」で関数を定義します。
- 次に、関数定義の「 ために 」ループは、Array オブジェクトのすべてのインデックスに対して反復され、「length」プロパティを使用してその長さを見つけます。
- その後、「 jsFunc() 」は、「str」変数に格納される Array オブジェクトを定義します。
- そうして ' document.getElementById () 」メソッドは、ID「sample」を介して最初の空の段落にアクセスし、Array オブジェクト「str」を表示します。
- 最後に、「str」配列オブジェクトを「 文字列の長さ() 」メソッドを使用して、各配列インデックスの文字列長をカウントし、それを ID が「para」である次の空の段落に追加します。
出力
ここで、出力には、Array の「prototype」コンストラクターを介して新しく追加された「stringLength()」メソッドを使用して、ターゲット Array オブジェクトの各文字列の長さが表示されます。
例 2: 「prototype」コンストラクターを適用して新しいメソッド「myUcase」を作成し、それを配列オブジェクトに適用する
この例では、「prototype」コンストラクターを利用して新しい「myUcase」メソッドを作成し、それをターゲットの Array オブジェクトに適用します。
JavaScript コード
以下の JavaScript コードを見てみましょう。
< 脚本 >Array.prototype.myUcase = 関数 ( ) {
ために ( させて t = 0 ; t < この長さ; t++ ) {
これ [ t 】 = これ [ t 】 .to大文字 ( ) ;
}
} ;
関数 jsFunc ( ) {
const arrObj = [ 「html」 、 「CSS」 、 「ジャバスクリプト」 、 「反応する」 】 ;
arrObj.myUcase ( ) ;
document.getElementById ( 'サンプル' ) .innerHTML = arrObj;
}
脚本 >
ここで、「プロトタイプ」コンストラクターは「」という名前の新しいメソッドを作成します。 myUcase ”を使用する” 大文字 」メソッドを関数定義に追加して、Array オブジェクトの各文字列を「UpperCase」に変換します。後者の関数では、カスタム メソッドが同様に配列に対して呼び出されます。
出力
ご覧のとおり、「myUcase()」メソッドが適用されているため、Array オブジェクトの各文字列はボタンのクリックを利用します。
結論
配列を使用するには「 プロトタイプ JavaScript のコンストラクターに新しいメソッド/プロパティを関連付けます。要件に応じたカスタム方法で別の関数の機能を定義する関数を指定します。このガイドでは、JavaScript での Array の「プロトタイプ」コンストラクターの使用について簡単に説明しました。