Villkorliga uttalanden i JavaManus: if, else, and else if
James Hartman
⚡ Smart sammanfattning
Villkorliga satser i JavaSkript bestämmer vilket kodblock som körs genom att testa ett villkor, och if-, if…else- och if…else if…else-formulären täcker nästan alla förgreningsbeslut som ett nybörjarskript någonsin kommer att behöva.
JavaVillkorliga uttalanden för manus
Det finns huvudsakligen tre typer av villkorliga uttalanden i JavaScript.
- om uttalande: En 'if'-sats kör kod baserat på ett villkor.
- om ... annat uttalande: If...else-satsen består av två kodblock; när ett villkor är sant exekverar det det första kodblocket och när villkoret är falskt exekverar det det andra kodblocket.
- om ... annat om ... annat uttalande: När flera villkor måste testas och olika kodblock måste exekveras baserat på vilket villkor som är sant, används if...else if...else-satsen.
Var och en av de tre formerna undersöks nedan med sin syntax och ett körbart exempel. Samma regler gäller oavsett om skriptet är installerat. inuti sidan eller i en extern fil, och om villkoret är skrivet på den översta nivån eller inuti en fungera.
Hur man använder villkorliga satser
Villkorliga uttalanden används för att bestämma flödet av exekvering baserat på olika förutsättningar. Om ett villkor är sant kan du utföra en åtgärd och om villkoret är falskt kan du utföra en annan åtgärd.
Diagrammet nedan visar den idén som en vägskäl: ett enda villkor utvärderas en gång, och kontrollen färdas nerför den sanna grenen eller den falska grenen, aldrig båda.
Om uttalande
Syntax:
if(condition) { lines of code to be executed if condition is true }
Du kan använda if sats om du bara vill kontrollera ett specifikt villkor. När uttrycket inom parentesen utvärderas till true, blocket körs; när det utvärderas till false, tolken hoppar rakt förbi den och skriptet fortsätter med nästa sats.
Prova detta själv:
<html>
<head>
<title>IF Statments!!!</title>
<script type="text/javascript">
var age = prompt("Please enter your age");
if(age>=18)
document.write("You are an adult <br />");
if(age<18)
document.write("You are NOT an adult <br />");
</script>
</head>
<body>
</body>
</html>
I exemplet frågas besökaren om en ålder och testas sedan värdet två gånger: en gång för 18 år och äldre, en gång för under 18 år. Eftersom två separata if uttalanden används snarare än en else, båda villkoren utvärderas varje gång sidan laddas.
Modern motsvarighet: Koden ovan behålls exakt som publicerad. I nuvarande JavaSkript med samma logik skrivs normalt med let or const istället för var, med console.log() or textContent istället för document.write()och utan type="text/javascript" attribut, vilket HTML5 gör valfritt.
Om…Ellers-uttryck
Syntax:
if(condition) { lines of code to be executed if the condition is true } else { lines of code to be executed if the condition is false }
Du kan använda if...else uttalande om du måste kontrollera ett villkor och köra ett annat kodblock för varje resultat. Exakt ett av de två blocken körs alltid, så inget separat andra test krävs.
Prova detta själv:
<html>
<head>
<title>If...Else Statments!!!</title>
<script type="text/javascript">
// Get the current hours
var hours = new Date().getHours();
if(hours<12)
document.write("Good Morning!!!<br />");
else
document.write("Good Afternoon!!!<br />");
</script>
</head>
<body>
</body>
</html>
Här new Date().getHours() returnerar aktuell timme för webbläsarklockan som ett tal från 0 till 23. Alla värden under 12 producerar morgonhälsningen, och alla andra värden faller vidare till else gren.
Om…annars Om…annars-satsen
Syntax:
if(condition1) { lines of code to be executed if condition1 is true } else if(condition2) { lines of code to be executed if condition2 is true } else { lines of code to be executed if condition1 is false and condition2 is false }
Du kan använda if...else if...else satsen om du vill kontrollera fler än två villkor. Villkoren utvärderas uppifrån och ner, körningen stoppas vid det första som är sant och det sista else fungerar som en samlingsenhet när ingen av dem matchar.
Prova detta själv:
<html>
<head>
<script type="text/javascript">
var one = prompt("Enter the first number");
var two = prompt("Enter the second number");
one = parseInt(one);
two = parseInt(two);
if (one == two)
document.write(one + " is equal to " + two + ".");
else if (one<two)
document.write(one + " is less than " + two + ".");
else
document.write(one + " is greater than " + two + ".");
</script>
</head>
<body>
</body>
</html>
Lägg märke till de två uppmaningarna till parseInt()Värden som returneras av prompt() är strängar, så att jämföra dem utan konvertering skulle jämföra text snarare än siffror och rapportera "9" som större än "10".
Ternära Operator: En förkortning för if…else
När en if...else blocket bara väljer mellan två värden, uttrycker den villkorliga (ternära) operatorn samma beslut som ett enda uttryck. Det är det ena JavaSkriptoperator som tar tre operander: ett villkor, ett frågetecken, värdet som används när villkoret är sant, ett kolon och värdet som används när det är falskt.
// if...else form let message; if (age >= 18) { message = "adult"; } else { message = "minor"; } // same decision as a ternary expression let label = age >= 18 ? "adult" : "minor";
Använd den ternära operatorn när det förbättrar läsbarheten, inte bara för att spara rader:
- Bra passform: välja ett av två värden att tilldela, returnera eller släppa i en mallsträng.
- Dålig passform: grenar som kör flera satser, anropar funktioner för sina biverkningar eller behöver sina egna lokala variabler.
- Undvik att bygga bo: En ternär inuti en ternär är mycket svårare att läsa än en
else ifkedja.
switch-sats kontra if…else if…else
En lång else if kedja som fortsätter att jämföra samma variabel mot olika fasta värden är vanligtvis tydligare som en switch sats. Växeln utvärderar sitt uttryck en gång och hoppar sedan till matchande case; break hindrar att verkställandet hamnar i nästa fall, och default spelar rollen som den sista else.
switch (day) { case "Sat": case "Sun": document.write("Weekend"); break; default: document.write("Weekday"); }
De två strukturerna är inte utbytbara i alla situationer:
| Punkt av jämförelse | om ... annat om ... annat | strömbrytare |
|---|---|---|
| Typ av test | Alla booleskt uttryck, inklusive intervall som hours<12 |
Likhet mot endast fasta värden |
| Jämförelse som används | Oavsett vilken operator du skriver | Strikt jämförelse, så "5" matchar inte 5 |
| läsbarhet | Bäst för ett fåtal orelaterade tillstånd | Bäst för många värden på en variabel |
| Vanlig bugg | Glömmer det efterföljande else |
Forget break, vilket gör att avrättningen misslyckas |
Sanna och falska värden i JavaSkriptvillkor
Ett villkor behöver inte vara en jämförelse. JavaSkriptet konverterar allt det hittar inom parenteserna till en booleskt värde först, vilket är anledningen till if (name) är giltig kod. Endast sex värden konverteras till falskt: false, 0, den tomma strängen, null, undefinedoch NaNAllt annat är sant, inklusive strängen "0", en tom array och ett tomt objekt.
De flesta villkorliga buggar i nybörjarskript kommer från en kort lista med misstag:
- Tilldelning istället för jämförelse:
if (x = 5)tilldelar och är alltid sanningsenlig;if (x === 5)jämför. - Lösa jämlikhetsöverraskningar:
==konverterar typer innan de jämför, så"" == 0är sant. Föredrar===. - Saknade tandställningar: utan
{}endast nästa enskilda sats tillhör grenen, precis som i exemplen ovan. - Okonverterad inmatning: värden från
prompt()och formulärfält är strängar tillsparseInt()orNumber()omvänder dem. - Oåtkomliga grenar: i en
else ifkedja, placera det smalaste villkoret först, annars kommer ett bredare tidigare test alltid att vinna.
