Detaillierte Erläuterung der Verwendung der Switch-Anweisung in JavaScript

Zusätzlich zu if...else verfügt JavaScript über eine Funktion namens switch-Anweisung. Ein Schalter ist eine bedingte Anweisung, die einen Ausdruck anhand einer Reihe möglicher Situationen auswertet und je nach übereinstimmender Situation einen oder mehrere Codeblöcke ausführt. Die switch-Anweisung ist eng mit der bedingten Anweisung verwandt, die viele andere if-Blöcke enthält, und sie werden oft austauschbar verwendet.

In diesem Tutorial lernen wir, wie man die switch-Anweisung und die zugehörigen Schlüsselwörter case, break und default verwendet. Abschließend befassen wir uns mit der Verwendung mehrerer Fälle in einer Switch-Anweisung.

[Verwandte Kursempfehlungen: JavaScript-Video-Tutorial]

Switch

Switch-Anweisungsberechnungsausdruck Formel und führen Sie den Code als Ergebnis der übereinstimmenden Groß- und Kleinschreibung aus. Es mag auf den ersten Blick etwas einschüchternd wirken, aber die grundlegende Syntax ähnelt einer if-Anweisung. Es wird immer mit switch(){} geschrieben, wobei Klammern den zu testenden Ausdruck und geschweifte Klammern den zugrunde liegenden Code enthalten, der ausgeführt werden soll.

Nachfolgend finden Sie ein Beispiel für eine Switch-Anweisung mit zwei Case-Anweisungen und einem Fallback namens „Default“.

switch (expression) {
    case x:        
    // execute case x code block
        break;    
     case y:
     // execute case y code block
        break;   
      default:        
      // execute default code block
      }

Der Logik des obigen Codeblocks folgend ist dies die Abfolge der Ereignisse, die passieren werden:

Ausdruck wird ausgewertet

Im ersten Fall wird x getestet gegen den Ausdruck. Wenn es eine Übereinstimmung gibt, wird der Code ausgeführt und das Schlüsselwort break beendet den Switch-Block.

Wenn es nicht übereinstimmt, wird x übersprungen und y wird anhand der Groß-/Kleinschreibung des Ausdrucks getestet. Wenn y mit dem Ausdruck übereinstimmt, wird der Code ausgeführt und verlässt den Switch-Block.

Wenn nicht alle Fälle übereinstimmen, wird der Standardcodeblock ausgeführt.

Lassen Sie uns ein funktionierendes Beispiel für eine Switch-Anweisung erstellen, die der obigen Syntax folgt. In diesem Codeblock verwenden wir die neue Date()-Methode, um den aktuellen Wochentag zu finden, und getDay(), um die dem aktuellen Tag entsprechende Zahl auszugeben. 1 steht für Montag und 7 für Sonntag. Wir beginnen mit der Einrichtung von Variablen.

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

Mit dem Schalter senden wir jeden Tag der Woche Nachrichten an die Konsole. Das Programm wird der Reihe nach von oben nach unten ausgeführt und sucht nach Übereinstimmungen. Sobald eine Übereinstimmung gefunden wird, stoppt der Befehl break den Switch-Block und fährt mit der Auswertung der Anweisung fort.

week.js

// Set the current day of the week to a variable, with 1 being Monday and 7 being Sunday
const day = new Date().getDay();
switch (day) {
    case 1:
        console.log("Happy Monday!");        
        break;    
    case 2:
        console.log("It's Tuesday. You got this!");        
        break;    
    case 3:
        console.log("Hump day already!");        
        break;    
    case 4:
        console.log("Just one more day 'til the weekend!");        
        break;    
     case 5:
        console.log("Happy Friday!");        
        break;    
      case 6:
        console.log("Have a wonderful Saturday!");        
        break;    
      case 7:
        console.log("It's Sunday, time to relax!");        
        break;    
      default:
        console.log("Something went horribly wrong...");
}

Output
'Just one more day 'til the weekend!'

Dieser Code wurde am Donnerstag getestet, was 4 entspricht, daher lautet die Konsolenausgabe „Nur noch einen Tag bis zum Wochenende!“. Abhängig vom Wochentag, an dem Sie Ihren Code testen, variiert Ihre Ausgabe. Wir fügen am Ende standardmäßig eine Sperre ein, die im Fehlerfall ausgeführt wird, was in diesem Fall nicht passieren sollte, da die Woche nur 7 Tage hat. Beispielsweise könnten wir auch nur Druckergebnisse von Montag bis Freitag haben und der Standardblock könnte die gleichen Informationen auch für Wochenenden enthalten.

Wenn wir das Schlüsselwort „break“ in jeder Anweisung weglassen, wird keine der anderen case-Anweisungen als wahr ausgewertet, aber das Programm führt die Prüfung bis zum Ende fort. Um unser Programm schneller und effizienter zu machen, schließen wir Pause ein.

Bereiche wechseln

Es gibt eine Situation, in der Sie einen Wertebereich in einem Schalterblock auswerten müssen, anstatt wie im Beispiel oben Einzelwert. Wir können dies tun, indem wir den Ausdruck auf „true“ setzen und die Aktion in jeder case-Anweisung ausführen.

Um dies leichter verständlich zu machen, haben wir eine einfache Bewertungs-App entwickelt, die eine numerische Punktzahl in eine Buchstabennote umwandelt, mit den folgenden Anforderungen.

● Level 90 und höher ist A

● Level 80 bis 89 ist B

● Level 70 bis 79 ist C

● Level 60 bis 69 ist D

●　Level 59 oder niedriger ist F

Jetzt können wir es als switch-Anweisung schreiben. Da wir den Bereich überprüfen, werden wir in jedem Fall etwas unternehmen, um zu prüfen, ob jeder Ausdruck als „true“ ausgewertet wird, und dann die Anweisung aufteilen, sobald die „true“-Anforderung erfüllt ist.

grades.js

// Set the student's grade
const grade = 87;
switch (true) {
    // If score is 90 or greater
    case grade >= 90:
        console.log("A");       
        break;    
     // If score is 80 or greater
    case grade >= 80:
        console.log("B");        
        break;    
     // If score is 70 or greater
    case grade >= 70:
        console.log("C");       
        break;    
      // If score is 60 or greater
    case grade >= 60:
        console.log("D");        
        break;    
      // Anything 59 or below is failing
    default:
        console.log("F");
}

Output
'B'

In diesem Beispiel wird der Ausdruck in den Klammern als wahr ausgewertet. Dies bedeutet, dass alles, was als wahr ausgewertet wird, eine Übereinstimmung ist.

Genau wie bei else wertet switch von oben nach unten aus und akzeptiert die erste echte Übereinstimmung. Obwohl unsere Rangvariable also 87 ist und daher für C und D als wahr ausgewertet wird, ist die erste Übereinstimmung B und wird ausgegeben.

Mehrere Fälle

Möglicherweise stoßen Sie auf Code, bei dem mehrere Fälle dieselbe Ausgabe haben sollten. Um dies zu erreichen, können Sie für jeden Codeblock mehrere Fälle verwenden.

Um dies zu testen, erstellen wir eine kleine App, die den aktuellen Monat der entsprechenden Jahreszeit zuordnet. Zuerst verwenden wir die neue Date()-Methode, um die Zahl zu finden, die dem aktuellen Monat entspricht, und wenden sie auf die Monatsvariable an.

Der Einfachheit halber gibt unsere Anwendung die vier Jahreszeiten mit den folgenden Spezifikationen aus:

● Winter: Januar, Februar und März

● Frühling: April, Mai und Juni

●Sommer: Juli, August und September

●Herbst: Oktober, November und Dezember

以下是我们的代码。

seasons.js

// Get number corresponding to the current month, with 0 being January and 11 being December
const month = new Date().getMonth();
switch (month) {
    // January, February, March
    case 0:    
    case 1:    
    case 2:
        console.log("Winter");        
        break;    
    // April, May, June
    case 3:    
    case 4:    
    case 5:
        console.log("Spring");        
        break;    
    // July, August, September
    case 6:    
    case 7:    
    case 8:
        console.log("Summer");        
        break;    
    // October, November, December
    case 9:    
    case 10:    
    case 11:
        console.log("Autumn");        
        break;    
    default:
        console.log("Something went wrong.");
   }

当我们运行代码时，我们将根据上面的规范接收识别当前季节的输出。

Output
Summer

出版时的当月是8，这与“夏季”季节产出的一个case陈述相对应。

结论：

在本文中，我们回顾了switch语句，这是一种条件语句，用于评估表达式并根据匹配结果输出不同的值。 我们使用范围和多个case语句检查了switch语句。

本文来自 js教程 栏目，欢迎学习！

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der Switch-Anweisung in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!