Příkaz JavaScript Switch je příkaz toku podmíněného řízení. Je neuvěřitelně užitečný pro vytváření podmíněných bloků se spoustou klauzulí.
Tento článek je návodem na příkaz switch a jak jej používat. Porovnáme to také s jinými podmíněnými konstrukcemi, příkazy if a ternárními operátory, abyste věděli, kdy je použít.
Table of Contents
Co je příkaz Switch v JavaScriptu?
Příkaz JavaScript Switch Statement se používá k rozhodnutí, kterou větev kódu spustit na základě hodnoty výrazu. Je to jeden ze dvou podmíněných příkazů v JavaScriptu.
První je příkaz if a druhý je ternární operátor. Funguje podobně jako tyto dva, ale má různé nuance, takže je pro některé případy ideální. V tomto článku to vše prozkoumáme.
Jak používat příkaz JavaScript Switch
V této části článku vysvětlím příkaz JavaScript Switch Statement a jak jej používat. Budu používat příklady kódu, takže budete potřebovat kompilátor JavaScriptu, abyste je mohli následovat. Nejjednodušší použití je tento online kompilátor JavaScriptu. Případně si můžete přečíst náš článek o nejlepších online JavaScript IDE.
Obecná syntaxe
Obecná syntaxe příkazu switch je následující:
switch(<expression>) {
case <value 1>:
<statements>
break;
case <value 2>:
<statements>
break;
default:
<statements>
}
Klíčové slovo switch označuje začátek bloku přepínače JavaScriptu. Do závorek vložíte libovolný JavaScriptový výraz. Výraz je cokoliv, co se vyhodnocuje jako hodnota. Například literály, jako jsou řetězce nebo čísla, proměnné nebo volání funkcí.
Dále přidáme tělo příkazu switch mezi složené závorky. Tělo se skládá z několika případů. Každý případ má hodnotu a skupinu výroků. Pokud se výraz v závorkách rovná hodnotě případu, pak se příkazy daného případu provedou.
Pro každý případ můžeme přidat klíčové slovo break. Přidání tohoto slova je zcela volitelné. Pokud jej přidáte, JavaScript se vymaní z bloku přepínače, když na něj narazí. Pokud není přítomen, JavaScript bude nadále spouštět všechny případy po něm. Toto je známé jako propadnout. Pokud nechcete využít výhodu pádu, doporučujeme přidat klíčové slovo break.
Poslední klíčové slovo, které je třeba vzít na vědomí, je výchozí klíčové slovo. Tento případ odpovídá jakékoli hodnotě výrazu v závorkách.
Příklady
Tato část předvede různé příklady použití příkazu switch.
#1. S Fallthrough
Zde je příklad použití příkazu switch bez klíčového slova break. Účelem toho je ukázat pád.
V tomto příkladu píšeme kód pro zpracování různých stavových kódů 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')
}
Ve výše uvedeném úryvku kódu zkontrolujeme, zda se hodnota rovná konkrétnímu stavovému kódu, a poté vytiskneme zprávu popisující stavový kód.
Sledujte, co se stane, když nastavíte stavový kód na 403.
Po spárování 403 případů byly spárovány i všechny následující případy. Tomu se říká pád. To není ideální, protože často rádi porovnáme jeden případ. Tento podivný vtípek JavaScriptu je důvodem, proč je nutné přidat klíčové slovo break.
#2. Bez Fallthrough
Abychom se vyhnuli chybám, přidáváme klíčové slovo break na konec každého případu. Následující příklad ukazuje, co se stane, když to uděláte.
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 když spustíte výše uvedený kód se stavovým kódem 403, dostanete toto.
Jak vidíte, kód se nyní shoduje pouze s jedním případem a vyhýbá se výpadkům.
#3. Užitečný Fallthrough
To znamená, že je důležité poznamenat, že propad může být v některých případech užitečný. Zvažte následující příklad, kde chceme zkontrolovat, zda se osoba pohybuje vodorovně nebo svisle na základě směrového vstupu.
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;
}
Pokud nastavíte směr doleva a spustíte kód výše, výsledek je toto:
A když nastavíte směr doprava, dostanete stále stejný výsledek:
Je to proto, že když se levé pouzdro shoduje, propadne do pravého pouzdra a vytiskne „horizontální pohyb“. Ale protože existuje klíčové slovo break, nespadá do velikosti písmen up. Když se správná velká a malá písmena shodují, spustí příkazy se správnými velkými a malými písmeny a přeruší se.
Proto je ‚horizontální pohyb‘ zobrazen, když je směr vlevo nebo vpravo. Fallthrough vám tedy umožňuje vytvořit ve vašem kódu logiku NEBO.
#4. Odpovídající rozsahy
Příkaz JavaScript switch kontroluje, zda se hodnota case rovná hodnotě výrazu. Pokud ano, provede v takovém případě příkazy. Někdy však můžete chtít zkontrolovat, zda je hodnota v daném rozsahu. Přiřazení rozsahů může být složité, ale níže uvedený fragment kódu ukazuje řešení.
V níže uvedeném příkladu implementujeme program, který po udělení známky vytiskne známku. Pokud je například značka vyšší než 90, program vytiskne A+. Pokud je vyšší než 80, ale méně než 90, vytiskne A atd.
Abych to udělal, vložil jsem výraz true do závorek. Potom byla hodnota každého případu definována jako logická operace, která bude platná pouze v případě, že je značka v rozsahu pro daný případ. Například značka posledního případu >= 90 bude pravdivá pouze tehdy, pokud je značka větší nebo rovna 90. Bude tedy odpovídat hodnotě výrazu, protože pravda se rovná true.
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')
}
Výstup výše uvedeného kódu, když je značka nastavena na 80, je:
A když je značka nastavena na 95:
A když je známka 45:
Lexikální rozsah
Příkazy uvnitř případu ve přepínači nejsou lexikálně vymezeny. To znamená, že proměnné definované v jednom případě budou přístupné v jiném případě. To je důležité vědět, když píšete bloky přepínačů, kde se bude shodovat více než jeden případ. Zde je příklad pro lepší vysvětlení:
switch (true) {
case true:
let num = 10
case true:
console.log(num);
}
Ve výše uvedeném fragmentu kódu se oba případy shodují. V prvním případě definujeme proměnnou num; ve druhém přistupujeme k jeho hodnotě. Nedostaneme žádné chyby, jak můžete vidět na snímku obrazovky níže:
Rozdíl mezi příkazem Switch a dalšími podmíněnými podmínkami
Příkaz Switch je vhodnější pro scénáře, kde testujete více podmínek. Příkaz if je vhodný pro podmínky, kdy testujete 2 nebo 3 podmínky. Ternární operátor je vhodný pouze pro podmínky, kdy chcete vyjádřit podmínku jako jednořádkovou.
Pro stručnost byste se měli rozhodnout nejprve napsat ternární operátory. Pokud není možné vyjádřit logiku ternárním operátorem, můžete použít příkaz if. Pokud to však není možné, rozhodnete se pro příkaz switch.
Závěr
Tento článek se zabýval příkazem switch, jeho používáním a jeho podivnými zvláštnostmi. Také jsme probrali, kdy ji použít.
Dále možná budete chtít zdokonalit JavaScript pomocí těchto cheatů pro JavaScript.