Un objet Array représente une collection d'éléments. Cela aide à maintenir un grand ensemble de données pour éviter la confusion de plusieurs variables, les triant ainsi. Si l'utilisateur souhaite appliquer une méthode et une propriété supplémentaires à l'objet Array, il n'a pas besoin d'appliquer cette nouvelle propriété/méthode une par une à chaque élément. Au lieu de cela, cela peut être fait efficacement en utilisant le JavaScript Array ' prototype ” constructeur. Ce constructeur aide à appliquer les nouvelles méthodes et propriétés à l'objet Array souhaité.
Ce guide explique l'utilisation du constructeur 'prototype' Array en JavaScript.
Comment utiliser le constructeur 'prototype' Array en JavaScript ?
Le tableau ' prototype ” Le constructeur est utilisé pour ajouter de nouvelles méthodes et propriétés à un objet Array à l'aide de la fonction JavaScript. Il applique la propriété construite pour toutes les valeurs de tableau, comme son nom et sa valeur par défaut.
Syntaxe
Array.prototype.name = valeur
Dans la syntaxe ci-dessus, ' nom ' spécifie la propriété nouvellement ajoutée avec son ' valeur ” qui s'applique à l'ensemble de l'objet Array.
Utilisons la propriété définie ci-dessus pratiquement à l'aide de sa syntaxe.
Code HTML
Tout d'abord, jetez un œil au code HTML indiqué :
< p > Le 'prototype' le constructeur aide dans l'ajout des nouvelles méthodes / propriétés au tableau donné ( ) objet. p >< bouton sur clic = 'jsFunc()' > Obtenir chaque longueur de chaîne bouton >
< p identifiant = 'goûter' > p >
< p identifiant = 'pour' > p >
Dans les lignes de code ci-dessus :
- Le ' La balise ” spécifie l'instruction du paragraphe.
- Le '
» intègre un bouton avec un événement « onclick » pour invoquer la fonction spécifiée « jsFunc() » lors du clic sur le bouton. - Les deux derniers ' Les balises ” ajoutent des paragraphes vides avec leurs identifiants assignés “sample” et “para”, respectivement.
Note: Ce code HTML est suivi dans tous les exemples donnés dans ce guide.
Exemple 1 : Application du constructeur 'prototype' pour compter la longueur de l'objet tableau en ajoutant une nouvelle méthode
Cet exemple utilise le constructeur 'prototype' pour compter la longueur de chaque chaîne à l'intérieur d'un objet Array à l'aide d'une méthode nouvellement ajoutée.
Code Javascript
Suivez le code JavaScript donné :
< scénario >Array.prototype.stringLength = fonction ( ) {
pour ( où t = 0 ; t < cette.longueur ; t++ ) {
ce [ t ] = ça [ t ] .longueur;
}
} ;
fonction jsFunc ( ) {
var chaîne = [ 'HTML' , 'CSS' , 'JavaScript' ] ;
document.getElementById ( 'goûter' ) .innerHTML = str;
str.stringLength ( ) ;
document.getElementById ( 'pour' ) .innerHTML = str;
}
scénario >
Dans les lignes de code ci-dessus :
- Appliquer la syntaxe de base du Array ' prototype « constructeur qui ajoute une nouvelle méthode » Longueur de chaine » définissant une fonction.
- Ensuite, dans la définition de la fonction, le ' pour ” est itérée sur tous les indices d'un objet Array pour trouver leur longueur à l'aide de la propriété “length”.
- Après cela, le « jsFunc() » définit un objet Array stocké dans la variable « str ».
- Puis le ' document.getElementById () » accède au premier paragraphe vide via son id « sample » pour afficher l'objet Array « str ».
- Enfin, associez l'objet Array 'str' à l'objet ' Longueur de chaine() ” pour compter la longueur de chaîne de chaque index de tableau, puis l'ajouter dans le paragraphe vide suivant dont l'id est “para”.
Sortir
Ici, la sortie montre la longueur de chaque chaîne de l'objet Array cible à l'aide de la méthode 'stringLength()' nouvellement ajoutée via le constructeur Array 'prototype'.
Exemple 2 : Application du constructeur 'prototype' pour créer une nouvelle méthode 'myUcase' et l'appliquer à un objet tableau
Cet exemple utilise le constructeur 'prototype' pour créer une nouvelle méthode 'myUcase' et l'applique à l'objet Array cible.
Code Javascript
Passons en revue le code JavaScript ci-dessous :
< scénario >Array.prototype.myUcase = fonction ( ) {
pour ( laisser t = 0 ; t < cette.longueur ; t++ ) {
ce [ t ] = ça [ t ] .toUpperCase ( ) ;
}
} ;
fonction jsFunc ( ) {
const arrObj = [ 'html' , 'css' , 'JavaScript' , 'Réagir' ] ;
tabObj.myUcase ( ) ;
document.getElementById ( 'goûter' ) .innerHTML = tabObj ;
}
scénario >
Ici, le constructeur 'prototype' crée une nouvelle méthode nommée ' monUcase ' qui utilise le ' Majuscule ” dans la définition de la fonction pour convertir chaque chaîne de l'objet Array en “UpperCase”. Dans cette dernière fonction, la méthode personnalisée est également invoquée sur le Array.
Sortir
Comme on le voit, chaque chaîne d'un objet Array capitalise sur un clic de bouton en raison de la méthode 'myUcase()' appliquée.
Conclusion
Pour utiliser le tableau ' prototype ” constructeur en JavaScript, associez-lui la nouvelle méthode/propriété. Il spécifie une fonction qui définit les fonctionnalités d'une autre fonction de manière personnalisée selon les exigences. Ce guide explique brièvement l'utilisation du constructeur 'prototype' Array en JavaScript.