Samouczek JS

JS DOM Wprowadzenie do JS JS Dokąd Wyjście JS Oświadczenia JS Składnia JS Komentarze JS Zmienne JS JS Let JS Const Operatorzy JS Arytmetyka JS Zadanie JS Typy danych JS Funkcje JS Obiekty JS Wydarzenia JS JS Strings Metody ciągów JS Wyszukiwanie ciągów JS Szablony JS String Numery JS Metody liczbowe JS Tablice JS Metody macierzowe JS Sortowanie tablic JS Iteracja tablicy JS JS Array Const JS Daty Formaty daty JS JS Data Pobierz metody Metody ustawiania daty JS Matematyka JS JS losowo JS Booleans Porównania JS Warunki JS Przełącznik JS Pętla JS dla Pętla JS dla In Pętla JS dla Of Pętla JS, podczas gdy Przerwa JS Iterable JS Zestawy JS Mapy JS Typ JS Konwersja typu JS JS Bitwise JS RegExp Błędy JS Zakres JS JS Podnoszenie Tryb ścisły JS JS to słowo kluczowe Funkcja strzałki JS Klasy JS JS JSON Debugowanie JS Przewodnik po stylu JS Najlepsze praktyki JS Błędy JS Wydajność JS JS słowa zastrzeżone

Wersje JS

Wersje JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Krawędź Historia JS

Obiekty JS

Definicje obiektów Właściwości obiektu Metody obiektowe Wyświetlanie obiektów Akcesoria do obiektów Konstruktorzy obiektów Prototypy obiektów Iterowalne obiekty Zestawy obiektów Mapy obiektów Odniesienie do obiektu

Funkcje JS

Definicje funkcji Parametry funkcji Wywołanie funkcji Wywołanie funkcji Funkcja Zastosuj Zamknięcia funkcji

Klasy JS

Wprowadzenie do zajęć Dziedziczenie klas Klasa statyczna

JS Async

Oddzwaniania JS Asynchroniczny JS JS Obietnice JS Async/Oczekiwanie

JS HTML DOM

Wprowadzenie do DOM Metody DOM Dokument DOM Elementy DOM DOM HTML Formularze DOM DOM CSS Animacje DOM Wydarzenia DOM Odbiornik zdarzeń DOM Nawigacja DOM Węzły DOM Kolekcje DOM Listy węzłów DOM

Zestawienie komponentów przeglądarki JS

Okno JS Ekran JS Lokalizacja JS Historia JS JS Navigator Wyskakujący alert JS Czas JS Pliki cookie JS

JS Web API

Wprowadzenie do internetowego interfejsu API Interfejs API formularzy internetowych Interfejs API historii online API przechowywania danych w sieci Web Web Worker API Internetowy interfejs API pobierania Internetowy interfejs API geolokalizacji

JS AJAX

Wprowadzenie do AJAX AJAX XMLHttp Żądanie AJAX Odpowiedź AJAX Plik XML AJAX AJAX PHP ASP AJAX Baza danych AJAX Aplikacje AJAX Przykłady AJAX

JS JSON

Wprowadzenie do JSON Składnia JSON JSON a XML Typy danych JSON Analiza JSON JSON Obiekty JSON Tablice JSON Serwer JSON JSON PHP JSON HTML JSON JSONP

JS kontra jQuery

Selektory jQuery jQuery HTML jQuery CSS jQuery DOM

Grafika JS

Grafika JS JS płótno JS Działka JS Chart.js Wykres JS Google JS D3.js

Przykłady JS

Przykłady JS JS HTML DOM Wejście JS HTML Obiekty HTML JS Wydarzenia JS HTML Przeglądarka JS Edytor JS Ćwiczenia JS JS Quiz Certyfikat JS

Referencje JS

Obiekty JavaScript Obiekty HTML DOM


Instrukcja przełączania JavaScript


Instrukcja switchsłuży do wykonywania różnych działań na podstawie różnych warunków.


Instrukcja przełącznika JavaScript

Użyj switchinstrukcji, aby wybrać jeden z wielu bloków kodu do wykonania.

Składnia

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

Tak to działa:

  • Wyrażenie przełącznika jest oceniane raz.
  • Wartość wyrażenia jest porównywana z wartościami każdego przypadku.
  • Jeśli istnieje dopasowanie, wykonywany jest powiązany blok kodu.
  • Jeśli nie ma dopasowania, wykonywany jest domyślny blok kodu.

Przykład

Metoda getDay()zwraca dzień tygodnia jako liczbę z zakresu od 0 do 6.

(Niedziela=0, Poniedziałek=1, Wtorek=2 ..)

W tym przykładzie użyto numeru dnia tygodnia do obliczenia nazwy dnia tygodnia:

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

Wynikiem dnia będzie:

Saturday


Słowo kluczowe przerwy

Kiedy JavaScript dotrze do break słowa kluczowego, wyłamuje się z bloku przełącznika.

Spowoduje to zatrzymanie wykonywania wewnątrz bloku przełączników.

Nie ma potrzeby łamania ostatniej obudowy w bloku przełączników. Blok i tak się łamie (kończy).

Uwaga: Jeśli pominiesz instrukcję break, następna sprawa zostanie wykonana, nawet jeśli ocena nie pasuje do przypadku.


Domyślne słowo kluczowe

Słowo defaultkluczowe określa kod do uruchomienia, jeśli nie ma dopasowania wielkości liter:

Przykład

Metoda getDay()zwraca dzień tygodnia jako liczbę z zakresu od 0 do 6.

Jeśli dzisiaj nie jest ani sobota (6), ani niedziela (0), napisz domyślną wiadomość:

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

Wynikiem tekstu będzie:

Today is Saturday

Sprawa defaultnie musi być ostatnim przypadkiem w bloku przełączników:

Przykład

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

Jeśli defaultnie jest to ostatni przypadek w bloku przełączników, pamiętaj, aby zakończyć domyślny przypadek przerwą.


Wspólne bloki kodu

Czasami będziesz chciał, aby różne przypadki przełączników używały tego samego kodu.

W tym przykładzie 4 i 5 mają ten sam blok kodu, a 0 i 6 inny blok kodu:

Przykład

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

Szczegóły przełączania

Jeśli wiele obserwacji odpowiada wartości obserwacji, wybierany jest pierwszy przypadek.

Jeśli nie zostaną znalezione żadne pasujące przypadki, program kontynuuje do domyślnej etykiety.

Jeśli nie zostanie znaleziona żadna etykieta domyślna, program kontynuuje wykonywanie instrukcji po przełączniku .


Ścisłe porównanie

Przypadki Switch używają ścisłego porównania (===).

Aby wartości były zgodne, muszą być tego samego typu.

Ścisłe porównanie może być prawdziwe tylko wtedy, gdy operandy są tego samego typu.

W tym przykładzie nie będzie dopasowania dla x:

Przykład

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

Sprawdź się za pomocą ćwiczeń

Ćwiczenie:

Utwórz switchoświadczenie, które będzie ostrzegać „Hello”, jeśli fruitsjest to „banan” i „Witamy”, jeśli fruitsjest to „jabłko”.

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