Mehrere Fälle in Javascript wechseln

1. Switch mit mehreren Fällen in Javascript mit dem Fall-Through-Modell
2. Umgang mit mehreren Fällen in Switch mit mathematischen Ausdrücken in JavaScript
3. Umgang mit mehreren Fällen in Switch mit String-Ausdrücken in Javascript
4. Umgang mit mehreren Fällen in Switch mit logischen Ausdrücken in Javascript

Switch-Cases sind viel leistungsfähiger als die if-else-Leiter. Sie haben eine direkte Abbildung der Werte einer Variablen im Block switch(variable) zu ihren entsprechenden Werten im Block case: value. Wir kennen die übliche Verwendung von switch-case mit einer Single Value Map, aber kann sie mehrere Fälle unterstützen? Schauen wir uns einige Möglichkeiten in Javascript an, bei denen wir mehrere Fälle im Block switch-case haben können.

Switch mit mehreren Fällen in Javascript mit dem Fall-Through-Modell

Das Fall through-Modell ist ein erster Schritt zur Unterstützung von switch mit mehr als einem case-Block in Javascript. Hier erfassen wir mehrere Werte der geschalteten Variablen durch mehrere Fälle. Wir wenden das Schlüsselwort break für eine Menge gültiger Fälle an. Wenn wir zum Beispiel den Quartalsnamen eines Jahres in Abhängigkeit vom abgelaufenen Monat protokollieren möchten, werden wir die Monatsindizes basierend auf dem Quartal zusammenfassen. Siehe den folgenden Code.

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
}

function findQuarter(dateString) {
  var monthIndex = new Date(dateString).getMonth();
  switch (monthIndex) {
    case 0:
    case 1:
    case 2:
      console.log('First Quarter');
      break;
    case 3:
    case 4:
    case 5:
      console.log('Second Quarter');
      break;
    case 6:
    case 7:
    case 8:
      console.log('Third Quarter');
      break;
    case 9:
    case 10:
    case 11:
      console.log('Fourth Quarter');
      break;
  }
}

Ausgabe:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter

Die Funktion findQuarter() akzeptiert einen Datumsstring im Format yyyy-mm-dd. Es extrahiert dann den Monatsindex aus dem dateString-Argument, indem es ihn zuerst in ein Javascript-Datumsobjekt konvertiert und dann den Monatsindex aus dem Datumsobjekt holt. getMonth() ist eine Javascript-Funktion, die auf ein Date-Objekt angewendet wird und den Monatsindex beginnend bei 0 zurückliefert. Wir verwenden hier mehrere Fälle, die untereinander gestapelt sind, um mehrere Werte für die Ausgabe zu erfassen.

Für Monate von Januar bis März reichen die jeweiligen Monatsindizes beispielsweise von 0 bis 2, basierend auf der Ausgabe, die von der Funktion getMonth() zurückgegeben wird. Wir stapeln alle Fälle von 0 bis 2 ohne das Schlüsselwort break. Daher stolpern sie und brechen den switch-case ab, wenn sie den break treffen, der sich zufällig in der Zeile case 2: befindet, wo der Wert First Quarter protokolliert wird. Dieser Codesatz scheint sperrig zu sein. Wir können dasselbe wie folgt umschreiben, um die Anzahl der Zeilen zu reduzieren.

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
}

function findQuarter(dateString) {
  var monthIndex = new Date(dateString).getMonth();
  switch (monthIndex) {
    case 0:
    case 1:
    case 2:
      console.log('First Quarter');
      break;
    case 3:
    case 4:
    case 5:
      console.log('Second Quarter');
      break;
    case 6:
    case 7:
    case 8:
      console.log('Third Quarter');
      break;
    case 9:
    case 10:
    case 11:
      console.log('Fourth Quarter');
      break;
  }
}

Ausgabe:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter

Beachten Sie, dass hier die Ausgabe gleich bleibt. Es ist nur eine andere Schreibweise für das Modell Durchfallen des switch-case. Es lässt den Code jetzt sauberer aussehen und spart Platz.

Umgang mit mehreren Fällen in Switch mit mathematischen Ausdrücken in JavaScript

Wir haben es mit Zahlenwerten eines Monats wie in dem im vorherigen Abschnitt erwähnten Beispiel zu tun. Können wir Ausdrücke in case-Blöcken verwenden? Definitiv Ja! Lassen Sie uns auf den folgenden Code verweisen, bevor wir die Funktionsweise erklären.

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
  findQuarter('2021-2-30');
}

function findQuarter(dateString) {
  var monthIndex = new Date(dateString).getMonth();
  switch (monthIndex) {
        case ( (monthIndex < 2) ? monthIndex : -1 ):
            console.log('First Quarter');
          break;
        case ( ((monthIndex > 2) && (monthIndex < 5)) ?  monthIndex : -1):
            console.log('Second Quarter');
          break;
        case ( ((monthIndex > 5) && (monthIndex < 8)) ?  monthIndex : -1):
            console.log('Third Quarter');
          break;
        case ( ((monthIndex > 8) && (monthIndex < 11)) ?  monthIndex : -1):
            console.log('Fourth Quarter');
          break;
        default:
          console.log('Invalid date');
          break;
  }
}

Ausgabe:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter

Wenn wir Ausdrücke im Switch-Fall verwenden, müssen sie einen numerischen Wert zurückgeben, sonst -1. Im obigen Code-Schnipsel haben wir im Block case numerische Ausdrücke anstelle ihrer tatsächlichen Werte hinzugefügt. Diese Ausdrücke werten das entsprechende Quartal des Monats aus und protokollieren den Quartalsnamen. Hier haben wir die default-Klausel im switch case zur Behandlung von ungültigem Datum eingefügt. Die Methode getMonth() in Javascript gibt einen Wert (zwischen 0 und 11) zurück, wenn der month in date gültig ist (im Bereich von 1 bis 12), andernfalls wird NaN. Der Block default fängt solche ungültigen Datumsszenarien ab.

Umgang mit mehreren Fällen in Switch mit String-Ausdrücken in Javascript

Wir können auch String-Ausdrücke innerhalb des Blocks case verwenden. Diese Ausdrücke werden zur Laufzeit ausgewertet und führen die case-Klausel aus. Lassen Sie uns für unser Monatsbeispiel versuchen, den Monatsnamen zu ändern. Dazu wenden wir die Funktion toLocaleDateString() auf das Datumsobjekt an. Im Optionsparameter der Funktion geben wir { month: 'long' } an. Die Ausgabe für toLocaleDateString('en-US', { month: 'long' }) ist nun ein Monatsname, der vollständige Monatsname. Dann wechseln wir die Ausgabe des vollständigen Monatsnamens der Funktion toLocaleDateString('en-US', { month: 'long' }).

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
  findQuarter('2021-21-30');
}

function findQuarter(dateString) {
  var monthName =
      new Date(dateString).toLocaleDateString('en-US', {month: 'long'});
  switch (true) {
    case['January', 'February', 'March'].includes(monthName):
      console.log('First Quarter');
      break;
    case['April', 'May', 'June'].includes(monthName):
      console.log('Second Quarter');
      break;
    case['July', 'August', 'September'].includes(monthName):
      console.log('Third Quarter');
      break;
    case['October', 'November', 'December'].includes(monthName):
      console.log('Fourth Quarter');
      break;
    default:
      console.log('Invalid date');
      break;
  }
}

Ausgabe:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter
Invalid date

Im obigen Code haben wir die Anweisung switch(true) verwendet. In der Klausel case haben wir den String-Vergleich. Wir haben für jedes Quartal ein temporäres Array von Monaten erstellt und sie jedem Fall hinzugefügt. Dann prüfen wir, ob der monthName im Array Quarter vorhanden ist. Wenn es gefunden wird, wird der Name des Quartals protokolliert. Ist das Datum ungültig, gibt die Funktion toLocaleDateString('en-US', { month: 'long' }) Invalid Date aus. Dieses Szenario wird vom Block Standard abgefangen, da die Zeichenkette Invalid Date nicht mit den vordefinierten Arrays übereinstimmt, die die Namen der Monate in einem Quartal enthalten. Daher handhaben wir das Szenario eines ungültigen Datums hier reibungslos.

Umgang mit mehreren Fällen in Switch mit logischen Ausdrücken in Javascript

Wie wir in den mathematischen und den String-Ausdrücken gesehen haben, können wir im Block switch-case auch logische Operatoren in mehreren Fällen verwenden. Im Monatsbeispiel verwenden wir den logischen ODER-Operator || um zu entscheiden, ob der Monatsname in einem bestimmten Quartal liegt. Lassen Sie uns auf den folgenden Code verweisen.

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
  findQuarter('2021-21-30');
}

function findQuarter(dateString) {
  var monthName =
      new Date(dateString).toLocaleDateString('en-US', {month: 'long'});
  switch (true) {
    case (
        monthName === 'January' || monthName === 'February' ||
        monthName === 'March'):
      console.log('First Quarter');
      break;
    case (monthName === 'April' || monthName === 'May' || monthName === 'June'):
      console.log('Second Quarter');
      break;
    case (
        monthName === 'July' || monthName === 'August' ||
        monthName === 'September'):
      console.log('Third Quarter');
      break;
    case (
        monthName === 'October' || monthName === 'November' ||
        monthName === 'December'):
      console.log('Fourth Quarter');
      break;
    default:
      console.log('Invalid date');
      break;
  }
}

Ausgabe:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter
Invalid date

Im Code prüfen wir, ob der Wert monthName dem Monat eines Quartals entspricht. Dementsprechend trösten wir den Namen des Viertels. Auch hier behandeln wir den Fall eines ungültigen Datums, da es keine der in der case-Klausel kodierten Bedingungen erfüllt und in den default-Block fällt, der dann Invalid date an die Browserkonsole ausgibt.