JavaScript-Switch-Anweisung

Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Die switch-Anweisung wird verwendet, um verschiedene Aktionen basierend auf unterschiedlichen Bedingungen auszuführen.

Die JavaScript-switch-Anweisung

Verwenden Sie die Anweisung switch, um einen von vielen auszuführenden Codeblöcken auszuwählen.

Syntax

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

So funktioniert es:

  • Der Schalterausdruck wird einmal ausgewertet.

  • Der Wert des Ausdrucks wird mit den Werten jedes einzelnen Falls verglichen.

  • Bei einer Übereinstimmung wird der zugehörige Codeblock ausgeführt.

  • Wenn keine Übereinstimmung vorliegt, wird der Standardcodeblock ausgeführt.

Beispiel

Die Methode getDay() gibt den Wochentag als Zahl zwischen zurück 0 und 6.

(Sonntag=0, Montag=1, Dienstag=2 ..)

In diesem Beispiel wird die Wochentagsnummer zur Berechnung des Wochentagsnamens verwendet:

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
      day = "Monday";
     break;
  case 2:
       day = "Tuesday";
      break;
  case 3:
    day = "Wednesday";
      break;
  case 4:
      day = "Thursday";
     break;
  case 5:
      day = "Friday";
      break;
  case 6:
    day = "Saturday";
}

Das Ergebnis des Tages wird sein:

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let day;
switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case  6:
    day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>

</body>
</html>

Das Schlüsselwort break

Wenn JavaScript eine Pause erreicht Schlüsselwort, es bricht aus dem Schalterblock aus.

Dadurch wird die Ausführung innerhalb des Switch-Blocks gestoppt.

Es ist nicht notwendig, den letzten Fall in einem Schalterblock zu unterbrechen. Der Block bricht (endet) dort sowieso.

Hinweis: Wenn Sie die break-Anweisung weglassen, wird der nächste Fall ausgeführt, auch wenn Die Bewertung stimmt nicht mit dem Fall überein.

Das Schlüsselwort default

Das Schlüsselwort default gibt den Code an, der ausgeführt werden soll, wenn kein Schlüsselwort vorhanden ist Fallübereinstimmung:

Beispiel

Die Methode getDay() gibt den Wochentag als Zahl zwischen zurück 0 und 6.

Wenn heute weder Samstag (6) noch Sonntag (0) ist, schreiben Sie eine Standardnachricht:

switch (new Date().getDay()) {
   
case 6:
      text = "Today is Saturday";
    break; 
  case 0:
      text = "Today is Sunday";
      break; 
   
default: 
      text = "Looking forward to the Weekend";
}

Das Ergebnis des Textes wird sein:

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let text;
switch (new Date().getDay()) {
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
    break;
  default:
    text = "Looking forward to the Weekend";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Der Fall default muss nicht der letzte Fall in einem Switch sein Block:

Beispiel

switch (new Date().getDay()) {
  default: 
        text = "Looking forward to the Weekend";
    
  break;
  case 6:
        text = "Today is Saturday";
        break; 
  case 0:
        text = "Today is Sunday";
  }

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let text;
switch (new Date().getDay()) {
  default:
    text = "Looking forward to the Weekend";
    break;
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Wenn default nicht der letzte Fall im Switch-Block ist, denken Sie daran, den Standardfall mit einem Break zu beenden.

Gemeinsame Codeblöcke

Manchmal möchte man etwas anderes Wechseln Sie die Fälle, um dieselben zu verwenden Code.

In diesem Beispielfall teilen sich 4 und 5 denselben Codeblock und 0 und 6 teilen sich diesen ein weiterer Codeblock:

Beispiel

switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
      break; 
  case 0:
  case 6:
      text = "It is Weekend";
    break;
  default: 
    text = "Looking forward to the Weekend";
  }

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let text;
switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
    break;
  case 0:
  case 6:
    text = "It is Weekend";
    break;
  default:
    text = "Looking forward to the Weekend";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Details zum Wechsel

Wenn mehrere Fälle mit einem Fallwert übereinstimmen, wird der erste Fall ausgewählt.

Wenn keine passenden Fälle gefunden werden, fährt das Programm mit der Bezeichnung Standard fort.

Wenn kein Standardlabel gefunden wird, fährt das Programm mit der/den Anweisung(en) nach dem Wechsel fort.

Strenger Vergleich

Switch-Fälle verwenden einen strikten Vergleich (===).

Damit die Werte übereinstimmen, müssen sie vom gleichen Typ sein.

Ein strenger Vergleich kann nur dann wahr sein, wenn die Operanden vom gleichen Typ sind.

In diesem Beispiel wird es keine Übereinstimmung für x geben:

Beispiel

 let x = "0";
switch (x) {
  case 0:
    text = "Off";
      break;
  case 1:
    text = "On";
    break;
    default:
    
  text = "No value found";
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let x = "0";

switch (x) {
  case 0:
    text = "Off";
    break;
  case 1:
    text = "On";
    break;
  default:
    text = "No value found";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>