Un ghid pentru declarația JavaScript Switch cu exemple

de
Tweet
Share
Share
Pin

Instrucțiunea JavaScript Switch este o instrucțiune de flux de control condiționat. Este incredibil de util pentru a crea blocuri condiționate cu o mulțime de clauze.

Acest articol este un tutorial despre declarația switch și despre cum se utilizează. De asemenea, îl vom compara cu alte constructe condiționate, instrucțiuni if ​​și operatori ternari, astfel încât să știți când să folosiți fiecare.

Ce este declarația Switch în JavaScript?

Declarația JavaScript Switch este folosită pentru a decide ce ramură de cod să execute pe baza valorii unei expresii. Este una dintre cele două instrucțiuni condiționale din JavaScript.

Prima fiind instrucțiunea dacă și a doua fiind operatorul ternar. Funcționează la fel ca cele două, dar are nuanțe diferite, ceea ce îl face ideal pentru unele cazuri. În acest articol, vom explora toate acestea.

Cum să utilizați JavaScript Switch Statement

În această parte a articolului, voi explica instrucțiunea JavaScript Switch și cum să o utilizez. Voi folosi exemple de cod, așa că veți avea nevoie de un compilator JavaScript pentru a urma. Cel mai ușor de folosit este acest compilator JavaScript online. Alternativ, puteți verifica articolul nostru despre cele mai bune IDE-uri JavaScript online.

Sintaxă generală

Sintaxa generală pentru o instrucțiune switch este următoarea:

switch(<expression>) {
    case <value 1>:
        <statements>
        break;
    case <value 2>:
        <statements>
        break;
    default:
        <statements>
}

Cuvântul cheie switch marchează începutul unui bloc de comutare JavaScript. În paranteze, introduceți orice expresie JavaScript. O expresie este orice evaluează la o valoare. De exemplu, literale, cum ar fi șiruri de caractere sau numere, variabile sau apeluri de funcții.

Apoi, adăugăm corpul instrucțiunii switch între acolade. Corpul este format din mai multe cazuri. Fiecare caz are o valoare și un grup de afirmații. Dacă expresia dintre paranteze este egală cu valoarea casei, atunci instrucțiunile casei respective sunt executate.

  Cercetarea competitivă este mai ușoară decât credeți cu Semrush

Pentru fiecare caz, putem adăuga cuvântul cheie break. Adăugarea acestui cuvânt este complet opțională. Dacă îl adăugați, JavaScript iese din blocul de comutare atunci când îl întâlnește. Dacă nu este prezent, JavaScript va continua să ruleze toate cazurile după el. Acest lucru este cunoscut sub numele de cădere. Cu excepția cazului în care doriți să profitați de fall through, este recomandat să adăugați cuvântul cheie break.

Ultimul cuvânt cheie de care trebuie luat în considerare este cuvântul cheie implicit. Acest caz se potrivește cu orice valoare a expresiei dintre paranteze.

Exemple

Această secțiune va demonstra diferite exemple de utilizare a instrucțiunii switch.

#1. Cu Fallthrough

Iată un exemplu de utilizare a instrucțiunii switch fără cuvântul cheie break. Scopul acestui lucru este de a demonstra căderea.

În acest exemplu, scriem cod pentru a gestiona diferite coduri de stare 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')
}

În fragmentul de cod de mai sus, verificăm dacă o valoare este egală cu un anumit cod de stare, apoi tipărim un mesaj care descrie codul de stare.

Observați ce se întâmplă când setați codul de stare la 403.

După potrivirea celor 403 cazuri, toate cazurile care au urmat au fost, de asemenea, potrivite. Aceasta se numește cădere. Acest lucru nu este ideal, deoarece adesea ne place să potrivim un singur caz. Această bizară ciudată a JavaScript este motivul pentru care este necesar să adăugați cuvântul cheie break.

#2. Fără Fallthrough

Pentru a evita căderea, adăugăm cuvântul cheie break la sfârșitul fiecărui caz. Următorul exemplu demonstrează ce se întâmplă atunci când o faci.

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;
}

Și când rulați codul de mai sus cu codul de stare 403, obțineți asta.

  Calea corectă de a defini metrica Agile

După cum puteți vedea, codul se potrivește acum doar cu un caz și evită căderea.

#3. Fallthrough util

Acestea fiind spuse, este important să rețineți că căderea poate fi utilă în unele cazuri. Luați în considerare următorul exemplu în care dorim să verificăm dacă o persoană se mișcă orizontal sau vertical pe baza intrării direcționale.

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;
}

Dacă setați direcția spre stânga și rulați codul de mai sus, acesta este rezultatul:

Și când setați direcția la dreapta, obțineți în continuare același rezultat:

Acest lucru se datorează faptului că atunci când carcasa din stânga se potrivește, aceasta cade în carcasa din dreapta și imprimă „mișcare orizontală”. Dar, deoarece există un cuvânt cheie break, acesta nu se încadrează în cazul superior. Când se potrivește majusculele corecte, rulează instrucțiunile în cazul corect și se întrerupe.

Prin urmare, „mișcarea orizontală” este afișată atunci când direcția este fie la stânga, fie la dreapta. Prin urmare, fallthrough vă permite să creați logica SAU în codul dvs.

#4. Intervalele de potrivire

Instrucțiunea JavaScript switch verifică dacă valoarea unui caz este egală cu valoarea expresiei. Dacă da, execută instrucțiunile în acest caz. Cu toate acestea, poate doriți uneori să verificați dacă o valoare se află într-un anumit interval. Potrivirea intervalelor poate fi dificilă, dar fragmentul de cod de mai jos demonstrează o soluție.

În exemplul de mai jos, implementăm un program care, având o notă, imprimă nota. De exemplu, dacă marcajul este peste 90, programul va imprima A+. Dacă este peste 80, dar mai mic de 90, se va imprima A și așa mai departe.

Pentru a face acest lucru, am pus expresia adevărat în paranteze. Apoi, valoarea fiecărui caz a fost definită ca o operație logică care va fi adevărată numai dacă marca se află în intervalul pentru acel caz. De exemplu, ultimul semn de caz >= 90 va fi adevărat numai dacă semnul este mai mare sau egal cu 90. Prin urmare, se va potrivi cu valoarea expresiei, deoarece adevărat este egal cu adevărat.

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')
}

Ieșirea codului de mai sus atunci când marcajul este setat la 80 este:

  Tehnici de management de proiect care te vor face un profesionist

Și când marca este setată la 95:

Și când nota este 45:

Scoping lexical

Declarațiile din interiorul unui caz într-un comutator nu au un scop lexical. Aceasta înseamnă că variabilele definite într-un caz vor fi accesibile într-un caz diferit. Acest lucru este important de știut pe măsură ce scrieți blocuri de comutare în care se vor potrivi mai multe cazuri. Iată un exemplu pentru a explica mai bine acest lucru:

switch (true) {
    case true:
        let num = 10
    case true:
        console.log(num);
}

În fragmentul de cod de mai sus, ambele cazuri se potrivesc. În primul caz, definim variabila num; în al doilea, accesăm valoarea acestuia. Nu vom primi nicio eroare, așa cum puteți vedea din captura de ecran de mai jos:

Diferența dintre o declarație Switch și alte condiții

O declarație Switch este mai potrivită pentru scenariile în care testați mai multe condiții. O declarație if este potrivită pentru condițiile în care testați 2 sau 3 condiții. Un operator ternar este bun numai pentru condițiile în care doriți să exprimați o condițională ca o singură linie.

Pentru concizie, ar trebui să optați pentru a scrie mai întâi operatori ternari. Dacă este imposibil să exprimați logica într-un operator ternar, atunci puteți utiliza o instrucțiune if. Dar dacă acest lucru nu este posibil, optați pentru declarația switch.

Concluzie

Acest articol a acoperit declarația switch, cum să o folosești și ciudateniile sale ciudate. Am menționat și când să-l folosim.

Apoi, poate doriți să îmbunătățiți JavaScript utilizând aceste foi de cheat JavaScript.