Entscheidungen treffen mit der Switch-Anweisung in Javascript

Shreyas Patil2022-07-19 · 9 min read

Entscheidungen treffen mit der Switch-Anweisung in Javascript

Einführung

Bedingte Anweisungen gehören zu den wichtigsten Kontrollstrukturen in jeder Programmiersprache. Wir verwenden sie, um das Ausführungsverhalten an eine bestimmte Bedingung zu knüpfen. In Javascript, können bedingte Blöcke mit if, else if, else, und switch-Anweisungen erstellt werden.

Die switch-Anweisung macht den Kontrollfluss leicht lesbar, indem sie die Entscheidung anhand möglicher Ergebnisse des Ausdrucks trifft. Je nach passendem Anwendungsfall können ein oder mehrere Codeblöcke ausgeführt werden. Die switch-Steuerung ähnelt der else if-Anweisung. Allerdings ist switch syntaktisch besser lesbar. Sie ist außerdem ideal für Szenarien mit mehreren möglichen Ergebnissen.

In diesem Tutorial konzentrieren wir uns auf die switch-Anweisung in Javascript und implementieren sie, um komplexe Kontrollstrukturen aufzubauen. Wir werden auch lernen, wie man die break , case-, und default-Anweisungen innerhalb des Switch-Blocks verwendet, um den Kontrollfluss zu steuern.

Verwendung der Switch-Anweisung

Die switch-Anweisung vergleicht den Wert einer Variablen mit möglichen Ausdrücken. Anschließend führt sie den Codeblock aus, der dem Ergebnis entspricht. Die Syntax der switch -Anweisung unterscheidet sich nicht von der if-Anweisung. Kurz gesagt wird die Syntax der Switch-Anweisung wie folgt geschrieben:

switch()
{ }

1 2	switch() { }

Unten sehen Sie ein Beispiel für die switch-Anweisung. Sie hat zwei Fälle oder zwei mögliche Ergebnisse zusammen mit einer Fallback-Option, die durch das Schlüsselwort default angegeben wird. Diese Fallback-Option wird ausgeführt, wenn die Ausführung endet oder wenn kein passender Fall gefunden wird:

switch (expression) {
    case x:   
        // führt diesen Codeblock aus, wenn der Ausdruck mit case x übereinstimmt
        break;

    case y:
        // führt diesen Codeblock aus, wenn der Ausdruck mit case y übereinstimmt
        break;

    default:
        // Standard-Block
}

switch (expression) {

case x:

// führt diesen Codeblock aus, wenn der Ausdruck mit case x übereinstimmt

break;

case y:

// führt diesen Codeblock aus, wenn der Ausdruck mit case y übereinstimmt

break;

default:

// Standard-Block

}

Der obige Code wird wie folgt ausgeführt:

Zuerst wird der Ausdruck ausgewertet.
Als Nächstes wird das Ergebnis des Ausdrucks mit case x verglichen. Wenn der Wert übereinstimmt, wird der Codeblock unter case x ausgeführt.
Wenn der Ausdruck nicht mit case x übereinstimmt, wird er mit case y verglichen. Wenn eine Übereinstimmung gefunden wird, wird der Code unter case y ausgeführt.
Wenn schließlich weder case x noch case y übereinstimmen, wird der default-Code ausgeführt und die Steuerung verlässt den switch Block.

Praxisbeispiel

Um die switch-Anweisung zu verstehen, werfen wir einen Blick auf ein funktionierendes Beispiel. Wir werden den Wert für den Wochentag des aktuellen Datums extrahieren, indem wir die getDay()-Methode des Javascript-Objekts Date verwenden. Dieser Wert ist eine Zahl, für Sonntag bis hin zu 6 für Samstag. Wir werden diesen Wert auswerten, um zu bestimmen, welcher Wochentag es ist:

const day = new Date().getDay();

1	const day = new Date().getDay();

Als Nächstes übergeben wir diesen Wert an die switch-Anweisung. Die switch-Anweisung wird von oben nach unten durchlaufen, um sie mit den Fällen abzugleichen und festzustellen, welcher Wochentag es ist. Sobald der Fall gefunden ist, hindert der break-Befehl den switch-Block daran, weitere Anweisungen auszuwerten:

// Setzt den aktuellen Wochentag auf eine Variable, wobei 0 für Sonntag und 6 für Samstag steht
const day = new Date().getDay();

switch (day) {
case 0:
    console.log("Es ist Sonntag");
    break;

case 1:
    console.log("Es ist Montag!");
    break;

case 2:
    console.log("Es ist Dienstag.");
    break;

case 3:
    console.log("Schon Mittwoch!");
    break;

case 4:
    console.log("Es ist Donnerstag");
    break;

case 5:
    console.log("Schönen Freitag!");
    break;

case 6:
    console.log("Es ist Samstag!");
    break;

default:
    console.log("Kein Fall zutreffend")

}

// Setzt den aktuellen Wochentag auf eine Variable, wobei 0 für Sonntag und 6 für Samstag steht

const day = new Date().getDay();

switch (day) {

case 0:

console.log("Es ist Sonntag");

break;

case 1:

console.log("Es ist Montag!");

break;

case 2:

console.log("Es ist Dienstag.");

break;

case 3:

console.log("Schon Mittwoch!");

break;

case 4:

console.log("Es ist Donnerstag");

break;

case 5:

console.log("Schönen Freitag!");

break;

case 6:

console.log("Es ist Samstag!");

break;

default:

console.log("Kein Fall zutreffend")

}

Abhängig von dem Wert, der von der getDate()-Methode zurückgegeben wird, wird er nacheinander mit den Fällen abgeglichen, beginnend von oben. Die Ausgabe unterscheidet sich je nach dem Tag, an dem Sie den Code ausgeführt haben. Der Standard-Codeblock (default) ist so platziert, dass wir dieses Szenario behandeln können, falls kein Fall zutrifft. In diesem Code wird default jedoch nie aufgerufen, da es nur eine begrenzte Anzahl von Wochentagen gibt.

Die break-Anweisung stellt sicher, dass nach dem Abgleich eines Falls keine weiteren Fälle mehr geprüft werden und die Steuerung die switch-Anweisung verlässt. Dies macht das Programm effizienter und schneller.

Prüfen von Wertebereichen in Switch

Bisher haben wir uns sehr einfache Anwendungsfälle angesehen. Es kann jedoch vorkommen, dass ein Wertebereich anstelle eines einzelnen Wertes geprüft werden muss. Dies können wir tun, indem wir unseren Ausdruck auf true setzen und eine Operation innerhalb jeder case-Anweisung durchführen.

Lassen Sie uns diesen Anwendungsfall anhand eines Beispiels demonstrieren. Wir nehmen eine Zahl und wandeln sie dann anhand der folgenden Kategorisierung in eine Note um:

Eine Note von 90 und höher ist ein A
Eine Note von 80 bis 89 ist ein B
Eine Note von 70 to 79 ist ein C
Eine Note von 60 bis 69 ist ein D
Eine Note von 59 oder weniger ist ein F

Wir werden diese Anweisungen als switch-Anweisungen schreiben. Unten finden Sie den Code dafür:

// Note des Schülers
const grade = 87;

switch (true) {

    // Wenn die Punktzahl 90 oder höher ist
    case grade >= 90:
    console.log("A");
    break;

    // Wenn die Punktzahl 80 oder höher ist
    case grade >= 80:
    console.log("B");
    break;

    // Wenn die Punktzahl 70 oder höher ist
    case grade >= 70:
    console.log("C");
    break;

    // Wenn die Punktzahl 60 oder höher ist
    case grade >= 60:
    console.log("D");
    break;

    // Alles ab 59 oder darunter ist ungenügend
    default:
    console.log("F");
}

// Note des Schülers

const grade = 87;

switch (true) {

// Wenn die Punktzahl 90 oder höher ist

case grade >= 90:

console.log("A");

break;

// Wenn die Punktzahl 80 oder höher ist

case grade >= 80:

console.log("B");

break;

// Wenn die Punktzahl 70 oder höher ist

case grade >= 70:

console.log("C");

break;

// Wenn die Punktzahl 60 oder höher ist

case grade >= 60:

console.log("D");

break;

// Alles ab 59 oder darunter ist ungenügend

default:

console.log("F");

}

Im Gegensatz zu den obigen Codebeispielen haben wir hier den Ausdruck in den Klammern auf true gesetzt. Daher wird diejenige Case-Anweisung ausgeführt, die mit dem Wert true übereinstimmt. Genau wie bei der else if-Anweisung wird die erste Anweisung ausgeführt, die mit dem angegebenen Wert übereinstimmt. Hier ist die Ausgabe B, obwohl selbst C und D ebenfalls mit dem Ausdruck übereinstimmen.

Mehrere Cases

Wenn Sie mehr als einen Case mit demselben Codeblock haben möchten, ist dies ebenfalls möglich. Dies ist analog zur oder-Bedingung in der if-Anweisung. In solchen Szenarien können wir mehr als einen Case für jeden Codeblock angeben.

Um dieses Konzept zu veranschaulichen, zeigen wir ein Beispiel mit den Monaten des Jahres. Wir werden diese Monate in Jahreszeiten einteilen. Zuerst verwenden wir die neue Date()-Methode, um eine dem aktuellen Monat entsprechende Zahl zu finden, und weisen diese der Variablen month zu. Die Date().getMonth()-Methode gibt eine Zahl von 0 bis 11 zurück, wobei 0 für Januar steht und 11 dem Dezember zugeordnet ist.

Wir werden die Einteilung nach der folgenden Spezifikation vornehmen:

Winter: Januar, Februar und März
Frühling: April, Mai und Juni
Sommer: Juli, August und September
Herbst: Oktober, November und Dezember

So wird der Code aussehen:

const month = new Date().getMonth();

switch (month) {

    // Januar, Februar, März
    case 0:
    case 1:
    case 2:
        console.log("Winter");
        break;

    // April, Mai, Juni
    case 3:
    case 4:
    case 5:
        console.log("Frühling");
        break;
    
    // Juli, August, September
    case 6:
    case 7:
    case 8:
        console.log("Sommer");
        break;
    
    // Oktober, November, Dezember
    case 9:
    case 10:
    case 11:
        console.log("Herbst");
        break;
    
    default:
        console.log("Etwas ist schiefgelaufen.");
}

const month = new Date().getMonth();

switch (month) {

// Januar, Februar, März

case 0:

case 1:

case 2:

console.log("Winter");

break;

// April, Mai, Juni

case 3:

case 4:

case 5:

console.log("Frühling");

break;

// Juli, August, September

case 6:

case 7:

case 8:

console.log("Sommer");

break;

// Oktober, November, Dezember

case 9:

case 10:

case 11:

console.log("Herbst");

break;

default:

console.log("Etwas ist schiefgelaufen.");

}

Wenn der obige Code ausgeführt wird, wird je nach Monat der Name der Jahreszeit auf der Konsole ausgegeben.

Fazit

In diesem Tutorial haben wir gezeigt, wie man die switch-Anweisung in JavaScript-Anwendungen verwendet. Wir haben die switch-Anweisung auch auf einen Bereich und mehrere Cases zusammen mit dem default-Schlüsselwort angewendet. Wenn Sie mehr über JavaScript erfahren möchten, können Sie sich die folgenden Tutorials ansehen:

Viel Spaß beim Programmieren!

Shreyas Patil

Autor · CloudSigma

Preslav Dobrev ist ein kreativer Designer bei CloudSigma und konzentriert sich auf eine konsistente Unternehmensidentität durch traditionelle und innovative Marketingkanäle. Er versteht es meisterhaft, künstlerische Vision mit strategischem Marketing zu verbinden, um wirkungsvolle Markengeschichten zu schaffen.

Entscheidungen treffen mit der Switch-Anweisung in Javascript

Einführung

Verwendung der Switch-Anweisung

Praxisbeispiel

Prüfen von Wertebereichen in Switch

Mehrere Cases

Fazit

Shreyas Patil

Kommentare