Bedingte Verzweigungen in JavaScript

Dieser Artikel erklärt bedingte Verzweigungen in JavaScript.

YouTube Video

Die if-Anweisung in JavaScript

Grundlegende Syntax

1if (condition) {
2    // Code that executes if the condition is true
3}

Die if-Anweisung in JavaScript ist eine grundlegende Kontrollstruktur, die die Ausführung von Code basierend darauf steuert, ob eine bestimmte Bedingung wahr oder falsch ist. Wenn die Bedingung wahr ist, wird der Codeblock ausgeführt, und wenn sie falsch ist, wird er übersprungen.

Beispiel

1let x = 10;
2
3if (x > 5) {
4    console.log("x is greater than 5");
5}

In diesem Beispiel wird x is greater than 5 in der Konsole angezeigt, da der Wert von x größer als 5 ist.

else-Anweisung

Grundlegende Syntax

1if (condition) {
2    // Code that executes if the condition is true
3} else {
4    // Code that executes if the condition is false
5}

Durch die Verwendung einer else-Anweisung nach einer if-Anweisung können Sie Code angeben, der ausgeführt wird, wenn die Bedingung falsch ist.

Beispiel

1let x = 3;
2
3if (x > 5) {
4    console.log("x is greater than 5");
5} else {
6    console.log("x is 5 or less");
7}

In diesem Fall wird "x is 5 or less" angezeigt, da x kleiner als 5 ist.

else if-Anweisung

Grundlegende Syntax

1if (condition1) {
2    // Code that executes if condition1 is true
3} else if (condition2) {
4    // Code that executes if condition1 is false and condition2 is true
5} else {
6    // Code that executes if both condition1 and condition2 are false
7}

Wenn Sie mehrere Bedingungen überprüfen möchten, verwenden Sie else if. Die nächste Bedingung wird überprüft, wenn die ursprüngliche if-Bedingung falsch ist.

Beispiel

1let x = 5;
2
3if (x > 10) {
4    console.log("x is greater than 10");
5} else if (x === 5) {
6    console.log("x is 5");
7} else {
8    console.log("x is 5 or less");
9}

In diesem Fall wird, da x gleich 5 ist, "x is 5" angezeigt.

Ternärer Operator (Bedingungsoperator)

Syntax

1condition ? valueIfTrue : valueIfFalse

Wenn Sie eine if-Anweisung kürzer schreiben möchten, können Sie den ternären Operator verwenden.

Beispiel

1const number = 7;
2const result = number % 2 === 0 ? "Even" : "Odd";
3console.log(result); // "Odd"

In diesem Fall wird Odd angezeigt, da number den Wert 7 hat.

Zusammenfassung

• if-Anweisungen steuern, welcher Code basierend darauf ausgeführt wird, ob die Bedingung wahr oder falsch ist.
• Sie können das Verhalten für den Fall festlegen, dass die Bedingung falsch ist, indem Sie else verwenden.
• Sie können mehrere Bedingungen mit else if überprüfen.
• Sie können auch einen ternären Operator verwenden, um bedingte Verzweigungen prägnant zu schreiben.

Die switch-Anweisung in JavaScript

Grundlegende Syntax

 1switch (expression) {
 2    case value1:
 3        // Code that executes if the expression matches value1
 4        break;
 5    case value2:
 6        // Code that executes if the expression matches value2
 7        break;
 8    default:
 9        // Code that executes if no cases match
10}

Die switch-Anweisung in JavaScript wird verwendet, um einen Ausdruck (in der Regel eine Variable) mit mehreren Werten (Fällen) zu vergleichen und den entsprechenden Code auszuführen. Wie die if-Anweisung führt sie eine bedingte Verzweigung durch, ist jedoch oft lesbarer, wenn es mehrere Bedingungen gibt.

Beispiel

 1let fruit = "apple";
 2
 3switch (fruit) {
 4    case "apple":
 5        console.log("This is an apple");
 6        break;
 7    case "banana":
 8        console.log("This is a banana");
 9        break;
10    default:
11        console.log("Unknown fruit");
12}

In diesem Beispiel wird, da fruit "apple" ist, "This is an apple" in der Konsole angezeigt.

break の役割

Durch das Einfügen von break am Ende jedes Falls verlässt man die switch-Anweisung, nachdem dieser Fall abgeschlossen wurde. Wenn Sie break nicht schreiben, wird der nächste Fall ebenfalls ausgeführt (dies wird als fall-through bezeichnet).

Beispiel für Fall-Through

 1let color = "red";
 2
 3switch (color) {
 4    case "red":
 5        console.log("This is red");
 6    case "blue":
 7        console.log("This is blue");
 8    default:
 9        console.log("Unknown color");
10}

In diesem Fall, da color "red" ist und es kein break nach "This is red" gibt, werden sowohl "This is blue" als auch "Unknown color" angezeigt.

Verwendung von default

default ist der Teil, der ausgeführt wird, wenn es keine Übereinstimmung mit einem case gibt. Dies entspricht else in einer if-Anweisung.

 1let animal = "dog";
 2
 3switch (animal) {
 4    case "cat":
 5        console.log("This is a cat");
 6        break;
 7    case "bird":
 8        console.log("This is a bird");
 9        break;
10    default:
11        console.log("Unknown animal");
12}

In diesem Fall, da animal "dog" ist, fällt es unter default, und "Unknown animal" wird angezeigt.

Umgang mit mehreren Werten im gleichen Fall

Wenn Sie dieselbe Operation für mehrere Fälle ausführen möchten, können Sie sie aufeinanderfolgend schreiben.

Beispiel

 1let day = 1;
 2switch (day) {
 3    case 1:
 4    case 2:
 5    case 3:
 6    case 4:
 7    case 5:
 8        console.log("Weekday");
 9        break;
10    case 6:
11    case 7:
12        console.log("Weekend");
13        break;
14    default:
15        console.log("Unknown day");
16}

In diesem Beispiel wird, wenn day 1 ist, "Weekday" angezeigt.

switch vs. if

• Eine if-Anweisung ist geeignet, um komplexe Bedingungen oder Bereiche zu überprüfen. Zum Beispiel können komplexe Bedingungen wie eine Variable x, die größer oder gleich 10 und kleiner oder gleich 20 ist, nicht in einer switch-Anweisung geschrieben werden.
• Eine switch-Anweisung kann den Code manchmal lesbarer machen, wenn überprüft wird, ob ein Wert einem bestimmten entspricht.

Zusammenfassung

• Die switch-Anweisung wird verwendet, um bedingte Verzweigungen für mehrere Werte übersichtlich zu schreiben.
• Wenn Sie break am Ende jedes case nicht verwenden, könnte das nächste case ebenfalls ausgeführt werden (Fall-Through).
• default wird ausgeführt, wenn keiner der Fälle übereinstimmt.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video