Ein Array-Objekt stellt eine Sammlung von Elementen dar. Es hilft bei der Verwaltung großer Datenmengen, um die Verwechslung mehrerer Variablen zu vermeiden und diese so zu sortieren. Wenn der Benutzer eine zusätzliche Methode und Eigenschaft auf das Array-Objekt anwenden möchte, muss er diese neue Eigenschaft/Methode nicht einzeln auf jedes Element anwenden. Stattdessen kann dies effektiv durch die Verwendung des JavaScript-Arrays erfolgen. Prototyp ' Konstrukteur. Dieser Konstruktor hilft beim Anwenden der neuen Methoden und Eigenschaften auf das gewünschte Array-Objekt.
In dieser Anleitung wird die Verwendung des Array-„Prototyp“-Konstruktors in JavaScript erläutert.
Wie verwende ich den Array-„Prototyp“-Konstruktor in JavaScript?
Das Array „ Prototyp Der Konstruktor wird verwendet, um mithilfe der JavaScript-Funktion neue Methoden und Eigenschaften zu einem Array-Objekt hinzuzufügen. Es wendet die konstruierte Eigenschaft standardmäßig auf alle Array-Werte als Namen und Wert an.
Syntax
Array.prototype.name = Wert
In der obigen Syntax: „ Name ” spezifiziert die neu hinzugefügte Eigenschaft mit ihrem „ Wert ” das gilt für das gesamte Array-Objekt.
Lassen Sie uns die oben definierte Eigenschaft mithilfe ihrer Syntax praktisch verwenden.
HTML Quelltext
Schauen Sie sich zunächst den angegebenen HTML-Code an:
< P > Der 'Prototyp' Konstruktor hilft In die Hinzufügung der neuen Methoden / Eigenschaften für das angegebene Array ( ) Objekt. P >< Taste onclick = „jsFunc()“ > Holen Sie sich jede Stringlänge Taste >
< P Ausweis = 'Probe' > P >
< P Ausweis = 'für' > P >
In den obigen Codezeilen:
- Der ' Das Tag „gibt“ die Absatzanweisung an.
- Der '
Das Tag „bettet eine Schaltfläche mit einem „onclick“-Ereignis ein, um beim Klicken auf die Schaltfläche die angegebene Funktion „jsFunc()“ aufzurufen. - Die letzten zwei ' „Tags fügen leere Absätze mit den ihnen zugewiesenen IDs „sample“ bzw. „para“ hinzu.
Notiz: Dieser HTML-Code wird in allen Beispielen in diesem Handbuch befolgt.
Beispiel 1: Anwenden des „Prototyp“-Konstruktors zum Zählen der Array-Objektlänge durch Hinzufügen einer neuen Methode
In diesem Beispiel wird der „Prototyp“-Konstruktor verwendet, um mithilfe einer neu hinzugefügten Methode die Länge jeder Zeichenfolge in einem Array-Objekt zu zählen.
JavaScript-Code
Folgen Sie dem angegebenen JavaScript-Code:
< Skript >Array.prototype.stringLength = Funktion ( ) {
für ( wobei t = 0 ; T < this.length; t++ ) {
Das [ T ] = das [ T ] .Länge;
}
} ;
Funktion jsFunc ( ) {
var str = [ „HTML“ , „CSS“ , „JavaScript“ ] ;
document.getElementById ( 'Probe' ) .innerHTML = str;
str.stringLength ( ) ;
document.getElementById ( 'für' ) .innerHTML = str;
}
Skript >
In den obigen Codezeilen:
- Wenden Sie die grundlegende Syntax des Arrays an „ Prototyp „Konstruktor, der eine neue Methode hinzufügt“ String-Länge ” Definieren einer Funktion.
- Als nächstes wird in der Funktionsdefinition das „ für Die Schleife wird über alle Indizes eines Array-Objekts iteriert, um deren Länge mithilfe der Eigenschaft „length“ zu ermitteln.
- Danach wird das „ jsFunc() „definiert ein Array-Objekt, das in der Variablen „str“ gespeichert ist.
- Dann ist die ' document.getElementById () Die Methode greift über ihre ID „sample“ auf den ersten leeren Absatz zu, um das Array-Objekt „str“ anzuzeigen.
- Zuletzt verknüpfen Sie das Array-Objekt „str“ mit dem „ String-Länge() ”-Methode, um die Zeichenfolgenlänge jedes Array-Index zu zählen und sie dann an den nächsten leeren Absatz anzuhängen, dessen ID „para“ ist.
Ausgang
Hier zeigt die Ausgabe die Länge jedes Strings des Ziel-Array-Objekts mit Hilfe der neu hinzugefügten Methode „stringLength()“ über den Array-Konstruktor „prototype“.
Beispiel 2: Anwenden des „Prototype“-Konstruktors, um eine neue Methode „myUcase“ zu erstellen und sie auf ein Array-Objekt anzuwenden
In diesem Beispiel wird der „Prototype“-Konstruktor verwendet, um eine neue „myUcase“-Methode zu erstellen und diese auf das Ziel-Array-Objekt anzuwenden.
JavaScript-Code
Gehen wir den unten aufgeführten JavaScript-Code durch:
< Skript >Array.prototype.myUcase = Funktion ( ) {
für ( lassen t = 0 ; T < this.length; t++ ) {
Das [ T ] = das [ T ] .toUpperCase ( ) ;
}
} ;
Funktion jsFunc ( ) {
const arrObj = [ „html“ , „css“ , „JavaScript“ , 'Reagieren' ] ;
arrObj.myUcase ( ) ;
document.getElementById ( 'Probe' ) .innerHTML = arrObj;
}
Skript >
Hier erstellt der „Prototyp“-Konstruktor eine neue Methode mit dem Namen „ myUcase ” das verwendet das „ Großbuchstaben ”-Methode in der Funktionsdefinition, um jede Zeichenfolge des Array-Objekts in „UpperCase“ umzuwandeln. In der letztgenannten Funktion wird die benutzerdefinierte Methode ebenfalls für das Array aufgerufen.
Ausgang
Wie Sie sehen, nutzt jeder String eines Array-Objekts aufgrund der angewendeten Methode „myUcase()“ einen Klick auf eine Schaltfläche aus.
Abschluss
Um das Array zu verwenden „ Prototyp ”-Konstruktor in JavaScript, verknüpfen Sie die neue Methode/Eigenschaft damit. Es gibt eine Funktion an, die die Funktionalitäten für eine andere Funktion auf benutzerdefinierte Weise gemäß den Anforderungen definiert. In diesem Leitfaden wurde kurz die Verwendung des Array-„Prototyp“-Konstruktors in JavaScript erläutert.