TOC

So schreiben Sie bedingte Anweisungen in JavaScript

Einführung

Bei der Programmierung wird es viele Gelegenheiten geben, in denen unterschiedliche Codeblöcke ausgeführt werden sollen, abhängig von Benutzereingaben oder anderen Faktoren.

Beispielsweise möchten Sie möglicherweise, dass ein Formular gesendet wird, wenn jedes Feld ordnungsgemäß ausgefüllt ist. Sie möchten jedoch möglicherweise verhindern, dass dieses Formular gesendet wird, wenn einige erforderliche Felder fehlen. Um solche Aufgaben zu erfüllen, haben wir * bedingte Anweisungen *, die ein wesentlicher Bestandteil aller Programmiersprachen sind.

Bedingte Anweisungen führen eine bestimmte Aktion basierend auf den Ergebnissen eines Ergebnisses von https://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript#booleans [+ true + oder + false +] aus. .

Einige Beispiele für möglicherweise angezeigte JavaScript-bedingte Anweisungen:

  • Überprüfen Sie den Standort eines Benutzers und zeigen Sie die richtige Sprache basierend auf dem Land an

  • Senden Sie ein Formular beim Absenden oder zeigen Sie Warnungen neben fehlenden Pflichtfeldern an

  • Öffnen Sie ein Dropdown-Menü für ein Klickereignis oder schließen Sie ein Dropdown-Menü, wenn es bereits geöffnet ist

  • Zeigen Sie die Website eines Alkoholhändlers an, wenn der Benutzer das gesetzliche Mindestalter für Alkoholkonsum überschritten hat

  • Zeigen Sie das Buchungsformular für ein Hotel an, jedoch nicht, wenn das Hotel gebucht ist

Bedingte Anweisungen sind Teil der Logik, Entscheidungsfindung oder Ablaufsteuerung eines Computerprogramms. Sie können eine bedingte Anweisung mit einem Buch „https://en.wikipedia.org/wiki/Choose_Your_Own_Adventure[Choose Your Own Adventure]“ oder einem Ablaufdiagramm vergleichen.

In diesem Lernprogramm werden bedingte Anweisungen behandelt, einschließlich der Schlüsselwörter "+ if ", " else " und " else if +". Wir werden auch den ternären Operator abdecken.

If-Anweisung

Die grundlegendste der bedingten Anweisungen ist die Anweisung "+ if ". Eine " if " - Anweisung bewertet, ob eine Anweisung wahr oder falsch ist, und wird nur ausgeführt, wenn die Anweisung " true " zurückgibt. Der Codeblock wird im Fall eines " false +" - Ergebnisses ignoriert und das Programm springt zum nächsten Abschnitt.

Eine "+ if " - Anweisung wird mit dem Schlüsselwort " if " geschrieben, gefolgt von einer Bedingung in Klammern, wobei der auszuführende Code in geschweiften Klammern steht. Kurz gesagt, es kann als " if () {} +" geschrieben werden.

Hier ist eine längere Untersuchung der grundlegenden "+ if +" - Anweisung.

if (condition) {
   // code that will execute if condition is true
}

Der Inhalt einer "+ if +" - Anweisung wird eingerückt, und die geschweiften Klammern, die den auszuführenden Codeblock enthalten, enden nicht wie ein Funktionsblock in einem Semikolon.

Betrachten wir als Beispiel eine Einkaufs-App. Angenommen, für die Funktionalität dieser App möchte ein Benutzer, der einen bestimmten Betrag auf sein Konto eingezahlt hat, einen Artikel im Geschäft kaufen.

shop.js

// Set balance and price of item
const balance = 500;
const jeans = 40;

// Check if there are enough funds to purchase item
if (jeans <= balance) {
 console.log("You have enough money to purchase the item!");
}
OutputYou have enough money to purchase the item!

Wir haben einen Kontostand von "+ 500 " und möchten ein Paar Jeans für " 40 " kaufen. Mit dem Operator kleiner oder gleich können wir prüfen, ob der Preis für Jeans kleiner oder gleich dem verfügbaren Betrag ist. Da " jeans ⇐ balance " " true +" ergibt, ist die Bedingung erfüllt und der Codeblock wird ausgeführt.

In einem neuen Beispiel erstellen wir einen neuen Shopartikel, der mehr kostet als der verfügbare Saldo.

shop.js

// Set balance and price of item
const balance = 500;
const phone = 600;

// Check if there is enough funds to purchase item
if (phone <= balance) {
   console.log("You have enough money to purchase the item!");
}

Dieses Beispiel hat keine Ausgabe, da "+ phone ⇐ balance " " false +" ergibt. Der Codeblock wird einfach ignoriert und das Programm fährt mit der nächsten Zeile fort.

Sonst Aussage

Mit "+ if" -Anweisungen führen wir Code nur dann aus, wenn eine Anweisung "+ true" ergibt, aber häufig möchten wir, dass etwas anderes passiert, wenn die Bedingung fehlschlägt.

Beispielsweise möchten wir möglicherweise eine Nachricht anzeigen, in der dem Benutzer mitgeteilt wird, welche Felder korrekt ausgefüllt wurden, wenn ein Formular nicht ordnungsgemäß gesendet wurde. In diesem Fall würden wir die Anweisung "+ else +" verwenden. Dies ist der Code, der ausgeführt wird, wenn die ursprüngliche Bedingung nicht erfüllt wird.

Die + else + -Anweisung wird nach der + if + -Anweisung geschrieben und enthält keine Bedingung in Klammern. Hier ist die Syntax für eine grundlegende "+ if …​ else" -Anweisung.

if (condition) {
   // code that will execute if condition is true
} else {
   // code that will execute if condition is false
}

Mit demselben Beispiel wie oben können wir eine Meldung hinzufügen, die angezeigt wird, wenn das Guthaben auf dem Konto zu niedrig ist.

shop.js

// Set balance and price of item
const balance = 500;
const phone = 600;

// Check if there is enough funds to purchase item
if (phone <= balance) {
   console.log("You have enough money to purchase the item!");
} else {
   console.log("You do not have enough money in your account to purchase this item.");
}
OutputYou do not have enough money in your account to purchase this item.

Da die "+ if" -Bedingung nicht erfolgreich war, wechselt der Code zu dem, was in der "+ else" -Anweisung steht.

Dies kann sehr nützlich sein, um Warnungen anzuzeigen oder dem Benutzer mitzuteilen, welche Maßnahmen er ergreifen muss, um fortzufahren. Normalerweise ist eine Aktion sowohl für Erfolg als auch für Misserfolg erforderlich. Daher ist "+ if …​ else " häufiger als eine Solo-Anweisung " if +".

Andernfalls if-Anweisung

Mit "+ if" und "+ else" können wir Codeblöcke ausführen, je nachdem, ob eine Bedingung "+ true" oder "+ false" ist. Manchmal haben wir jedoch mehrere mögliche Bedingungen und Ausgaben und benötigen mehr als nur zwei Optionen. Ein Weg, dies zu tun, ist die "+ else if" -Anweisung, die mehr als zwei mögliche Ergebnisse auswerten kann.

Hier ist ein einfaches Beispiel für einen Codeblock, der eine + if + -Anweisung, mehrere + else if + -Anweisungen und eine + else + -Anweisung enthält, falls keine der Bedingungen als + true + ausgewertet wird.

if (condition a) {
   // code that will execute if condition a is true
} else if (condition b) {
   // code that will execute if condition b is true
} else if (condition c) {
   // code that will execute if condition c is true
} else {
   // code that will execute if all above conditions are false
}

JavaScript versucht, alle Anweisungen der Reihe nach auszuführen. Wenn keine erfolgreich ist, wird standardmäßig der Block "+ else +" verwendet.

Sie können beliebig viele "+ else if" -Anweisungen verwenden. Bei vielen "+ else if " - Anweisungen wird aus Gründen der Lesbarkeit möglicherweise die https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch [" switch +" - Anweisung bevorzugt .

Als Beispiel für mehrere "+ else if +" - Anweisungen können wir eine Bewertungs-App erstellen, die eine Buchstabenbewertung basierend auf einer Punktzahl von 100 ausgibt.

Die Anforderungen dieser App sind wie folgt:

  • Note 90 und höher ist ein A

  • Note von 80 bis 89 ist ein B

  • Note von 70 bis 79 ist ein C

  • Note von 60 bis 69 ist ein D

  • Note 59 oder niedriger ist ein F

Nachfolgend erstellen wir eine einfache Menge von "+ if " -, " else " - und " else if +" - Anweisungen und testen sie mit einer bestimmten Note.

grades.js

// Set the current grade of the student
let grade = 87;

// Check if grade is an A, B, C, D, or F
if (grade >= 90) {
 console.log("A");
} else if (grade >= 80) {
 console.log("B");
} else if (grade >= 70) {
 console.log("C");
} else if (grade >= 60) {
 console.log("D");
} else {
 console.log("F");
}
OutputB

In unserem Beispiel prüfen wir zuerst, ob die höchste Punktzahl größer oder gleich "+ 90 " ist. Danach prüfen die Anweisungen ` else if `, ob sie größer als ` 80 `, ` 70 ` und ` 60 ` sind, bis sie die Standardeinstellung ` else +` einer fehlerhaften Note erreichen.

Obwohl unser "+ grade " - Wert von " 87 " technisch auch für " C ", " D " und " F " gilt, werden die Anweisungen bei der ersten erfolgreichen Anweisung angehalten. Daher erhalten wir eine Ausgabe von " B +", was die erste Übereinstimmung ist.

Ternärer Operator

Der * ternäre Operator *, auch als bedingter Operator bekannt, wird als Kurzform für eine Anweisung + if …​ else + verwendet.

Ein ternärer Operator wird mit der Syntax eines Fragezeichens ("? +") Gefolgt von einem Doppelpunkt (": +") geschrieben, wie unten gezeigt.

(condition) ? expression on true : expression on false

In der obigen Anweisung wird die Bedingung zuerst geschrieben, gefolgt von einem "? +". Der erste Ausdruck wird auf " true " ausgeführt, und der zweite Ausdruck wird auf " false " ausgeführt. Es ist sehr ähnlich einer " if …​ else +" - Anweisung mit kompakterer Syntax.

In diesem Beispiel erstellen wir ein Programm, das prüft, ob ein Benutzer + 21 + oder älter ist. Wenn dies der Fall ist, wird auf der Konsole "" angezeigt, und Sie können "" eingeben. Ist dies nicht der Fall, wird auf der Konsole "" angezeigt, dass Sie möglicherweise nicht eingeben. "".

age.js

// Set age of user
let age = 20;

// Place result of ternary operation in a variable
const oldEnough = (age >= 21) ? "You may enter." : "You may not enter.";

// Print output
oldEnough;
Output'You may not enter.'

Da das "+ age " des Benutzers kleiner als " 21 " war, wurde die Fehlermeldung an die Konsole ausgegeben. Das dazu äquivalente " if …​ else " wäre "" Sie dürfen eingeben. "" In der " if " - Anweisung und "" Sie dürfen nicht eingeben. "" In der " else +" Aussage.

Fazit

Bedingte Anweisungen ermöglichen uns die Flusskontrolle, um die Ausgabe unserer Programme zu bestimmen. Sie sind einer der Grundbausteine ​​der Programmierung und kommen in nahezu allen Programmiersprachen vor.

In diesem Artikel wurde die Verwendung der Schlüsselwörter "+ if", "+ else" und "+ else if" sowie die Verschachtelung von Anweisungen und die Verwendung des ternären Operators beschrieben.

Related