Instrukcja JavaScript Switch jest instrukcją przepływu sterowania warunkowego. Jest niezwykle przydatny do tworzenia bloków warunkowych z dużą liczbą klauzul.
Ten artykuł stanowi samouczek dotyczący instrukcji switch i sposobu jej używania. Porównamy to również z innymi konstrukcjami warunkowymi, instrukcjami if i operatorami trójskładnikowymi, abyś wiedział, kiedy użyć każdego z nich.
Spis treści:
Co to jest instrukcja Switch w JavaScript?
Instrukcja JavaScript Switch służy do decydowania, która gałąź kodu ma zostać wykonana, na podstawie wartości wyrażenia. Jest to jedna z dwóch instrukcji warunkowych w JavaScript.
Pierwsza to instrukcja if, a druga to operator trójskładnikowy. Działa podobnie do tych dwóch, ale ma inne niuanse, co czyni go idealnym w niektórych przypadkach. W tym artykule zamierzamy to wszystko zbadać.
Jak korzystać z instrukcji JavaScript Switch
W tej części artykułu wyjaśnię instrukcję JavaScript Switch i jak z niej korzystać. Użyję przykładów kodu, więc będziesz potrzebować kompilatora JavaScript, aby śledzić dalej. Najłatwiejszy w użyciu jest ten internetowy kompilator JavaScript. Alternatywnie możesz zapoznać się z naszym artykułem na temat najlepszych internetowych IDE JavaScript.
Ogólna składnia
Ogólna składnia instrukcji switch jest następująca:
switch(<expression>) {
case <value 1>:
<statements>
break;
case <value 2>:
<statements>
break;
default:
<statements>
}
Słowo kluczowe switch oznacza początek bloku przełączającego JavaScript. W nawiasach możesz umieścić dowolne wyrażenie JavaScript. Wyrażeniem jest wszystko, co daje w wyniku wartość. Na przykład literały, takie jak ciągi znaków lub liczby, zmienne lub wywołania funkcji.
Następnie dodajemy treść instrukcji switch pomiędzy nawiasami klamrowymi. Ciało składa się z kilku przypadków. Każdy przypadek ma wartość i grupę stwierdzeń. Jeśli wyrażenie w nawiasach jest równe wartości przypadku, wówczas wykonywane są instrukcje tego przypadku.
Dla każdego przypadku możemy dodać słowo kluczowe break. Dodanie tego słowa jest całkowicie opcjonalne. Jeśli go dodasz, JavaScript wyłamie się z bloku przełącznika, gdy go napotka. Jeśli go nie ma, JavaScript będzie nadal uruchamiał wszystkie przypadki po nim. Nazywa się to upadkiem. Jeśli nie chcesz skorzystać z upadku, zaleca się dodanie słowa kluczowego break.
Ostatnim słowem kluczowym, na które należy zwrócić uwagę, jest słowo kluczowe domyślne. Ten przypadek dopasowuje dowolną wartość wyrażenia zawartego w nawiasach.
Przykłady
W tej sekcji zostaną zademonstrowane różne przykłady użycia instrukcji switch.
#1. Z Fallthrough
Oto przykład użycia instrukcji switch bez słowa kluczowego break. Celem tego jest pokazanie upadku.
W tym przykładzie piszemy kod obsługujący różne kody stanu HTTP:
const statusCode = <insert status code here>
switch (statusCode) {
case 200:
console.log('OK');
case 301:
console.log('Redirect');
case 403:
console.log('Forbidden');
case 404:
console.log('Not Found');
case 500:
console.log('Internal Server Error')
}
W powyższym fragmencie kodu sprawdzamy, czy wartość jest równa konkretnemu kodowi statusu, a następnie drukujemy komunikat opisujący kod statusu.
Obserwuj, co się stanie, gdy ustawisz kod stanu na 403.
Po dopasowaniu 403 przypadków, wszystkie kolejne przypadki również zostały dopasowane. Nazywa się to spadkiem. Nie jest to rozwiązanie idealne, gdyż często lubimy dopasowywać jeden przypadek. To dziwne dziwactwo JavaScript jest powodem, dla którego konieczne jest dodanie słowa kluczowego break.
#2. Bez upadku
Aby uniknąć błędów, na końcu każdego przypadku dodajemy słowo kluczowe break. Poniższy przykład ilustruje, co się stanie, gdy to zrobisz.
const statusCode = <insert a status code here>
switch (statusCode) {
case 200:
console.log('OK');
break;
case 301:
console.log('Redirect');
break;
case 403:
console.log('Forbidden');
break;
case 404:
console.log('Not Found');
break;
case 500:
console.log('Internal Server Error')
break;
}
A kiedy uruchomisz powyższy kod z kodem stanu 403, otrzymasz to.
Jak widać, kod pasuje teraz tylko do jednego przypadku i pozwala uniknąć błędów.
#3. Przydatny Fallout
Należy jednak pamiętać, że w niektórych przypadkach metoda awaryjna może być przydatna. Rozważmy następujący przykład, w którym chcemy sprawdzić, czy dana osoba porusza się poziomo czy pionowo, na podstawie danych wejściowych dotyczących kierunku.
const direction = '<enter direction here>'
switch(direction) {
case 'left':
case 'right':
console.log('horizontal movement');
break;
case 'up':
case 'down':
console.log('horizontal movement');
break;
}
Jeśli ustawisz kierunek na lewo i uruchomisz powyższy kod, oto wynik:
A kiedy ustawisz kierunek w prawo, nadal uzyskasz ten sam wynik:
Dzieje się tak, ponieważ gdy lewy przypadek pasuje, przechodzi do prawego przypadku i wypisuje „ruch poziomy”. Ale ponieważ istnieje słowo kluczowe break, nie odnosi się ono do przypadku w górę. Kiedy odpowiedni przypadek pasuje, uruchamia instrukcje we właściwym przypadku i przerywa.
Dlatego też, gdy kierunek jest w lewo lub w prawo, wyświetlany jest „ruch poziomy”. Dlatego też rozwiązanie awaryjne umożliwia utworzenie logiki OR w kodzie.
#4. Pasujące zakresy
Instrukcja switch JavaScript sprawdza, czy wartość przypadku jest równa wartości wyrażenia. Jeśli tak, wykonuje instrukcje w tym przypadku. Czasami jednak możesz chcieć sprawdzić, czy wartość mieści się w danym zakresie. Dopasowanie zakresów może być trudne, ale poniższy fragment kodu przedstawia obejście tego problemu.
W poniższym przykładzie realizujemy program, który po otrzymaniu oceny wypisuje ocenę. Na przykład, jeśli znak jest większy niż 90, program wydrukuje A+. Jeśli jest większa niż 80, ale mniejsza niż 90, wyświetli A i tak dalej.
Aby to zrobić, umieściłem wyrażenie true w nawiasach. Następnie wartość każdego przypadku została zdefiniowana jako operacja logiczna, która będzie prawdziwa tylko wtedy, gdy znak będzie mieścił się w przedziale dla tego przypadku. Na przykład ostatni znak przypadku >= 90 będzie prawdziwy tylko wtedy, gdy znak będzie większy lub równy 90. Dlatego będzie odpowiadał wartości wyrażenia, ponieważ prawda jest równa prawdzie.
const mark = <replace with any mark>;
switch (true) {
case mark >= 50 && mark < 60:
console.log('D');
break;
case mark >= 60 && mark < 70:
console.log('C');
break;
case mark >= 70 && mark < 80:
console.log('B');
break;
case mark >= 80 && mark < 90:
console.log('A')
break;
case mark >= 90:
console.log('A+')
break;
default:
console.log('<50')
}
Dane wyjściowe powyższego kodu, gdy znacznik jest ustawiony na 80, to:
A kiedy znak jest ustawiony na 95:
A kiedy znak wynosi 45:
Zakres leksykalny
Instrukcje wewnątrz case w przełączniku nie mają zakresu leksykalnego. Oznacza to, że zmienne zdefiniowane w jednym przypadku będą dostępne w innym przypadku. Warto o tym wiedzieć podczas pisania bloków przełączników, w których zostanie dopasowanych więcej niż jeden przypadek. Oto przykład, który lepiej to wyjaśni:
switch (true) {
case true:
let num = 10
case true:
console.log(num);
}
W powyższym fragmencie kodu oba przypadki są zgodne. W pierwszym przypadku definiujemy zmienną num; w drugim uzyskujemy dostęp do jego wartości. Nie otrzymamy żadnych błędów, jak widać na zrzucie ekranu poniżej:
Różnica między instrukcją Switch a innymi warunkami warunkowymi
Instrukcja Switch lepiej nadaje się do scenariuszy, w których testujesz wiele warunków. Instrukcja if jest odpowiednia do warunków, w których testowane są 2 lub 3 warunki. Operator trójskładnikowy jest dobry tylko w przypadku warunków, gdy chcesz wyrazić warunek warunkowy w jednej linijce.
Dla zwięzłości powinieneś najpierw zdecydować się na napisanie operatorów trójskładnikowych. Jeśli nie da się wyrazić logiki za pomocą operatora trójskładnikowego, możesz użyć instrukcji if. Jeśli jednak nie jest to możliwe, wybierasz instrukcję switch.
Wniosek
W tym artykule omówiono instrukcję switch, sposób jej użycia i związane z nią dziwactwa. Omówiliśmy także, kiedy go używać.
Następnie możesz udoskonalić JavaScript, korzystając z tych ściągawek JavaScript.