JavaScript Switch-sætningen er en betinget kontrol-flow-sætning. Det er utroligt nyttigt til at skabe betingede blokke med masser af klausuler.
Denne artikel er en selvstudie om switch-erklæringen, og hvordan man bruger den. Vi vil også sammenligne det med andre betingede konstruktioner, if-sætninger, og ternære operatorer, så du måske ved, hvornår du skal bruge hver.
Indholdsfortegnelse
Hvad er switch-erklæringen i JavaScript?
JavaScript Switch Statement bruges til at bestemme, hvilken kodegren der skal udføres baseret på værdien af et udtryk. Det er en af de to betingede udsagn i JavaScript.
Den første er hvis-sætningen og den anden er den ternære operator. Den fungerer meget som de to, men har forskellige nuancer, hvilket gør den ideel til nogle tilfælde. I denne artikel skal vi udforske alt det.
Sådan bruges JavaScript Switch Statement
I denne del af artiklen vil jeg forklare JavaScript Switch Statement og hvordan man bruger det. Jeg vil bruge kodeeksempler, så du skal bruge en JavaScript-compiler for at følge med. Den nemmeste at bruge er denne online JavaScript-kompiler. Alternativt kan du tjekke vores artikel om de bedste online JavaScript IDE’er.
Generel syntaks
Den generelle syntaks for en switch-sætning er som følger:
switch(<expression>) {
case <value 1>:
<statements>
break;
case <value 2>:
<statements>
break;
default:
<statements>
}
Switch-nøgleordet markerer begyndelsen på en JavaScript-switchblok. Indenfor parentesen sætter du et hvilket som helst JavaScript-udtryk ind. Et udtryk er alt, der evalueres til en værdi. For eksempel bogstaver som strenge eller tal, variabler eller funktionskald.
Dernæst tilføjer vi brødteksten i switch-erklæringen mellem krøllede seler. Kroppen består af flere tilfælde. Hvert tilfælde har en værdi og en gruppe af udsagn. Hvis udtrykket mellem parenteserne er lig med en sags værdi, udføres sagens sætninger.
For hvert tilfælde kan vi tilføje søgeordet pause. Tilføjelse af dette ord er helt valgfrit. Hvis du tilføjer det, bryder JavaScript ud af switch-blokken, når det støder på det. Hvis det ikke er til stede, vil JavaScript fortsætte med at køre alle sager efter det. Dette er kendt som falde igennem. Medmindre du vil udnytte faldet igennem, anbefales det, at du tilføjer søgeordet pause.
Det sidste søgeord at notere sig er standardsøgeordet. Dette tilfælde matcher enhver værdi af udtrykket mellem parenteserne.
Eksempler
Dette afsnit vil vise forskellige eksempler på brug af switch-sætningen.
#1. Med Fallthrough
Her er et eksempel på brug af switch-sætningen uden break nøgleordet. Formålet med dette er at demonstrere gennemfald.
I dette eksempel skriver vi kode til at håndtere forskellige HTTP-statuskoder:
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')
}
I kodestykket ovenfor tjekker vi, om en værdi er lig med en bestemt statuskode, og udskriver derefter en besked, der beskriver statuskoden.
Bemærk, hvad der sker, når du indstiller statuskoden til 403.
Efter at have matchet de 403 sager blev alle de efterfølgende sager også matchet. Dette kaldes gennemfald. Dette er ikke ideelt, da vi ofte kan lide at matche én sag. Denne underlige egenskab ved JavaScript er grunden til, at det er nødvendigt at tilføje søgeordet pause.
#2. Uden Fallthrough
For at undgå gennemfald tilføjer vi søgeordet pause i slutningen af hver sag. Følgende eksempel viser, hvad der sker, når du gør det.
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;
}
Og når du kører koden ovenfor med statuskoden 403, får du dette.
Som du kan se, matcher koden nu kun én sag og undgår gennemfald.
#3. Nyttigt gennemfald
Når det er sagt, er det vigtigt at bemærke, at gennemfald kan være nyttigt i nogle tilfælde. Overvej følgende eksempel, hvor vi vil kontrollere, om en person bevæger sig vandret eller lodret baseret på retningsinput.
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;
}
Hvis du indstiller retningen til venstre og kører koden ovenfor, er dette resultatet:
Og når du indstiller retningen til højre, får du stadig det samme resultat:
Dette skyldes, at når den venstre sag passer sammen, falder den igennem til den højre sag og udskriver ‘vandret bevægelse’. Men da der er et pausenøgleord, falder det ikke igennem til op-sagen. Når det rigtige tilfælde matcher, kører det udsagn i det rigtige tilfælde og bryder.
Derfor vises ‘vandret bevægelse’, når retningen enten er til venstre eller højre. Derfor giver fallthrough dig mulighed for at oprette OR-logik i din kode.
#4. Matchende rækker
JavaScript switch-sætningen kontrollerer, om værdien af et tilfælde er lig med værdien af udtrykket. Hvis det er tilfældet, udfører den erklæringerne i så fald. Du kan dog nogle gange ønsker at tjekke, om en værdi er inden for et givet interval. Matchende intervaller kan være vanskelig, men kodestykket nedenfor viser en løsning.
I eksemplet nedenfor implementerer vi et program, der med en karakter udskriver karakteren. For eksempel, hvis mærket er over 90, vil programmet udskrive A+. Hvis det er over 80, men mindre end 90, vil det udskrive A, og så videre.
For at gøre dette har jeg sat udtrykket sandt inde i parentesen. Derefter er værdien af hvert tilfælde blevet defineret som en logisk operation, der kun vil være sand, hvis mærket er inden for området for det pågældende tilfælde. For eksempel vil det sidste kasusmærke >= 90 kun være sandt, hvis mærket er større end eller lig med 90. Derfor vil det matche værdien af udtrykket, da sandt er lig med sandt.
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')
}
Outputtet af koden ovenfor, når mærket er sat til 80, er:
Og når mærket er sat til 95:
Og når mærket er 45:
Leksisk omfang
Udsagnene inde i en sag i en switch er ikke leksikalsk scoped. Det betyder, at variabler, der er defineret i et tilfælde, vil være tilgængelige i et andet tilfælde. Dette er vigtigt at vide, mens du skriver switch-blokke, hvor mere end én sag vil blive matchet. Her er et eksempel for at forklare det bedre:
switch (true) {
case true:
let num = 10
case true:
console.log(num);
}
I kodestykket ovenfor matcher begge tilfælde. I det første tilfælde definerer vi num-variablen; i det andet får vi adgang til dens værdi. Vi får ingen fejl, som du kan se på skærmbilledet nedenfor:
Forskellen mellem en switch-erklæring og andre betingelser
En Switch-erklæring er bedre egnet til scenarier, hvor du tester for flere forhold. En if-sætning er egnet til forhold, hvor du tester 2 eller 3 tilstande. En ternær operator er kun god til forhold, når du ønsker at udtrykke en betinget som en one-liner.
For kortheds skyld bør du vælge at skrive ternære operatorer først. Hvis det er umuligt at udtrykke logikken i en ternær operator, kan du bruge en hvis-sætning. Men hvis det ikke er muligt, vælger du switch-erklæringen.
Konklusion
Denne artikel dækkede switch-erklæringen, hvordan man bruger den og dens underlige særheder. Vi dækkede også, hvornår den skulle bruges.
Dernæst vil du måske polere op på JavaScript ved hjælp af disse JavaScript-snydeark.
