Bedingte Anweisungen in JavaSkript: if, else und else if
James Hartmann
⚡ Intelligente Zusammenfassung
Bedingte Anweisungen in JavaSkripte entscheiden anhand einer Bedingung, welcher Codeblock ausgeführt wird. Die Formen if, if…else und if…else if…else decken nahezu alle Verzweigungsentscheidungen ab, die ein Anfängerskript jemals benötigen wird.
JavaBedingte Anweisungen in Skripts
Es gibt hauptsächlich drei Arten von bedingten Anweisungen in JavaSkript.
- if-Anweisung: Eine „if“-Anweisung führt Code basierend auf einer Bedingung aus.
- if…else-Anweisung: Die if…else-Anweisung besteht aus zwei Codeblöcken; Wenn eine Bedingung wahr ist, wird der erste Codeblock ausgeführt, und wenn die Bedingung falsch ist, wird der zweite Codeblock ausgeführt.
- if…else if…else-Anweisung: Wenn mehrere Bedingungen getestet werden müssen und verschiedene Codeblöcke basierend darauf ausgeführt werden müssen, welche Bedingung wahr ist, wird die if…else if…else-Anweisung verwendet.
Jede der drei Formen wird im Folgenden mit ihrer Syntax und einem lauffähigen Beispiel erläutert. Die gleichen Regeln gelten unabhängig davon, ob sich das Skript in der Datei befindet. innerhalb der Seite oder in einer externen Dateiund ob die Bedingung auf oberster Ebene oder innerhalb einer Funktion.
Wie man bedingte Anweisungen verwendet
Bedingte Anweisungen werden verwendet, um den Ausführungsfluss basierend auf verschiedenen Bedingungen zu bestimmen. Wenn eine Bedingung wahr ist, können Sie eine Aktion ausführen, und wenn die Bedingung falsch ist, können Sie eine andere Aktion ausführen.
Das untenstehende Diagramm veranschaulicht diese Idee als eine Weggabelung: Eine einzelne Bedingung wird einmal ausgewertet, und die Steuerung wandert entweder den wahren Zweig oder den falschen Zweig entlang, niemals beide.
If-Anweisung
Syntax:
if(condition) { lines of code to be executed if condition is true }
Sie können verwenden if Verwenden Sie diese Anweisung, wenn Sie nur eine bestimmte Bedingung prüfen möchten. Wenn der Ausdruck in den Klammern ausgewertet wird zu trueDer Block wird ausgeführt; wenn er zu ausgewertet wird falseDer Interpreter überspringt diese Stelle einfach und das Skript fährt mit der nächsten Anweisung fort.
Probieren Sie es selbst aus:
<html>
<head>
<title>IF Statments!!!</title>
<script type="text/javascript">
var age = prompt("Please enter your age");
if(age>=18)
document.write("You are an adult <br />");
if(age<18)
document.write("You are NOT an adult <br />");
</script>
</head>
<body>
</body>
</html>
Das Beispiel fragt den Besucher nach seinem Alter und prüft diesen Wert anschließend zweimal: einmal auf 18 Jahre und älter, einmal auf unter 18 Jahre. Da es sich um zwei separate Prüfungen handelt, … if Aussagen werden anstelle von verwendet elseBeide Bedingungen werden bei jedem Seitenaufruf neu ausgewertet.
Modernes Äquivalent: Der obige Code wird exakt so beibehalten, wie er veröffentlicht wurde. JavaDas gleiche Skript wird normalerweise mit folgender Logik geschrieben: let or const statt var, mit console.log() or textContent statt document.write()und ohne die type="text/javascript" Attribut, das in HTML5 optional ist.
Wenn…Sonst-Anweisung
Syntax:
if(condition) { lines of code to be executed if the condition is true } else { lines of code to be executed if the condition is false }
Sie können die Verwendung if...else Diese Anweisung wird benötigt, wenn eine Bedingung geprüft und für jedes Ergebnis ein anderer Codeblock ausgeführt werden muss. Genau einer der beiden Blöcke wird immer ausgeführt, daher ist kein separater zweiter Test erforderlich.
Probieren Sie es selbst aus:
<html>
<head>
<title>If...Else Statments!!!</title>
<script type="text/javascript">
// Get the current hours
var hours = new Date().getHours();
if(hours<12)
document.write("Good Morning!!!<br />");
else
document.write("Good Afternoon!!!<br />");
</script>
</head>
<body>
</body>
</html>
Hier new Date().getHours() Gibt die aktuelle Uhrzeit der Browseruhr als Zahl von 0 bis 23 zurück. Jeder Wert unter 12 erzeugt die Morgenbegrüßung, alle anderen Werte werden als Standardwerte angezeigt. else Ast.
Wenn…Sonst Wenn…Sonst Anweisung
Syntax:
if(condition1) { lines of code to be executed if condition1 is true } else if(condition2) { lines of code to be executed if condition2 is true } else { lines of code to be executed if condition1 is false and condition2 is false }
Sie können die Verwendung if...else if...else Verwenden Sie eine Anweisung, wenn Sie mehr als zwei Bedingungen prüfen möchten. Die Bedingungen werden von oben nach unten ausgewertet, die Ausführung stoppt, sobald die erste Bedingung erfüllt ist, und die letzte Bedingung wird geprüft. else Dient als Auffangbecken, wenn keine der Bedingungen zutrifft.
Probieren Sie es selbst aus:
<html>
<head>
<script type="text/javascript">
var one = prompt("Enter the first number");
var two = prompt("Enter the second number");
one = parseInt(one);
two = parseInt(two);
if (one == two)
document.write(one + " is equal to " + two + ".");
else if (one<two)
document.write(one + " is less than " + two + ".");
else
document.write(one + " is greater than " + two + ".");
</script>
</head>
<body>
</body>
</html>
Beachten Sie die beiden Aufrufe an parseInt(). Von zurückgegebenen Werten prompt() Da es sich um Zeichenketten handelt, würde ein Vergleich ohne Konvertierung Text statt Zahlen vergleichen und „9“ als größer als „10“ melden.
Ternary Operator: Eine Kurzform für if…else
wenn ein if...else Der Block wählt lediglich zwischen zwei Werten, der bedingte (ternäre) Operator drückt dieselbe Entscheidung als einen einzigen Ausdruck aus. Es ist derjenige, der JavaSkriptoperator, der drei Operanden benötigt: eine Bedingung, ein Fragezeichen, den Wert, der verwendet wird, wenn die Bedingung wahr ist, einen Doppelpunkt und den Wert, der verwendet wird, wenn sie falsch ist.
// if...else form let message; if (age >= 18) { message = "adult"; } else { message = "minor"; } // same decision as a ternary expression let label = age >= 18 ? "adult" : "minor";
Verwenden Sie den ternären Operator, wenn er die Lesbarkeit verbessert, und nicht nur, um Zeilen zu sparen:
- Gute Passform: Einen von zwei Werten auswählen, der einer Vorlagenzeichenfolge zugewiesen, zurückgegeben oder in diese eingefügt wird.
- Schlechte Passform: Zweige, die mehrere Anweisungen ausführen, Funktionen für ihre Seiteneffekte aufrufen oder eigene lokale Variablen benötigen.
- Vermeiden Sie Verschachtelungen: Ein ternärer Ausdruck innerhalb eines ternären Ausdrucks ist viel schwieriger zu lesen als ein
else ifKette.
switch-Anweisung vs. if…else if…else
Entlang else if Eine Kette, die dieselbe Variable immer wieder mit verschiedenen festen Werten vergleicht, ist in der Regel übersichtlicher. switch Die Switch-Anweisung wertet ihren Ausdruck einmal aus und springt dann zur entsprechenden Stelle. case; break verhindert, dass die Ausführung in den nächsten Fall übergeht, und default spielt die Rolle des letzten else.
switch (day) { case "Sat": case "Sun": document.write("Weekend"); break; default: document.write("Weekday"); }
Die beiden Strukturen sind nicht in jeder Situation austauschbar:
| Vergleichspunkt | wenn...sonst wenn...sonst | wechseln |
|---|---|---|
| Eine Art Test | Jeder boolesche Ausdruck, einschließlich Bereiche wie z. B. hours<12 |
Gleichheit nur gegenüber festen Werten |
| Vergleich verwendet | Welchen Operator Sie auch immer schreiben | Strenger Vergleich, also "5" stimmt nicht überein 5 |
| Ablesbarkeit | am besten geeignet für einige wenige, voneinander unabhängige Erkrankungen | am besten für viele Werte einer Variablen |
| Häufiger Fehler | Vergessen des Nachlaufs else |
Vergessen break, wodurch die Ausführung scheitert |
Wahre und falsche Werte in JavaSkriptbedingungen
Eine Bedingung muss kein Vergleich sein. JavaDas Skript wandelt alles, was sich innerhalb der Klammern befindet, zuerst in einen booleschen Wert um, weshalb if (name) ist gültiger Code. Nur sechs Werte werden als falsch interpretiert: false, 0, die leere Zeichenkette, null, undefined und NaNAlles andere ist wahrheitsgemäß, einschließlich der Zeichenkette. "0", ein leeres Array und ein leeres Objekt.
Die meisten Fehler in bedingten Anweisungen von Anfängerskripten lassen sich auf wenige, wenige Fehler zurückführen:
- Zuordnung statt Vergleich:
if (x = 5)weist zu und ist immer wahrheitsgemäß;if (x === 5)vergleicht. - Ungezwungene Gleichstellungsüberraschungen:
==Die Typen werden vor dem Vergleich konvertiert, daher"" == 0Das stimmt. Bevorzugen===. - Fehlende Klammern: ohne
{}Nur die nächste einzelne Anweisung gehört zum Zweig, genau wie in den obigen Beispielen. - Unkonvertierte Eingabe: Werte von
prompt()und Formularfelder sind Zeichenketten, bisparseInt()orNumber()bekehrt sie. - Nicht erreichbare Zweige: in eine
else ifBei dieser Kette gilt: Die engste Bedingung zuerst prüfen, oder eine frühere, umfassendere Prüfung gewinnt immer.
