JavaScript Switch-setningen er en betinget kontrollflytsetning. Det er utrolig nyttig for å lage betingede blokker med mange klausuler.
Denne artikkelen er en veiledning om switch-setningen og hvordan du bruker den. Vi vil også sammenligne det med andre betingede konstruksjoner, if-setninger, og ternære operatorer, slik at du kanskje vet når du skal bruke hver.
Innholdsfortegnelse
Hva er brytererklæringen i JavaScript?
JavaScript Switch Statement brukes til å bestemme hvilken gren av kode som skal kjøres basert på verdien av et uttrykk. Det er en av de to betingede setningene i JavaScript.
Den første er hvis-setningen og den andre er den ternære operatoren. Den fungerer omtrent som de to, men har forskjellige nyanser, noe som gjør den ideell for noen tilfeller. I denne artikkelen skal vi utforske alt dette.
Slik bruker du JavaScript Switch Statement
I denne delen av artikkelen vil jeg forklare JavaScript Switch Statement og hvordan du bruker den. Jeg vil bruke kodeeksempler, så du trenger en JavaScript-kompilator for å følge med. Den enkleste å bruke er denne online JavaScript-kompilatoren. Alternativt kan du sjekke artikkelen vår om de beste online JavaScript IDE-ene.
Generell syntaks
Den generelle syntaksen for en switch-setning er som følger:
switch(<expression>) {
case <value 1>:
<statements>
break;
case <value 2>:
<statements>
break;
default:
<statements>
}
Switch-nøkkelordet markerer begynnelsen på en JavaScript-svitsjblokk. Innenfor parentesen legger du inn et hvilket som helst JavaScript-uttrykk. Et uttrykk er alt som vurderes til en verdi. For eksempel bokstaver som strenger eller tall, variabler eller funksjonskall.
Deretter legger vi til brødteksten i brytersetningen mellom krøllete seler. Kroppen består av flere tilfeller. Hver sak har en verdi og en gruppe utsagn. Hvis uttrykket mellom parentesene tilsvarer en saks verdi, blir den sakens setninger utført.
For hvert tilfelle kan vi legge til nøkkelordet pause. Å legge til dette ordet er helt valgfritt. Hvis du legger den til, bryter JavaScript ut av bryterblokken når den støter på den. Hvis den ikke er til stede, vil JavaScript fortsette å kjøre alle sakene etter den. Dette er kjent som fall through. Med mindre du ønsker å dra nytte av fall through, anbefales det at du legger til break-søkeordet.
Det siste nøkkelordet å legge merke til er standardnøkkelordet. Dette tilfellet samsvarer med enhver verdi av uttrykket mellom parentesene.
Eksempler
Denne delen vil vise forskjellige eksempler på bruk av switch-setningen.
#1. Med Fallthrough
Her er et eksempel på bruk av switch-setningen uten nøkkelordet break. Hensikten med dette er å demonstrere fallthrough.
I dette eksemplet skriver vi kode for å håndtere forskjellige 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 kodebiten ovenfor sjekker vi om en verdi er lik en bestemt statuskode, og skriver deretter ut en melding som beskriver statuskoden.
Se hva som skjer når du setter statuskoden til 403.
Etter å ha matchet de 403 sakene, ble alle sakene etter det også matchet. Dette kalles fallthrough. Dette er ikke ideelt, da vi ofte liker å matche ett tilfelle. Dette merkelige innslaget ved JavaScript er grunnen til at det er nødvendig å legge til nøkkelordet break.
#2. Uten Fallthrough
For å unngå gjennombrudd legger vi til nøkkelordet break på slutten av hver sak. Følgende eksempel viser hva som skjer når du gjø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 kjører koden ovenfor med statuskoden 403, får du dette.
Som du kan se, samsvarer koden nå med bare ett tilfelle og unngår gjennombrudd.
#3. Nyttig Fallthrough
Når det er sagt, er det viktig å merke seg at fallthrough kan være nyttig i noen tilfeller. Tenk på følgende eksempel der vi ønsker å sjekke om en person beveger seg horisontalt eller vertikalt basert på retningsinputt.
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 setter retningen til venstre og kjører koden ovenfor, er dette resultatet:
Og når du setter retningen til høyre, får du fortsatt det samme resultatet:
Dette er fordi når venstre kasse passer, faller den gjennom til høyre kasse og skriver ut «horisontal bevegelse». Men siden det er et pausenøkkelord, faller det ikke gjennom til opp-saken. Når riktig kasus stemmer, kjører den utsagnene i riktig kasus og bryter.
Derfor vises «horisontal bevegelse» når retningen er enten venstre eller høyre. Derfor lar fallthrough deg lage OR-logikk i koden din.
#4. Matchende områder
JavaScript-switch-setningen sjekker om verdien til en sak er lik verdien til uttrykket. I så fall utfører den setningene i så fall. Det kan imidlertid hende du vil sjekke om en verdi er innenfor et gitt område. Samsvarende områder kan være vanskelig, men kodebiten nedenfor viser en løsning.
I eksemplet nedenfor implementerer vi et program som, gitt en karakter, skriver ut karakteren. For eksempel, hvis merket er over 90, vil programmet skrive ut A+. Hvis den er over 80, men mindre enn 90, vil den skrives ut A, og så videre.
For å gjøre dette har jeg satt uttrykket sant innenfor parentesen. Deretter har verdien av hvert tilfelle blitt definert som en logisk operasjon som bare vil være sann hvis merket er innenfor området for det tilfellet. For eksempel vil det siste kasusmerket >= 90 bare være sant hvis merket er større enn eller lik 90. Derfor vil det samsvare med verdien av uttrykket siden sant er lik sant.
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')
}
Utdata fra koden ovenfor når merket er satt til 80 er:
Og når merket er satt til 95:
Og når merket er 45:
Leksikalsk omfang
Utsagnene i en sak i en svitsj er ikke leksikalsk rammet. Dette betyr at variabler definert i ett tilfelle vil være tilgjengelige i et annet tilfelle. Dette er viktig å vite når du skriver bryterblokker hvor mer enn ett tilfelle vil bli matchet. Her er et eksempel for å forklare dette bedre:
switch (true) {
case true:
let num = 10
case true:
console.log(num);
}
I kodebiten ovenfor samsvarer begge tilfeller. I det første tilfellet definerer vi num-variabelen; i det andre får vi tilgang til verdien. Vi vil ikke få noen feil, som du kan se fra skjermbildet nedenfor:
Forskjellen mellom en brytererklæring og andre betingelser
En Switch-setning er bedre egnet for scenarier der du tester for flere forhold. En hvis-erklæring passer for forhold der du tester 2 eller 3 tilstander. En ternær operatør er bare bra for forhold når du ønsker å uttrykke en betinget som en one-liner.
For korthets skyld bør du velge å skrive ternære operatorer først. Hvis det er umulig å uttrykke logikken i en ternær operator, kan du bruke en hvis-setning. Men hvis det ikke er mulig, velger du switch-setningen.
Konklusjon
Denne artikkelen dekket brytersetningen, hvordan du bruker den og dens rare særheter. Vi dekket også når den skal brukes.
Deretter kan det være lurt å finpusse JavaScript ved å bruke disse JavaScript-juksearkene.