Expliquer le but de l'opérateur 'in' en JavaScript
Ce tutoriel vous apprendra l'opérateur "in" en JavaScript. Il existe de nombreux opérateurs disponibles en JavaScript, tels que les opérateurs arithmétiques, les opérateurs d'affectation, les opérateurs d'égalité, etc. pour effectuer des opérations mathématiques. L'opérateur "in" en fait également partie et nous pouvons l'utiliser pour rechercher les propriétés d'un objet.
Avant de commencer, permettez-moi de vous poser une question. Lors du codage en JavaScript, avez-vous déjà eu besoin de vérifier si une propriété d'objet existe ? Si oui, comment l’avez-vous géré ? La réponse est simple, vous pouvez utiliser l'opérateur "in", qui renvoie une valeur booléenne selon que l'objet contient ou non la propriété.
Vérifiez si une propriété d'objet existe en utilisant l'opérateur "in"
L'opérateur "in" fonctionne comme les autres opérateurs. Cela nécessite deux opérandes. Les propriétés de l'objet servent d'opérande de gauche et l'objet lui-même sert d'opérande de droite.
Grammaire
Vous pouvez vérifier l'existence d'une propriété d'objet en utilisant l'opérateur "in" selon la syntaxe suivante.
let object = {
property: value,
}
let ifExist = "property" in object;
Dans la syntaxe ci-dessus, vous pouvez voir comment un objet contient des propriétés et leurs valeurs. Les valeurs peuvent être des nombres, des chaînes, des booléens, etc. La variable ifExist stocke une valeur booléenne vraie ou fausse selon que la propriété existe dans l'objet.
Exemple 1
Dans cet exemple, nous créons des objets avec des propriétés et des valeurs différentes. De plus, l'objet contient des méthodes. Après cela, nous utilisons l'opérateur "in" pour vérifier si l'attribut existe dans l'objet.
Dans l'exemple de sortie, l'utilisateur peut observer que l'opérateur "in" renvoie vrai pour la propriété1 et la propriété4, mais renvoie faux pour la propriété7 car il n'existe pas dans l'objet.
<html>
<body>
<h3>Using the <i> in operator </i> to check for the existence of the property in the object.</h3>
<div id = "output"> </div>
<script>
let output = document.getElementById("output");
let object = {
property1: "value",
property2: 20,
property3: false,
property4: () => {
console.log("This is a sample function.");
},
};
let ifExist = "property1" in object;
output.innerHTML +=
"The property1 exist in the object " + ifExist + "<br/>";
ifExist = "property4" in object;
output.innerHTML +=
"The property4 exist in the object " + ifExist + "<br/>";
ifExist = "property7" in object;
output.innerHTML +=
"The property7 exist in the object " + ifExist + "<br/>";
</script>
</body>
</html>
En JavaScript, chaque objet a son prototype. L'objet chaîne prototype contient en fait certaines méthodes et propriétés dans l'objet. Cependant, nous n'avons pas encore ajouté ces propriétés à l'objet, mais JavaScript les ajoute par défaut. Par exemple, les prototypes de tableau et de chaîne contiennent une propriété « longueur » et le prototype d'objet contient une propriété « toString ».
Exemple 2
Dans l'exemple ci-dessous, nous avons créé la classe et y avons défini le constructeur pour initialiser les propriétés de l'objet. De plus, nous avons défini la méthode getSize() dans la classe table.
Après cela, nous utilisons le constructeur pour créer un objet de la classe table. Nous utilisons l'opérateur "in" pour vérifier si la propriété existe dans le prototype de l'objet. En JavaScript, chaque objet possède une méthode toString() dans son prototype, c'est pourquoi elle renvoie true.
<html>
<body>
<h3>Using the <i> in operator </i> to check for the existence of the property in the object prototype</h3>
<div id = "output"> </div>
<script>
let output = document.getElementById("output");
// creating the table class
class table {
// constructor function
constructor(prop1, prop2, prop3) {
this.prop1 = prop1;
this.prop2 = prop2;
this.prop3 = prop3;
}
getSize() {
return 10;
}
}
// creating the object of the table class
let tableObjet = new table("blue", "wood", "four drawers");
// check if a property exists in the object
let ifExist = "prop1" in tableObjet;
output.innerHTML +=
"The prop1 exists in the constructor properties of tableObject: " +
ifExist + "</br>";
// some properties also exist in the object prototype chain.
ifExist = "length" in tableObjet;
output.innerHTML +=
"The length property exists in the constructor properties of tableObject: "
+ ifExist + "</br>";
ifExist = "toString" in tableObjet;
output.innerHTML +=
"The toString Property exists in the constructor properties of tableObject: "
+ ifExist + "</br>";
</script>
</body>
</html>
Vérifiez si l'index existe dans le tableau à l'aide de l'opérateur in
Nous ne pouvons utiliser l'opérateur "in" qu'avec des objets. Un tableau est également une instance d'un objet. L'utilisateur peut vérifier le type de tableau à l'aide de l'opérateur instanceOf ou typeOf, qui renvoie « Object ». Par conséquent, les clés du tableau sont les indices du tableau et les valeurs des clés sont les valeurs du tableau.
Ici, nous pouvons utiliser l'opérateur « in » pour vérifier si l'index existe dans le tableau. Si présent, nous pouvons accéder à la valeur du tableau pour éviter l’exception arrayOutOfBound.
Grammaire
L'utilisateur peut vérifier si l'index existe dans le tableau en suivant la syntaxe suivante -
let array = [10, 20, 30]; let ifExist = 2 in array;
Dans la syntaxe ci-dessus, le 2 écrit avant l'opérateur est l'index du tableau, pas la valeur.
Exemple 3
Dans l'exemple ci-dessous, nous avons créé un tableau et vérifié le type du tableau à l'aide de l'opérateur typeOf, qui renvoie "Object".
De plus, nous avons utilisé l'opérateur "in" pour vérifier si les propriétés d'index et de longueur du tableau sont présentes dans le prototype du tableau.
<html>
<body>
<h2>Using the <i> in operator </i> to check whether the array index exists.</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById("output");
let array = [10, 20, "Hello", "Hi", true];
output.innerHTML += "The type of the array is " + typeof array + "<br/>";
let ifExist = 2 in array;
output.innerHTML +=
"The index 2 exist in the array is " + ifExist + "<br/>";
ifExist = 7 in array;
output.innerHTML +=
"The index 7 exist in the array is " + ifExist + "<br/>";
ifExist = "length" in array;
output.innerHTML +=
"The length property exist in the array is " + ifExist + "<br/>";
</script>
</body>
</html>
Ce tutoriel nous apprend à utiliser l'opérateur "in" avec des objets et des tableaux. Dans un objet, l'utilisateur peut vérifier si une propriété existe, et dans un tableau, l'utilisateur peut vérifier si un index existe à l'aide de l'opérateur "in".
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Remplacer les caractères de chaîne en javascript
Mar 11, 2025 am 12:07 AM
Explication détaillée de la méthode de remplacement de la chaîne JavaScript et de la FAQ Cet article explorera deux façons de remplacer les caractères de chaîne dans JavaScript: le code JavaScript interne et le HTML interne pour les pages Web. Remplacer la chaîne dans le code JavaScript Le moyen le plus direct consiste à utiliser la méthode Remplace (): str = str.replace ("trouver", "remplacer"); Cette méthode remplace uniquement la première correspondance. Pour remplacer toutes les correspondances, utilisez une expression régulière et ajoutez le drapeau global G: str = str.replace (/ fi
jQuery Vérifiez si la date est valide
Mar 01, 2025 am 08:51 AM
Des fonctions JavaScript simples sont utilisées pour vérifier si une date est valide. fonction isValidDate (s) { var bits = s.split ('/'); var d = new Date (bits [2] '/' bits [1] '/' bits [0]); return !! (d && (d.getMonth () 1) == bits [1] && d.getDate () == Number (bits [0])); } //test var
jQuery obtient un rembourrage / marge d'élément
Mar 01, 2025 am 08:53 AM
Cet article explique comment utiliser jQuery pour obtenir et définir les valeurs de marge et de marge intérieures des éléments DOM, en particulier les emplacements spécifiques de la marge extérieure et des marges intérieures de l'élément. Bien qu'il soit possible de définir les marges intérieures et extérieures d'un élément à l'aide de CSS, l'obtention de valeurs précises peut être délicate. // installation $ ("div.header"). CSS ("marge", "10px"); $ ("div.header"). css ("padding", "10px"); Vous pourriez penser que ce code est
10 onglets jQuery Accordion
Mar 01, 2025 am 01:34 AM
Cet article explore dix onglets jQuery exceptionnels et accordéons. La principale différence entre les onglets et les accordéons réside dans la façon dont leurs panneaux de contenu sont affichés et cachés. Plongeons ces dix exemples. Articles connexes: 10 plugins de l'onglet jQuery
10 vaut la peine de vérifier les plugins jQuery
Mar 01, 2025 am 01:29 AM
Découvrez dix plugins jQuery exceptionnels pour élever le dynamisme et l'attrait visuel de votre site Web! Cette collection organisée offre diverses fonctionnalités, de l'animation d'image aux galeries interactives. Explorons ces outils puissants: Related Posts: 1
Http débogage avec le nœud et le http-console
Mar 01, 2025 am 01:37 AM
HTTP-Console est un module de nœud qui vous donne une interface de ligne de commande pour exécuter les commandes HTTP. C'est idéal pour le débogage et voir exactement ce qui se passe avec vos demandes HTTP, qu'elles soient faites contre un serveur Web, Web Serv
Tutoriel de configuration de l'API de recherche Google personnalisé
Mar 04, 2025 am 01:06 AM
Ce tutoriel vous montre comment intégrer une API de recherche Google personnalisée dans votre blog ou site Web, offrant une expérience de recherche plus raffinée que les fonctions de recherche de thème WordPress standard. C'est étonnamment facile! Vous pourrez restreindre les recherches à Y
jQuery Ajouter une barre de défilement à div
Mar 01, 2025 am 01:30 AM
L'extrait de code jQuery suivant peut être utilisé pour ajouter des barres de défilement lorsque le contenu DIV dépasse la zone de l'élément de conteneur. (Pas de démonstration, veuillez le copier directement sur Firebug) // d = document // w = fenêtre // $ = jQuery var contentArea = $ (this), wintop = contentArea.scrollTop (), docheight = $ (d) .height (), winheight = $ (w) .height (), divheight = $ ('# c
