JS-Tutorial

JS-HAUS JS-Einführung JS Wohin JS-Ausgabe JS-Anweisungen JS-Syntax JS-Kommentare JS-Variablen JS Let JS Konst JS-Operatoren JS-Arithmetik JS-Aufgabe JS-Datentypen JS-Funktionen JS-Objekte JS-Ereignisse JS-Strings JS-String-Methoden Suche nach JS-Strings JS-String-Vorlagen JS-Nummern JS-Zahlenmethoden JS-Arrays JS-Array-Methoden JS-Array-Sortierung JS-Array-Iteration JS-Array-Konstante JS-Daten JS-Datumsformate JS Date Get-Methoden JS-Datumssatzmethoden JS Math JS Zufällig JS Boolesche Werte JS-Vergleiche JS-Bedingungen JS-Schalter JS-Schleife für JS-Schleife für In JS-Schleife für Of JS-Schleife While JS Pause JS-Iterables JS-Sets JS-Karten JS Typeof JS-Typkonvertierung JS Bitweise JS RegExp JS-Fehler JS-Bereich JS Heben Strenger JS-Modus JS dieses Schlüsselwort JS-Pfeilfunktion JS-Klassen JS JSON JS-Debugging JS-Styleguide JS Best Practices JS-Fehler JS-Leistung JS Reservierte Wörter

JS-Versionen

JS-Versionen JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS-Geschichte

JS-Objekte

Objektdefinitionen Objekteigenschaften Objektmethoden Objektanzeige Objektzugriffsmethoden Objektkonstruktoren Objekt-Prototypen Objekt-Iterables Objektsätze Objektkarten Objektreferenz

JS-Funktionen

Funktionsdefinitionen Funktionsparameter Funktionsaufruf Funktionsaufruf Funktion anwenden Funktionsschließungen

JS-Klassen

Klasse Einführung Klassenvererbung Klasse statisch

JS asynchron

JS-Rückrufe JS asynchron JS verspricht JS Async/Warten

JS-HTML-DOM

DOM-Einführung DOM-Methoden DOM-Dokument DOM-Elemente DOM-HTML DOM-Formulare DOM-CSS DOM-Animationen DOM-Ereignisse DOM-Ereignis-Listener DOM-Navigation DOM-Knoten DOM-Sammlungen DOM-Knotenlisten

Stückliste des JS-Browsers

JS-Fenster JS-Bildschirm JS-Standort JS-Geschichte JS-Navigator JS-Popup-Warnung JS-Timing JS-Cookies

JS-Web-APIs

Web-API-Einführung Web Forms-API Webprotokoll-API Webspeicher-API Web Worker-API Web-Fetch-API Web-Geolocation-API

JS AJAX

AJAX-Einführung AJAX-XMLHttp AJAX-Anfrage AJAX-Antwort AJAX-XML-Datei AJAX-PHP AJAX ASP AJAX-Datenbank AJAX-Anwendungen AJAX-Beispiele

JS JSON

JSON-Einführung JSON-Syntax JSON vs. XML JSON-Datentypen JSON-Parsing JSON-Stringify JSON-Objekte JSON-Arrays JSON-Server JSON-PHP JSON-HTML JSON JSONP

JS vs. jQuery

jQuery-Selektoren jQuery-HTML jQuery-CSS jQuery-DOM

JS-Grafik

JS-Grafik JS-Leinwand JS Plotly JS Chart.js JS Google-Diagramm JS D3.js

JS-Beispiele

JS-Beispiele JS-HTML-DOM JS-HTML-Eingabe JS-HTML-Objekte JS-HTML-Ereignisse JS-Browser JS-Editor JS-Übungen JS-Quiz JS-Zertifikat

JS-Referenzen

JavaScript-Objekte HTML-DOM-Objekte


JavaScript -Switch- Anweisung


Die switchAnweisung wird verwendet, um verschiedene Aktionen basierend auf verschiedenen Bedingungen auszuführen.


Die JavaScript-Switch-Anweisung

Verwenden Sie die switchAnweisung, 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 Falls verglichen.
  • Wenn es eine Übereinstimmung gibt, wird der zugehörige Codeblock ausgeführt.
  • Wenn es keine Übereinstimmung gibt, wird der Standardcodeblock ausgeführt.

Beispiel

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

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

Dieses Beispiel verwendet die Wochentagsnummer, um den Wochentagsnamen zu berechnen:

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:

Saturday


Das Break-Schlüsselwort

Wenn JavaScript ein break Schlüsselwort erreicht, bricht es aus dem Switch-Block aus.

Dadurch wird die Ausführung innerhalb des Schalterblocks gestoppt.

Es ist nicht erforderlich, den letzten Fall in einem Schalterblock zu unterbrechen. Dort bricht (endet) der Block sowieso.

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


Das Standardschlüsselwort

Das defaultSchlüsselwort gibt den Code an, der ausgeführt werden soll, wenn keine Fallübereinstimmung vorhanden ist:

Beispiel

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

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 von Text wird sein:

Today is Saturday

Der defaultFall muss nicht der letzte Fall in einem Schalterblock sein:

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

Wenn defaultdies nicht der letzte Fall im Schalterblock ist, denken Sie daran, den Standardfall mit einer Unterbrechung zu beenden.


Gemeinsame Codeblöcke

Manchmal möchten Sie, dass verschiedene Schalterfälle denselben Code verwenden.

In diesem Beispielfall teilen sich 4 und 5 denselben Codeblock und 0 und 6 teilen sich einen anderen 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";
}

Schaltdetails

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

Wenn keine übereinstimmenden Fälle gefunden werden, fährt das Programm mit dem Standardetikett fort .

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


Strenger Vergleich

Wechselfälle verwenden strikten Vergleich (===).

Die Werte müssen vom gleichen Typ sein, um übereinstimmen zu können.

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

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

Beispiel

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

Testen Sie sich mit Übungen

Übung:

Erstellen Sie eine switchAnweisung, die „Hallo“ signalisiert, wenn fruits„Banane“ ist, und „Willkommen“, wenn fruits„Apfel“ ist.

(fruits) {
  "Banana":
    alert("Hello")
    break;
  "Apple":
    alert("Welcome")
    break;    
}