Movatterモバイル変換


[0]ホーム

URL:


  1. Web
  2. JavaScript
  3. JavaScript-Referenz
  4. Anweisungen und Deklarationen
  5. switch

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.

View in EnglishAlways switch to English

switch

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Dieswitch-Anweisung wertet einenAusdruck aus, vergleicht den Wert des Ausdrucks mit einer Reihe voncase-Klauseln und führtAnweisungen nach der erstencase-Klausel mit passendem Wert aus, bis einebreak-Anweisung erreicht wird. Diedefault-Klausel einerswitch-Anweisung wird angesprungen, wenn keinecase-Klausel den Wert des Ausdrucks trifft.

Probieren Sie es aus

const expr = "Papayas";switch (expr) {  case "Oranges":    console.log("Oranges are $0.59 a pound.");    break;  case "Mangoes":  case "Papayas":    console.log("Mangoes and papayas are $2.79 a pound.");    // Expected output: "Mangoes and papayas are $2.79 a pound."    break;  default:    console.log(`Sorry, we are out of ${expr}.`);}

Syntax

js
switch (expression) {  case caseExpression1:    statements  case caseExpression2:    statements  // …  case caseExpressionN:    statements  default:    statements}
expression

Ein Ausdruck, dessen Ergebnis mit jedercase-Klausel verglichen wird.

caseExpressionNOptional

Einecase-Klausel, die verwendet wird, um gegen denexpression zu vergleichen. Wenn der Wert vonexpression mit dem Wert einescaseExpressionN übereinstimmt, beginnt die Ausführung ab der ersten Anweisung nach diesercase-Klausel bis entweder zum Ende derswitch-Anweisung oder der erstenbreak, die auftritt.

defaultOptional

Einedefault-Klausel; wenn vorhanden, wird diese Klausel ausgeführt, wenn der Wert vonexpression mit keiner dercase-Klauseln übereinstimmt. Eineswitch-Anweisung kann nur einedefault-Klausel haben.

Beschreibung

Eineswitch-Anweisung wertet zunächst ihren Ausdruck aus. Dann sucht sie die erstecase-Klausel, deren Ausdruck denselben Wert wie das Ergebnis des Eingabeausdrucks hat (unter Verwendung desstrikten Gleichheitsvergleichs) und überträgt die Kontrolle auf diese Klausel, wobei alle Anweisungen nach dieser Klausel ausgeführt werden.

Die Klauselausdrücke werden nur bei Bedarf ausgewertet — wenn bereits eine Übereinstimmung gefunden wurde, werden nachfolgendecase-Klauselausdrücke nicht ausgewertet, selbst wenn sie durchfall-through besucht werden.

js
switch (undefined) {  case console.log(1):  case console.log(2):}// Only logs 1

Wenn keine passendecase-Klausel gefunden wird, sucht das Programm nach der optionalendefault-Klausel und überträgt, falls gefunden, die Kontrolle auf diese Klausel und führt die Anweisungen nach dieser Klausel aus. Wird keinedefault-Klausel gefunden, fährt das Programm mit der Ausführung an der Anweisung nach dem Ende vonswitch fort. Üblicherweise ist diedefault-Klausel die letzte Klausel, aber das muss nicht so sein. Eineswitch-Anweisung darf nur einedefault-Klausel haben; mehreredefault-Klauseln führen zu einemSyntaxError.

Breaking und fall-through

Sie können diebreak-Anweisung innerhalb einerswitch-Anweisungsgruppe verwenden, um frühzeitig auszubrechen, oft wenn alle Anweisungen zwischen zweicase-Klauseln ausgeführt wurden. Die Ausführung erfolgt bei der ersten Anweisung nachswitch.

Wennbreak weggelassen wird, wird die Ausführung zur nächstencase-Klausel fortgesetzt, sogar zurdefault-Klausel, unabhängig davon, ob der Wert des Ausdrucks dieser Klausel entspricht. Dieses Verhalten wird "fall-through" genannt.

js
const foo = 0;switch (foo) {  case -1:    console.log("negative 1");    break;  case 0: // Value of foo matches this criteria; execution starts from here    console.log(0);  // Forgotten break! Execution falls through  case 1: // no break statement in 'case 0:' so this case will run as well    console.log(1);    break; // Break encountered; will not continue into 'case 2:'  case 2:    console.log(2);    break;  default:    console.log("default");}// Logs 0 and 1

In einem passenden Kontext haben auch andere Steuerflussanweisungen die Wirkung, aus derswitch-Anweisung auszubrechen. Zum Beispiel, wenn dieswitch-Anweisung in einer Funktion enthalten ist, beendet einereturn-Anweisung die Ausführung des Funktionskörpers und damit dieswitch-Anweisung. Wenn dieswitch-Anweisung in einer Schleife enthalten ist, stoppt einecontinue-Anweisung dieswitch-Anweisung und springt zur nächsten Iteration der Schleife.

Lexikalische Bereichsregelung

Diecase- unddefault-Klauseln sind wieLabels: Sie kennzeichnen mögliche Stellen, zu denen der Kontrollfluss springen kann. Sie erzeugen jedoch keine lexikalischenBereiche selbst (sie brechen auch nicht automatisch ab — wie oben gezeigt). Zum Beispiel:

js
const action = "say_hello";switch (action) {  case "say_hello":    const message = "hello";    console.log(message);    break;  case "say_hi":    const message = "hi";    console.log(message);    break;  default:    console.log("Empty action received.");}

Dieses Beispiel wird den Fehler "Uncaught SyntaxError: Identifier 'message' has already been declared" ausgeben, weil die ersteconst message = 'hello'; mit der zweitenconst message = 'hi'; Deklaration in Konflikt steht, auch wenn sie sich in ihren eigenen separatencase-Klauseln befinden. Letztendlich liegt das daran, dass beideconst-Deklarationen innerhalb desselben Blockbereichs stehen, der durch denswitch-Körper erzeugt wird.

Um dies zu beheben, wickeln Sie dielet- oderconst-Deklarationen in einercase-Klausel in einen Block ein.

js
const action = "say_hello";switch (action) {  case "say_hello": {    const message = "hello";    console.log(message);    break;  }  case "say_hi": {    const message = "hi";    console.log(message);    break;  }  default: {    console.log("Empty action received.");  }}

Dieser Code wird nunhello in der Konsole ausgeben, wie es sollte, ohne Fehler.

Beispiele

Verwendung von switch

Im folgenden Beispiel, wennexpr zuBananas ausgewertet wird, vergleicht das Programm den Wert mit dercase 'Bananas' und führt die zugehörige Anweisung aus. Wennbreak erreicht wird, bricht das Programm aus demswitch aus und führt die Anweisung nachswitch aus. Wennbreak weggelassen würde, würde auch die Anweisung fürcase 'Cherries' ausgeführt werden.

js
switch (expr) {  case "Oranges":    console.log("Oranges are $0.59 a pound.");    break;  case "Apples":    console.log("Apples are $0.32 a pound.");    break;  case "Bananas":    console.log("Bananas are $0.48 a pound.");    break;  case "Cherries":    console.log("Cherries are $3.00 a pound.");    break;  case "Mangoes":  case "Papayas":    console.log("Mangoes and papayas are $2.79 a pound.");    break;  default:    console.log(`Sorry, we are out of ${expr}.`);}console.log("Is there anything else you'd like?");

Die default-Klausel zwischen zwei case-Klauseln setzen

Wenn keine Übereinstimmung gefunden wird, beginnt die Ausführung bei derdefault-Klausel und führt alle Anweisungen danach aus.

js
const foo = 5;switch (foo) {  case 2:    console.log(2);    break; // it encounters this break so will not continue into 'default:'  default:    console.log("default");  // fall-through  case 1:    console.log("1");}

Es funktioniert auch, wenn Siedefault vor allen anderencase-Klauseln setzen.

Ausnutzung von Fall-through

Diese Methode nutzt die Tatsache aus, dass, wenn unter einercase-Klausel keinbreak steht, die Ausführung zur nächstencase-Klausel fortgesetzt wird, unabhängig davon, ob diesecase die Kriterien erfüllt.

Das Folgende ist ein Beispiel für eine Einzeloperation sequenziellercase-Anweisung, bei der vier verschiedene Werte genau dasselbe tun.

js
const Animal = "Giraffe";switch (Animal) {  case "Cow":  case "Giraffe":  case "Dog":  case "Pig":    console.log("This animal is not extinct.");    break;  case "Dinosaur":  default:    console.log("This animal is extinct.");}

Das Folgende ist ein Beispiel für eine Mehrfachoperation sequenziellecase-Klausel, bei der, abhängig von der bereitgestellten Ganzzahl, unterschiedliche Ausgaben erfolgen. Dies zeigt Ihnen, dass es in der Reihenfolge durchlaufen wird, in der Sie diecase-Klauseln setzen, und dass es nicht numerisch sequentiell sein muss. In JavaScript können Sie sogar String-Definitionen in diesecase-Anweisungen mischen.

js
const foo = 1;let output = "Output: ";switch (foo) {  case 0:    output += "So ";  case 1:    output += "What ";    output += "Is ";  case 2:    output += "Your ";  case 3:    output += "Name";  case 4:    output += "?";    console.log(output);    break;  case 5:    output += "!";    console.log(output);    break;  default:    console.log("Please pick a number from 0 to 5!");}

Die Ausgabe dieses Beispiels:

WertLogtext
foo istNaN oder nicht1,2,3,4,5, oder0Bitte wählen Sie eine Zahl von 0 bis 5!
0Ausgabe: So What Is Your Name?
1Ausgabe: What Is Your Name?
2Ausgabe: Your Name?
3Ausgabe: Name?
4Ausgabe: ?
5Ausgabe: !

Eine Alternative zu if...else-Ketten

Sie finden sich oft in einer Reihe vonif...else Vergleichen wieder.

js
if ("fetch" in globalThis) {  // Fetch a resource with fetch} else if ("XMLHttpRequest" in globalThis) {  // Fetch a resource with XMLHttpRequest} else {  // Fetch a resource with some custom AJAX logic}

Dieses Muster führt keine Sequenz von===-Vergleichen durch, kann aber dennoch in eineswitch-Konstruktion umgewandelt werden.

js
switch (true) {  case "fetch" in globalThis:    // Fetch a resource with fetch    break;  case "XMLHttpRequest" in globalThis:    // Fetch a resource with XMLHttpRequest    break;  default:    // Fetch a resource with some custom AJAX logic    break;}

Dasswitch (true)-Muster als Alternative zuif...else ist besonders nützlich, wenn Sie das Fall-through-Verhalten nutzen möchten.

js
switch (true) {  case isSquare(shape):    console.log("This shape is a square.");  // Fall-through, since a square is a rectangle as well!  case isRectangle(shape):    console.log("This shape is a rectangle.");  case isQuadrilateral(shape):    console.log("This shape is a quadrilateral.");    break;  case isCircle(shape):    console.log("This shape is a circle.");    break;}

Spezifikationen

Specification
ECMAScript® 2026 Language Specification
# sec-switch-statement

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

[8]ページ先頭

©2009-2025 Movatter.jp