9.3 KiB

Raw Permalink Blame History Unescape Escape

JavaScript-grunder: Att fatta beslut

Sketchnote av Tomomi Imura

Quiz före föreläsningen

Att fatta beslut och kontrollera ordningen i vilken din kod körs gör din kod återanvändbar och robust. Den här sektionen täcker syntaxen för att kontrollera dataflödet i JavaScript och dess betydelse när det används med Booleska datatyper.

🎥 Klicka på bilden ovan för en video om att fatta beslut.

Du kan ta den här lektionen på Microsoft Learn!

En kort återblick på Booleans

Booleans kan bara ha två värden: true eller false. Booleans hjälper till att fatta beslut om vilka kodrader som ska köras när vissa villkor är uppfyllda.

Ställ in din boolean till att vara true eller false så här:

let myTrueBool = true
let myFalseBool = false

✅ Booleans är uppkallade efter den engelska matematikern, filosofen och logikern George Boole (1815–1864).

Jämförelseoperatorer och Booleans

Operatorer används för att utvärdera villkor genom att göra jämförelser som skapar ett Booleskt värde. Följande är en lista över ofta använda operatorer.

Symbol	Beskrivning	Exempel
`<`	Mindre än: Jämför två värden och returnerar Booleska värdet `true` om värdet på vänster sida är mindre än det på höger	`5 < 6 // true`
`<=`	Mindre än eller lika med: Jämför två värden och returnerar Booleska värdet `true` om värdet på vänster sida är mindre än eller lika med det på höger	`5 <= 6 // true`
`>`	Större än: Jämför två värden och returnerar Booleska värdet `true` om värdet på vänster sida är större än det på höger	`5 > 6 // false`
`>=`	Större än eller lika med: Jämför två värden och returnerar Booleska värdet `true` om värdet på vänster sida är större än eller lika med det på höger	`5 >= 6 // false`
`===`	Strikt likhet: Jämför två värden och returnerar Booleska värdet `true` om värdena på höger och vänster är lika OCH har samma datatyp	`5 === 6 // false`
`!==`	Olikhet: Jämför två värden och returnerar motsatt Booleskt värde jämfört med vad en strikt likhetsoperator skulle returnera	`5 !== 6 // true`

✅ Testa din kunskap genom att skriva några jämförelser i din webbläsares konsol. Överraskar något av de returnerade värdena dig?

If-sats

If-satsen kör kod mellan sina block om villkoret är sant.

if (condition) {
  //Condition is true. Code in this block will run.
}

Logiska operatorer används ofta för att skapa villkoret.

let currentMoney;
let laptopPrice;

if (currentMoney >= laptopPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
}

If..Else-sats

else-satsen kör koden mellan sina block när villkoret är falskt. Den är valfri med en if-sats.

let currentMoney;
let laptopPrice;

if (currentMoney >= laptopPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
} else {
  //Condition is false. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
}

✅ Testa din förståelse av denna kod och följande kod genom att köra den i en webbläsares konsol. Ändra värdena på variablerna currentMoney och laptopPrice för att ändra det returnerade console.log().

Switch-sats

switch-satsen används för att utföra olika åtgärder baserat på olika villkor. Använd switch-satsen för att välja ett av många kodblock som ska köras.

switch (expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
  // code block
}

// program using switch statement
let a = 2;

switch (a) {
  case 1:
    a = "one";
    break;
  case 2:
    a = "two";
    break;
  default:
    a = "not found";
    break;
}
console.log(`The value is ${a}`);

✅ Testa din förståelse av denna kod och följande kod genom att köra den i en webbläsares konsol. Ändra värdena på variabeln a för att ändra det returnerade console.log().

Logiska operatorer och Booleans

Beslut kan kräva mer än en jämförelse och kan kopplas ihop med logiska operatorer för att producera ett Booleskt värde.

Symbol	Beskrivning	Exempel
`&&`	Logisk OCH: Jämför två Booleska uttryck. Returnerar true endast om båda sidor är sanna	`(5 > 6) && (5 < 6 ) //En sida är falsk, den andra är sann. Returnerar false`
`\|\|`	Logisk ELLER: Jämför två Booleska uttryck. Returnerar true om minst en sida är sann	`(5 > 6) \|\| (5 < 6) //En sida är falsk, den andra är sann. Returnerar true`
`!`	Logisk INTE: Returnerar motsatt värde av ett Booleskt uttryck	`!(5 > 6) // 5 är inte större än 6, men "!" kommer att returnera true`

Villkor och beslut med logiska operatorer

Logiska operatorer kan användas för att skapa villkor i if..else-satser.

let currentMoney;
let laptopPrice;
let laptopDiscountPrice = laptopPrice - laptopPrice * 0.2; //Laptop price at 20 percent off

if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
} else {
  //Condition is true. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
}

Negationsoperator

Du har hittills sett hur du kan använda en if...else-sats för att skapa villkorlig logik. Allt som går in i en if måste utvärderas till sant/falskt. Genom att använda !-operatorn kan du negera uttrycket. Det skulle se ut så här:

if (!condition) {
  // runs if condition is false
} else {
  // runs if condition is true
}

Ternära uttryck

if...else är inte det enda sättet att uttrycka beslutslogik. Du kan också använda något som kallas en ternär operator. Syntaxen för den ser ut så här:

let variable = condition ? <return this if true> : <return this if false>

Nedan är ett mer konkret exempel:

let firstNumber = 20;
let secondNumber = 10;
let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;

✅ Ta en minut att läsa denna kod några gånger. Förstår du hur dessa operatorer fungerar?

Ovanstående säger att:

om firstNumber är större än secondNumber
tilldela då firstNumber till biggestNumber
annars tilldela secondNumber.

Det ternära uttrycket är bara ett kompakt sätt att skriva koden nedan:

let biggestNumber;
if (firstNumber > secondNumber) {
  biggestNumber = firstNumber;
} else {
  biggestNumber = secondNumber;
}

🚀 Utmaning

Skapa ett program som först skrivs med logiska operatorer och sedan skrivs om med ett ternärt uttryck. Vilken syntax föredrar du?

Quiz efter föreläsningen

Granskning & Självstudier

Läs mer om de många operatorer som finns tillgängliga för användaren på MDN.

Gå igenom Josh Comeaus fantastiska operator lookup!

Uppgift

Operatorer

Ansvarsfriskrivning:
Detta dokument har översatts med hjälp av AI-översättningstjänsten Co-op Translator. Även om vi strävar efter noggrannhet, bör du vara medveten om att automatiserade översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess originalspråk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.

9.3 KiB Raw Permalink Blame History Unescape Escape