suchen

Heim >Web-Frontend >js-Tutorial >Erklären Sie den Zweck des „in'-Operators in JavaScript

Erklären Sie den Zweck des „in'-Operators in JavaScript

WBOY
WBOYnach vorne
2023-08-24 14:25:091225Durchsuche

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

In diesem Tutorial lernen Sie den „in“-Operator in JavaScript kennen. In JavaScript stehen viele Operatoren zur Verfügung, z. B. arithmetische Operatoren, Zuweisungsoperatoren, Gleichheitsoperatoren usw. zur Durchführung mathematischer Operationen. Der „in“-Operator ist ebenfalls einer davon und wir können ihn verwenden, um Eigenschaften von einem Objekt zu finden.

Bevor ich anfange, möchte ich Ihnen eine Frage stellen. Mussten Sie beim Codieren in JavaScript jemals überprüfen, ob eine Objekteigenschaft vorhanden ist? Wenn ja, wie sind Sie damit umgegangen? Die Antwort ist einfach: Sie können den „in“-Operator verwenden, der einen booleschen Wert zurückgibt, basierend darauf, ob das Objekt die Eigenschaft enthält.

Überprüfen Sie mithilfe des „in“-Operators, ob eine Objekteigenschaft vorhanden ist

Der „in“-Operator funktioniert genauso wie andere Operatoren. Es erfordert zwei Operanden. Als linker Operand dienen die Objekteigenschaften und als rechter Operand das Objekt selbst.

Grammatik

Sie können die Existenz einer Objekteigenschaft mithilfe des „in“-Operators gemäß der folgenden Syntax überprüfen. 

let object = {
   property: value,
}
let ifExist = "property" in object;

In der obigen Syntax können Sie sehen, wie ein Objekt Eigenschaften und deren Werte enthält. Werte können Zahlen, Zeichenfolgen, boolesche Werte usw. sein. Die Variable ifExist speichert einen wahren oder falschen booleschen Wert, je nachdem, ob die Eigenschaft im Objekt vorhanden ist.

Beispiel 1

In diesem Beispiel erstellen wir Objekte mit unterschiedlichen Eigenschaften und Werten. Darüber hinaus enthält das Objekt Methoden. Danach verwenden wir den „in“-Operator, um zu prüfen, ob das Attribut im Objekt vorhanden ist.

In der Beispielausgabe kann der Benutzer beobachten, dass der „in“-Operator für Eigenschaft1 und Eigenschaft4 „true“ zurückgibt, für Eigenschaft7 jedoch „false“, da er im Objekt nicht vorhanden ist. 

<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>

In JavaScript hat jedes Objekt seinen Prototyp. Das Prototypkettenobjekt enthält tatsächlich einige Methoden und Eigenschaften im Objekt. Allerdings haben wir diese Eigenschaften noch nicht zum Objekt hinzugefügt, aber JavaScript fügt sie standardmäßig hinzu. Beispielsweise enthalten die Array- und String-Prototypen eine „length“-Eigenschaft und der Objektprototyp eine „toString“-Eigenschaft.

Beispiel 2

Im folgenden Beispiel haben wir die Klasse erstellt und darin den Konstruktor definiert, um die Objekteigenschaften zu initialisieren. Zusätzlich haben wir die Methode getSize() in der Tabellenklasse definiert.

Danach erstellen wir mit dem Konstruktor ein Objekt der Tabellenklasse. Wir verwenden den „in“-Operator, um zu prüfen, ob die Eigenschaft im Objektprototyp vorhanden ist. In JavaScript hat jedes Objekt in seinem Prototyp eine toString()-Methode, weshalb es true zurückgibt. 

<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>

Überprüfen Sie mit dem In-Operator, ob der Index im Array vorhanden ist

Wir können den „in“-Operator nur mit Objekten verwenden. Ein Array ist auch eine Instanz eines Objekts. Der Benutzer kann den Operator „instanceOf“ oder „typeOf“ verwenden, um den Array-Typ zu überprüfen. Es wird „Objekt“ zurückgegeben. Daher sind die Schlüssel im Array die Array-Indizes und die Werte der Schlüssel sind die Array-Werte.

Hier können wir den „in“-Operator verwenden, um zu prüfen, ob der Index im Array vorhanden ist. Falls vorhanden, können wir auf den Array-Wert zugreifen, um die Ausnahme „arrayOutOfBound“ zu vermeiden.

Grammatik

Benutzer können überprüfen, ob der Index im Array vorhanden ist, indem sie der folgenden Syntax folgen -

let array = [10, 20, 30];
let ifExist = 2 in array;

In der obigen Syntax ist die vor dem Operator geschriebene 2 der Array-Index, nicht der Wert.

Beispiel 3

Im folgenden Beispiel haben wir ein Array erstellt und den Typ des Arrays mithilfe des TypeOf-Operators überprüft, der „Object“ zurückgibt.

Zusätzlich haben wir den „in“-Operator verwendet, um zu prüfen, ob die Array-Index- und Längeneigenschaften im Array-Prototyp vorhanden sind. 

<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>

In diesem Tutorial lernen wir, wie man den „in“-Operator mit Objekten und Arrays verwendet. In einem Objekt kann der Benutzer prüfen, ob eine Eigenschaft vorhanden ist, und in einem Array kann der Benutzer mithilfe des „in“-Operators prüfen, ob ein Index vorhanden ist.

Das obige ist der detaillierte Inhalt vonErklären Sie den Zweck des „in'-Operators in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript Object 运算符 算术运算符 赋值运算符 构造函数 字符串 Length 对象 typeof
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Das JavaScript-Programm löscht freie Knoten der verknüpften ListeNächster Artikel：Das JavaScript-Programm löscht freie Knoten der verknüpften Liste

In Verbindung stehende Artikel

Mehr sehen