Heim > Artikel > Web-Frontend > Wie schreibe ich eine Inline-IF-Anweisung in JavaScript?

Wie schreibe ich eine Inline-IF-Anweisung in JavaScript?

WBOYnach vorne: 2023-09-07 08:01:051145Durchsuche

如何在 JavaScript 中编写内联 IF 语句？

Bedingte Anweisungen sind die wichtigsten und grundlegendsten Konzepte in jeder Programmiersprache. Mit der if-else-Anweisung können wir jeden Codeblock bedingt ausführen. Wir können die Bedingung der if-Anweisung in geschweiften Klammern definieren. Wenn die Bedingung wahr ist, wird der Code des if-Blocks ausgeführt, andernfalls wird der Code des else-Blocks ausgeführt.

Hier zeigen wir, wie if-else-Anweisungen in JavaScript funktionieren.

if (condition) {
   
   // code to execute when the condition becomes true
} else {
   
   // code to execute when the condition becomes false
}

Anhand des obigen Codes können Benutzer die Syntax der if-else-Anweisung verstehen.

Was wäre, wenn ich sagen würde, dass Sie die oben genannten fünf Codezeilen in eine Zeile schreiben könnten? Ja, Sie können dies mithilfe einer Inline-IF-Anweisung tun.

Grammatik

Benutzer können Inline-IF-Anweisungen in JavaScript gemäß der folgenden Syntax verwenden.

Condition? code - block - 1 : code - block - 2

In der obigen Syntax ist die Bedingung ein Ausdruck. Wenn der bedingte Ausdruck wahr ist, wird Codeblock 1 ausgeführt, andernfalls wird Codeblock 2 ausgeführt.

Wenn wir die Inline-If-Anweisung mit der If-Else-Anweisung vergleichen, dann ist Codeblock-1 der Code der If-Anweisung und Codeblock-2 der Code der Else-Anweisung.

Beispiel

Im folgenden Beispiel lernen wir die grundlegende Verwendung der Inline-IF-Anweisung. Wir haben die Bedingung „10===10“ verwendet. Wenn die Bedingung wahr ist, wird „10 ist nicht gleich 10“ ausgegeben, andernfalls wird „10 ist nicht gleich 10“ gedruckt.

In der Ausgabe kann der Benutzer beobachten, dass „10 ist gleich 10“ ausgegeben wird, da die Bedingung immer als wahr ausgewertet wird.

<html>
<body>
   <h2>Using the <i> inline if statement </i> in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let result = 10 === 10 ? "10 is equal to 10." : "10 is not equal to 10.";
      output.innerHTML += "The value of the result variable: " + result;
   </script>
</body>
</html>

Beispiel

Im folgenden Beispiel haben wir ein Zahlenarray erstellt. Darüber hinaus haben wir die Funktionen func1() und func2() erstellt, die mithilfe der als Parameter übergebenen Werte verschiedene Nachrichten drucken.

Wir verwenden die Methode forEach(), um das Array zu durchlaufen. In der Rückruffunktion der forEach()-Methode prüfen wir, ob die Zahl durch 10 teilbar ist, und rufen dann die Funktion func1() auf, andernfalls rufen wir die Funktion func2() auf.

<html>
<body>
   <h2>Using the <i> inline if statement </i> in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      function func1(value) { 
         output.innerHTML += "The func1() is executed for the value " + value + "<br>";
      }
      function func2(value) {
         output.innerHTML += "The func2() is executed for the value " + value + "<br>";
      }
      let numbers = [10, 30, 43, 50, 64, 76, 87];
      numbers.forEach((num) => {
         num % 10 == 0 ? func1(num) : func2(num);
      })
   </script>
</body>
</html>

Beispiel

Im folgenden Beispiel verwenden wir die if-else-Anweisung und die Inline-if-Anweisung, um zu überprüfen, ob das Jahr ein Schaltjahr ist. Die Funktion checkYear() verwendet eine if-else-Anweisung, um sicherzustellen, dass das als Argument übergebene Jahr ein Schaltjahr ist.

In der Funktion checkInlineYear() implementieren wir die gleiche Logik wie in der Funktion checkYear(), konvertieren jedoch die if-else-Anweisungen in Inline-if-Anweisungen. Der Benutzer kann sehen, wie wir neun Zeilen in einer Zeile geschrieben haben.

Benutzer können beobachten, dass beide Funktionen für jeden Jahreswert die gleiche Ausgabe liefern.

<html>
<body>
   <h3>Using inline if statement to check whether year is leap year in JavaScript</h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      function checkYear(year) {
         
         // if the year is divisible by 400, it is a leap year.
         if (year % 400 == 0) {
            return true;
            
            // if the year is divisible by 400 and by 100, it is not a leap year.
         } else if (year % 100 == 0) {
            return false;
            
            // if the year is divisible by 400, not divisible by 100, and divisible by 4, it is a leap year.
         } else if (year % 4 == 0) {
            return true;
         } else {
            return false;
         }
      }
      function checkInlineYear(year) {
         return year % 400 == 0 ? true : year % 100 == 0 ? false : year % 4 == 0 ? true : false;
      }
      output.innerHTML += "Outputs using the checkYear() function. <br> ";
      output.innerHTML += "The 2023 is leap year :- " + checkYear(2020) + "<br>";
      output.innerHTML += "The 3000 is leap year :- " + checkYear(3000) + "<br>";
      output.innerHTML += "<br>";
      output.innerHTML += "Outputs using the checkInlineYear() function. <br> ";
      output.innerHTML += "The 2023 is leap year :- " + checkInlineYear(2020) + "<br>";
      output.innerHTML += "The 3000 is leap year :- " + checkInlineYear(3000) + "<br>";
   </script>
</body>
</html>

Der Benutzer hat gelernt, Inline-IF-Anweisungen in JavaScript zu verwenden. Wir können beobachten, dass Inline-IF-Anweisungen den Code sauberer und lesbarer machen und es immer gut ist, weniger Codezeilen mit derselben Logik zu schreiben.

Das obige ist der detaillierte Inhalt vonWie schreibe ich eine Inline-IF-Anweisung in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Erklären Sie die unterschiedlichen Bereitschaftszustände von Anfragen in AJAXNächster Artikel：Erklären Sie die unterschiedlichen Bereitschaftszustände von Anfragen in AJAX

In Verbindung stehende Artikel

Mehr sehen