Un oggetto Array rappresenta una raccolta di elementi. Aiuta a mantenere un ampio set di dati per evitare la confusione di più variabili, ordinandole in tal modo. Se l'utente desidera applicare qualsiasi metodo e proprietà aggiuntivi all'oggetto Array, non è necessario applicare quella nuova proprietà/metodo uno per uno a ciascun elemento. Invece, può essere fatto in modo efficace utilizzando l'array JavaScript ' prototipo 'costruttore. Questo costruttore aiuta ad applicare i nuovi metodi e proprietà all'oggetto Array desiderato.
Questa guida spiega l'uso del costruttore 'prototipo' di Array in JavaScript.
Come utilizzare il costruttore 'prototipo' dell'array in JavaScript?
La schiera” prototipo Il costruttore ' viene utilizzato per aggiungere nuovi metodi e proprietà a un oggetto Array con l'aiuto della funzione JavaScript. Applica la proprietà costruita per tutti i valori dell'array, come nome e valore per impostazione predefinita.
Sintassi
Array.prototype.name = valore
Nella sintassi precedente, “ nome ” specifica la proprietà appena aggiunta con il suo “ valore ” che si applica all'intero oggetto Array.
Usiamo praticamente la proprietà sopra definita con l'aiuto della sua sintassi.
Codice HTML
Innanzitutto, dai un'occhiata al codice HTML dichiarato:
< P > IL 'prototipo' il costruttore aiuta In l'aggiunta dei nuovi metodi / proprietà all'Array specificato ( ) oggetto. P >< pulsante al clic = 'funzionejs()' > Ottieni ogni lunghezza di stringa pulsante >
< P id = 'campione' > P >
< P id = 'per' > P >
Nelle righe di codice sopra:
- IL ' Il tag ” specifica l'istruzione del paragrafo.
- IL '
Il tag incorpora un pulsante con un evento 'onclick' per richiamare la funzione specificata 'jsFunc()' al clic del pulsante. - Gli ultimi due” I tag ” aggiungono paragrafi vuoti con i rispettivi ID assegnati “sample” e “para”, rispettivamente.
Nota: Questo codice HTML è seguito in tutti gli esempi forniti in questa guida.
Esempio 1: applicazione del costruttore 'prototipo' per contare la lunghezza dell'oggetto matrice aggiungendo un nuovo metodo
Questo esempio utilizza il costruttore 'prototipo' per contare la lunghezza di ogni stringa all'interno di un oggetto Array con l'aiuto di un metodo appena aggiunto.
codice javascript
Segui il codice JavaScript fornito:
< copione >Array.prototype.stringLength = funzione ( ) {
per ( dove t = 0 ; T < questa.lunghezza; t++ ) {
Questo [ T ] = questo [ T ] .lunghezza;
}
} ;
funzione jsFunc ( ) {
var str = [ 'HTML' , 'CSS' , 'Javascript' ] ;
document.getElementById ( 'campione' ) .innerHTML = str;
str.stringLength ( ) ;
document.getElementById ( 'per' ) .innerHTML = str;
}
copione >
Nelle righe di codice precedenti:
- Applicare la sintassi di base dell'Array ' prototipo ” costruttore che aggiunge un nuovo metodo “ stringLength ” definizione di una funzione.
- Successivamente, nella definizione della funzione, il ' per Il ciclo ” viene iterato su tutti gli indici di un oggetto Array per trovare la loro lunghezza utilizzando la proprietà “length”.
- Dopodiché il “ jsFunc() ” definisce un oggetto Array memorizzato nella variabile “str”.
- Poi il ' document.getElementById () ” accede al primo paragrafo vuoto tramite il suo id “sample” per visualizzare l'oggetto Array “str”.
- Infine, associa l'oggetto Array 'str' con il ' stringaLunghezza() ” per contare la lunghezza della stringa di ogni indice dell'array e quindi aggiungerla al successivo paragrafo vuoto il cui id è “para”.
Produzione
Qui, l'output mostra la lunghezza di ciascuna stringa dell'oggetto Array di destinazione con l'aiuto del metodo 'stringLength()' appena aggiunto tramite il costruttore 'prototipo' di Array.
Esempio 2: applicazione del costruttore 'prototipo' per creare un nuovo metodo 'myUcase' e applicarlo a un oggetto matrice
Questo esempio utilizza il costruttore 'prototipo' per creare un nuovo metodo 'myUcase' e lo applica all'oggetto Array di destinazione.
codice javascript
Esaminiamo il codice JavaScript indicato di seguito:
< copione >Array.prototype.myUcase = funzione ( ) {
per ( permettere t = 0 ; T < questa.lunghezza; t++ ) {
Questo [ T ] = questo [ T ] .toUpperCase ( ) ;
}
} ;
funzione jsFunc ( ) {
const arrObj = [ 'html' , 'css' , 'Javascript' , 'Reagire' ] ;
arrObj.myUcase ( ) ;
document.getElementById ( 'campione' ) .innerHTML = arrObj;
}
copione >
Qui, il costruttore 'prototipo' crea un nuovo metodo chiamato ' myUcase ” che usa il “ Maiuscolo ” nella definizione della funzione per convertire ogni stringa dell'oggetto Array in “UpperCase”. In quest'ultima funzione, anche il metodo personalizzato viene richiamato su Array.
Produzione
Come visto, ogni stringa di un oggetto Array capitalizza su un clic del pulsante a causa del metodo 'myUcase ()' applicato.
Conclusione
Per utilizzare l'array ' prototipo ” costruttore in JavaScript, associare il nuovo metodo/proprietà con esso. Specifica una funzione che definisce le funzionalità per un'altra funzione in modo personalizzato secondo i requisiti. Questa guida ha spiegato brevemente l'uso del costruttore 'prototipo' di Array in JavaScript.