Maison >interface Web >js tutoriel >Expliquer le but de l'opérateur 'in' en JavaScript

Expliquer le but de l'opérateur 'in' en JavaScript

WBOYavant: 2023-08-24 14:25:091220parcourir

解释 JavaScript 中“in”运算符的用途

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!

JavaScript Object 运算符算术运算符赋值运算符构造函数字符串 Length 对象 typeof

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Le programme JavaScript supprime les nœuds de rechange de la liste chaînéeArticle suivant：Le programme JavaScript supprime les nœuds de rechange de la liste chaînée

Articles Liés

Voir plus