Podejmowanie decyzji za pomocą instrukcji switch w Javascript

Shreyas Patil2022-07-19 · 9 min read

Podejmowanie decyzji za pomocą instrukcji switch w Javascript

Wprowadzenie

Instrukcje warunkowe są jednymi z najważniejszych struktur sterujących w każdym języku programowania. Używamy ich do określania zachowania programu w zależności od określonego warunku. W Javascript, bloki warunkowe mogą być budowane przy użyciu if, else if, else, oraz switch instrukcji.

Instrukcja switch sprawia, że przepływ sterowania jest łatwy do odczytania, podejmując decyzję na podstawie możliwych wyników wyrażenia. W zależności od dopasowanego przypadku, może zostać wykonany jeden lub więcej bloków kodu. Instrukcja switch jest podobna do instrukcji else if. Jednakże switch ma bardziej czytelną składnię. Jest również idealna w scenariuszach z wieloma możliwymi wynikami.

W tym samouczku skupimy się na instrukcji switch w języku Javascript i zaimplementujemy ją do budowy złożonych struktur sterujących. Dowiemy się również, jak używać instrukcji break , case, oraz default wewnątrz bloku switch do kierowania przepływem sterowania.

Używanie instrukcji Switch

Instrukcja switch działa poprzez porównanie wartości zmiennej z możliwymi wyrażeniami. Następnie wykonuje blok kodu pasujący do wyniku. Składnia instrukcji switch nie różni się od instrukcji if . Krótko mówiąc, składnia instrukcji switch jest zapisywana jako:

switch()
{ }

1 2	switch() { }

Poniżej znajduje się przykład instrukcji switch. Posiada ona dwa przypadki lub dwa możliwe wyniki wraz z opcją domyślną określoną przez słowo kluczowe default. Ta opcja domyślna jest wykonywana, gdy wykonanie dobiega końca lub gdy nie zostanie znaleziony żaden pasujący przypadek:

switch (expression) {
    case x:   
        // wykonuje ten blok kodu, gdy wyrażenie pasuje do case x
        break;

    case y:
        // wykonuje ten blok kodu, gdy wyrażenie pasuje do case y
        break;

    default:
        // blok domyślny
}

switch (expression) {

case x:

// wykonuje ten blok kodu, gdy wyrażenie pasuje do case x

break;

case y:

// wykonuje ten blok kodu, gdy wyrażenie pasuje do case y

break;

default:

// blok domyślny

}

Powyższy kod jest wykonywany w następujący sposób:

Najpierw oceniane jest wyrażenie.
Następnie wynik wyrażenia jest dopasowywany do case x. Jeśli wartość pasuje, blok kodu pod case x jest wykonywany.
Jeśli wyrażenie nie pasuje do case x, wtedy dopasowywany jest case y. Jeśli zostanie znalezione dopasowanie, wtedy kod case y jest wykonywany.
Na koniec, jeśli ani case x ani case y nie pasuje, wtedy wykonywany jest kod default jest wykonywany, a sterowanie opuszcza blok switch .

Działający przykład

Aby zrozumieć instrukcję switch, przyjrzyjmy się działającemu przykładowi. Wyciągniemy wartość dnia tygodnia dla bieżącej daty, używając metody getDay() obiektu Date w języku Javascript. Ta wartość jest liczbą, dla niedzieli aż do 6 dla soboty. Ocenimy ją pod kątem wartości, aby określić, który to dzień tygodnia:

const day = new Date().getDay();

1	const day = new Date().getDay();

Następnie przekażemy tę wartość do instrukcji switch. Instrukcja switch wykona się od góry do dołu, aby dopasować ją do przypadków i określić, który to dzień tygodnia. Po znalezieniu przypadku, polecenie break zatrzyma blok switch przed dalszym sprawdzaniem instrukcji:

// Ustaw bieżący dzień tygodnia jako zmienną, gdzie 0 to niedziela, a 6 to sobota
const day = new Date().getDay();

switch (day) {
case 0:
    console.log("Jest niedziela");
    break;

case 1:
    console.log("Jest poniedziałek!");
    break;

case 2:
    console.log("Jest wtorek.");
    break;

case 3:
    console.log("Już środa!");
    break;

case 4:
    console.log("Jest czwartek");
    break;

case 5:
    console.log("Miłego piątku!");
    break;

case 6:
    console.log("Jest sobota!");
    break;

default:
    console.log("Brak pasującego przypadku")

}

// Ustaw bieżący dzień tygodnia jako zmienną, gdzie 0 to niedziela, a 6 to sobota

const day = new Date().getDay();

switch (day) {

case 0:

console.log("Jest niedziela");

break;

case 1:

console.log("Jest poniedziałek!");

break;

case 2:

console.log("Jest wtorek.");

break;

case 3:

console.log("Już środa!");

break;

case 4:

console.log("Jest czwartek");

break;

case 5:

console.log("Miłego piątku!");

break;

case 6:

console.log("Jest sobota!");

break;

default:

console.log("Brak pasującego przypadku")

}

W zależności od wartości zwróconej przez metodę getDate(), będzie ona testowana pod kątem kolejnych przypadków, zaczynając od góry. Wynik będzie się różnić w zależności od dnia, w którym uruchomiono kod. Domyślny blok kodu został umieszczony po to, aby obsłużyć sytuację, w której żaden przypadek nie zostanie dopasowany. Jednak w tym kodzie blok default nigdy nie zostanie wywołany, ponieważ liczba dni tygodnia jest ograniczona.

Instrukcja break upewnia się, że po dopasowaniu przypadku żadne kolejne przypadki nie są już sprawdzane, a sterowanie opuszcza instrukcję switch. Dzięki temu program działa wydajniej i szybciej.

Testowanie zakresów w instrukcji Switch

Do tej pory przyglądaliśmy się bardzo prostym przypadkom użycia. Czasami jednak zachodzi potrzeba przetestowania zakresu wartości, a nie pojedynczej wartości. Możemy to zrobić, ustawiając nasze wyrażenie na true i wykonując operację wewnątrz każdej instrukcji case.

Zademonstrujmy ten przypadek użycia na przykładzie. Weźmiemy liczbę, a następnie przekonwertujemy ją na ocenę, korzystając z poniższej kategoryzacji:

Ocena 90 i powyżej to A
Ocena od 80 do 89 to B
Ocena od 70 do 79 to C
Ocena od 60 do 69 to D
Ocena 59 lub poniżej to F

Zapiszemy te warunki jako instrukcje switch. Poniżej znajduje się kod dla tego przykładu:

// Ocena ucznia
const grade = 87;

switch (true) {

    // Jeśli wynik wynosi 90 lub więcej
    case grade >= 90:
    console.log("A");
    break;

    // Jeśli wynik wynosi 80 lub więcej
    case grade >= 80:
    console.log("B");
    break;

    // Jeśli wynik wynosi 70 lub więcej
    case grade >= 70:
    console.log("C");
    break;

    // Jeśli wynik wynosi 60 lub więcej
    case grade >= 60:
    console.log("D");
    break;

    // Wszystko 59 lub poniżej oznacza niezaliczenie
    default:
    console.log("F");
}

// Ocena ucznia

const grade = 87;

switch (true) {

// Jeśli wynik wynosi 90 lub więcej

case grade >= 90:

console.log("A");

break;

// Jeśli wynik wynosi 80 lub więcej

case grade >= 80:

console.log("B");

break;

// Jeśli wynik wynosi 70 lub więcej

case grade >= 70:

console.log("C");

break;

// Jeśli wynik wynosi 60 lub więcej

case grade >= 60:

console.log("D");

break;

// Wszystko 59 lub poniżej oznacza niezaliczenie

default:

console.log("F");

}

W przeciwieństwie do powyższych przykładów kodu, tutaj ustawiliśmy wyrażenie w nawiasie jako true. Stąd też, niezależnie od tego, która instrukcja case pasuje do wartości true, zostanie ona wykonana. Podobnie jak w przypadku instrukcji else if, wykonana zostanie pierwsza instrukcja pasująca do określonej wartości. Tutaj wynikiem będzie B, pomimo faktu, że nawet C i D również pasują do wyrażenia.

Wiele przypadków

Jeśli chcesz mieć więcej niż jeden przypadek z tym samym blokiem kodu, jest to również możliwe. Jest to analogiczne do warunku lub w instrukcji if. W takich scenariuszach możemy określić więcej niż jeden przypadek dla każdego bloku kodu.

Aby zilustrować tę koncepcję, przedstawimy przykład z miesiącami roku. Skategoryzujemy te miesiące na pory roku. Najpierw użyjemy nowej metody Date() do znalezienia liczby odpowiadającej bieżącemu miesiącowi i przypiszemy ją do zmiennej month. Metoda Date().getMonth() zwraca liczbę od 0 do 11, gdzie 0 oznacza styczeń, a 11 jest przypisane do grudnia.

Skategoryzujemy je przy użyciu poniższej specyfikacji:

Zima: styczeń, luty i marzec
Wiosna: kwiecień, maj i czerwiec
Lato: lipiec, sierpień i wrzesień
Jesień: październik, listopad i grudzień

Oto jak będzie wyglądać kod:

const month = new Date().getMonth();

switch (month) {

    // Styczeń, luty, marzec
    case 0:
    case 1:
    case 2:
        console.log("Zima");
        break;

    // Kwiecień, maj, czerwiec
    case 3:
    case 4:
    case 5:
        console.log("Wiosna");
        break;
    
    // Lipiec, sierpień, wrzesień
    case 6:
    case 7:
    case 8:
        console.log("Lato");
        break;
    
    // Październik, listopad, grudzień
    case 9:
    case 10:
    case 11:
        console.log("Jesień");
        break;
    
    default:
        console.log("Coś poszło nie tak.");
}

const month = new Date().getMonth();

switch (month) {

// Styczeń, luty, marzec

case 0:

case 1:

case 2:

console.log("Zima");

break;

// Kwiecień, maj, czerwiec

case 3:

case 4:

case 5:

console.log("Wiosna");

break;

// Lipiec, sierpień, wrzesień

case 6:

case 7:

case 8:

console.log("Lato");

break;

// Październik, listopad, grudzień

case 9:

case 10:

case 11:

console.log("Jesień");

break;

default:

console.log("Coś poszło nie tak.");

}

Po wykonaniu powyższego kodu, w zależności od miesiąca, w konsoli zostanie wyświetlona nazwa pory roku.

Podsumowanie

W tym samouczku pokazaliśmy, jak używać instrukcji switch w aplikacjach JavaScript. Zastosowaliśmy również instrukcję switch do zakresu i wielu przypadków wraz ze słowem kluczowym default. Jeśli chcesz dowiedzieć się więcej o JavaScript, możesz zapoznać się z następującymi samouczkami:

Miłego kodowania!

Shreyas Patil

Autor · CloudSigma

Preslav Dobrev jest projektantem kreatywnym w CloudSigma, skupiającym się na spójnej tożsamości biznesowej przy wykorzystaniu tradycyjnych i innowacyjnych kanałów marketingowych. Biegle łączy wizję artystyczną ze strategicznym marketingiem, tworząc wywierające wpływ narracje marki.

Podejmowanie decyzji za pomocą instrukcji switch w Javascript

Wprowadzenie

Używanie instrukcji Switch

Działający przykład

Testowanie zakresów w instrukcji Switch

Wiele przypadków

Podsumowanie

Shreyas Patil

Komentarze