Villkorlig förgrening i JavaScript

Den här artikeln förklarar villkorlig förgrening i JavaScript.

YouTube Video

if-satsen i JavaScript

Grundläggande syntax

1if (condition) {
2    // Code that executes if the condition is true
3}

if-satsen i JavaScript är en grundläggande kontrollstruktur som används för att styra körning av kod baserat på om ett specifikt villkor är sant eller falskt. Om villkoret är sant körs kodblocket, och om det är falskt hoppas det över.

Exempel

1let x = 10;
2
3if (x > 5) {
4    console.log("x is greater than 5");
5}

I det här exemplet, eftersom värdet på x är större än 5, visas x är större än 5 i konsolen.

else-sats

Grundläggande syntax

1if (condition) {
2    // Code that executes if the condition is true
3} else {
4    // Code that executes if the condition is false
5}

Genom att använda en else-sats efter en if-sats kan du specificera kod som ska köras när villkoret är falskt.

Exempel

1let x = 3;
2
3if (x > 5) {
4    console.log("x is greater than 5");
5} else {
6    console.log("x is 5 or less");
7}

I det här fallet, eftersom x är mindre än 5, visas "x är 5 eller mindre".

else if-sats

Grundläggande syntax

1if (condition1) {
2    // Code that executes if condition1 is true
3} else if (condition2) {
4    // Code that executes if condition1 is false and condition2 is true
5} else {
6    // Code that executes if both condition1 and condition2 are false
7}

Om du vill kontrollera flera villkor, använd else if. Nästa villkor kontrolleras om den första if är falsk.

Exempel

1let x = 5;
2
3if (x > 10) {
4    console.log("x is greater than 10");
5} else if (x === 5) {
6    console.log("x is 5");
7} else {
8    console.log("x is 5 or less");
9}

I det här fallet, eftersom x är 5, visas "x är 5".

Ternär operator (villkorsoperator)

Syntax

1condition ? valueIfTrue : valueIfFalse

Om du vill skriva en if-sats mer kortfattat kan du använda den ternära operatorn.

Exempel

1const number = 7;
2const result = number % 2 === 0 ? "Even" : "Odd";
3console.log(result); // "Odd"

I det här fallet, eftersom number är 7, visas Udda.

Sammanfattning

• if-satser styr vilken kod som körs baserat på om villkoret är sant eller falskt.
• Du kan specificera beteende för när villkoret är falskt genom att använda else.
• Du kan kontrollera flera villkor med else if.
• Du kan också använda en ternär operator för att skriva villkorsförgreningar kortfattat.

switch-satsen i JavaScript

Grundläggande syntax

 1switch (expression) {
 2    case value1:
 3        // Code that executes if the expression matches value1
 4        break;
 5    case value2:
 6        // Code that executes if the expression matches value2
 7        break;
 8    default:
 9        // Code that executes if no cases match
10}

switch-satsen i JavaScript används för att jämföra ett uttryck (vanligtvis en variabel) med flera värden (fall) och köra motsvarande kod. Precis som if-satsen utför den villkorsförgrening, men den är ofta mer läsbar när det finns flera villkor.

Exempel

 1let fruit = "apple";
 2
 3switch (fruit) {
 4    case "apple":
 5        console.log("This is an apple");
 6        break;
 7    case "banana":
 8        console.log("This is a banana");
 9        break;
10    default:
11        console.log("Unknown fruit");
12}

I det här exemplet, eftersom fruit är "apple", visas "Det här är ett äpple" i konsolen.

break の役割

Genom att infoga break i slutet av varje fall avslutar du switch-uttrycket efter att ha slutfört det fallet. Om du inte skriver break, kommer nästa fall också att köras (detta kallas fall-through).

Exempel på Fall-Through

 1let color = "red";
 2
 3switch (color) {
 4    case "red":
 5        console.log("This is red");
 6    case "blue":
 7        console.log("This is blue");
 8    default:
 9        console.log("Unknown color");
10}

I det här fallet, eftersom color är "red", och det inte finns något break efter "Det här är rött", kommer både "Det här är blått" och "Okänd färg" också att visas.

Använda default

default är den del som exekveras när det inte finns någon matchning med något case. Detta motsvarar else i ett if-uttryck.

 1let animal = "dog";
 2
 3switch (animal) {
 4    case "cat":
 5        console.log("This is a cat");
 6        break;
 7    case "bird":
 8        console.log("This is a bird");
 9        break;
10    default:
11        console.log("Unknown animal");
12}

I det här fallet, eftersom animal är "dog", faller det under default, och "Okänt djur" visas.

Hantera flera värden med samma case

Om du vill utföra samma operation för flera fall kan du skriva dem i följd.

Exempel

 1let day = 1;
 2switch (day) {
 3    case 1:
 4    case 2:
 5    case 3:
 6    case 4:
 7    case 5:
 8        console.log("Weekday");
 9        break;
10    case 6:
11    case 7:
12        console.log("Weekend");
13        break;
14    default:
15        console.log("Unknown day");
16}

I det här exemplet, om day är 1, visas "Vardagsdag".

switch vs. if

• Ett if-uttryck är lämpligt för att kontrollera komplexa villkor eller intervall. Till exempel kan komplexa villkor som att en variabel x är större än eller lika med 10 och mindre än eller lika med 20 inte skrivas i en switch.
• Ett switch-uttryck kan ibland göra koden mer läsbar när man kontrollerar om ett värde matchar ett specifikt.

Sammanfattning

• Switch-uttrycket används för att skriva villkorsgrenar för flera värden på ett koncist sätt.
• Om du inte använder break i slutet av varje case, kan nästa case också köras (fall-through).
• default exekveras när inga fall matchar.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video