switch

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

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

expression

Ein Ausdruck, dessen Ergebnis mit jeder case-Klausel verglichen wird.

caseExpressionN Optional

Eine case-Klausel, die verwendet wird, um gegen den expression zu vergleichen. Wenn der Wert von expression mit dem Wert eines caseExpressionN bereinstimmt, beginnt die Ausfhrung ab der ersten Anweisung nach dieser case-Klausel bis entweder zum Ende der switch-Anweisung oder der ersten break, die auftritt.

default Optional

Eine default-Klausel; wenn vorhanden, wird diese Klausel ausgefhrt, wenn der Wert von expression mit keiner der case-Klauseln bereinstimmt. Eine switch-Anweisung kann nur eine default-Klausel haben.

Beschreibung

Eine switch-Anweisung wertet zunchst ihren Ausdruck aus. Dann sucht sie die erste case-Klausel, deren Ausdruck denselben Wert wie das Ergebnis des Eingabeausdrucks hat (unter Verwendung des strikten Gleichheitsvergleichs) und bertrgt die Kontrolle auf diese Klausel, wobei alle Anweisungen nach dieser Klausel ausgefhrt werden.

Die Klauselausdrcke werden nur bei Bedarf ausgewertet wenn bereits eine bereinstimmung gefunden wurde, werden nachfolgende case-Klauselausdrcke nicht ausgewertet, selbst wenn sie durch fall-through besucht werden.

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

Wenn keine passende case-Klausel gefunden wird, sucht das Programm nach der optionalen default-Klausel und bertrgt, falls gefunden, die Kontrolle auf diese Klausel und fhrt die Anweisungen nach dieser Klausel aus. Wird keine default-Klausel gefunden, fhrt das Programm mit der Ausfhrung an der Anweisung nach dem Ende von switch fort. blicherweise ist die default-Klausel die letzte Klausel, aber das muss nicht so sein. Eine switch-Anweisung darf nur eine default-Klausel haben; mehrere default-Klauseln fhren zu einem SyntaxError.

Breaking und fall-through

Sie knnen die break-Anweisung innerhalb einer switch-Anweisungsgruppe verwenden, um frhzeitig auszubrechen, oft wenn alle Anweisungen zwischen zwei case-Klauseln ausgefhrt wurden. Die Ausfhrung erfolgt bei der ersten Anweisung nach switch.

Wenn break weggelassen wird, wird die Ausfhrung zur nchsten case-Klausel fortgesetzt, sogar zur default-Klausel, unabhngig davon, ob der Wert des Ausdrucks dieser Klausel entspricht. Dieses Verhalten wird "fall-through" genannt.

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 der switch-Anweisung auszubrechen. Zum Beispiel, wenn die switch-Anweisung in einer Funktion enthalten ist, beendet eine return-Anweisung die Ausfhrung des Funktionskrpers und damit die switch-Anweisung. Wenn die switch-Anweisung in einer Schleife enthalten ist, stoppt eine continue-Anweisung die switch-Anweisung und springt zur nchsten Iteration der Schleife.

Lexikalische Bereichsregelung

Die case- und default-Klauseln sind wie Labels: Sie kennzeichnen mgliche Stellen, zu denen der Kontrollfluss springen kann. Sie erzeugen jedoch keine lexikalischen Bereiche selbst (sie brechen auch nicht automatisch ab wie oben gezeigt). Zum Beispiel:

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 erste const message = 'hello'; mit der zweiten const message = 'hi'; Deklaration in Konflikt steht, auch wenn sie sich in ihren eigenen separaten case-Klauseln befinden. Letztendlich liegt das daran, dass beide const-Deklarationen innerhalb desselben Blockbereichs stehen, der durch den switch-Krper erzeugt wird.

Um dies zu beheben, wickeln Sie die let- oder const-Deklarationen in einer case-Klausel in einen Block ein.

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 nun hello in der Konsole ausgeben, wie es sollte, ohne Fehler.

Beispiele

Verwendung von switch

Im folgenden Beispiel, wenn expr zu Bananas ausgewertet wird, vergleicht das Programm den Wert mit der case 'Bananas' und fhrt die zugehrige Anweisung aus. Wenn break erreicht wird, bricht das Programm aus dem switch aus und fhrt die Anweisung nach switch aus. Wenn break weggelassen wrde, wrde auch die Anweisung fr case 'Cherries' ausgefhrt werden.

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 Ausfhrung bei der default-Klausel und fhrt alle Anweisungen danach aus.

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 Sie default vor allen anderen case-Klauseln setzen.

Ausnutzung von Fall-through

Diese Methode nutzt die Tatsache aus, dass, wenn unter einer case-Klausel kein break steht, die Ausfhrung zur nchsten case-Klausel fortgesetzt wird, unabhngig davon, ob diese case die Kriterien erfllt.

Das Folgende ist ein Beispiel fr eine Einzeloperation sequenzieller case-Anweisung, bei der vier verschiedene Werte genau dasselbe tun.

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 fr eine Mehrfachoperation sequenzielle case-Klausel, bei der, abhngig von der bereitgestellten Ganzzahl, unterschiedliche Ausgaben erfolgen. Dies zeigt Ihnen, dass es in der Reihenfolge durchlaufen wird, in der Sie die case-Klauseln setzen, und dass es nicht numerisch sequentiell sein muss. In JavaScript knnen Sie sogar String-Definitionen in diese case-Anweisungen mischen.

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:

Eine Alternative zu if...else-Ketten

Sie finden sich oft in einer Reihe von if...else Vergleichen wieder.

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 fhrt keine Sequenz von ===-Vergleichen durch, kann aber dennoch in eine switch-Konstruktion umgewandelt werden.

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;
}

Das switch (true)-Muster als Alternative zu if...else ist besonders ntzlich, wenn Sie das Fall-through-Verhalten nutzen mchten.

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

Browser-Kompatibilitt

Siehe auch

• if...else