Voorwaardelijke uitspraken in JavaScript: als, anders en anders als

JavaScript voorwaardelijke statements

Er zijn hoofdzakelijk drie soorten voorwaardelijke uitspraken in JavaScript.

1. if-verklaring: Een 'if'-instructie voert code uit op basis van een voorwaarde.
2. if... else-verklaring: De if…else-instructie bestaat uit twee codeblokken; Wanneer een voorwaarde waar is, wordt het eerste codeblok uitgevoerd en wanneer de voorwaarde onwaar is, wordt het tweede codeblok uitgevoerd.
3. if…else if…els Verklaring: Wanneer meerdere voorwaarden moeten worden getest en verschillende codeblokken moeten worden uitgevoerd op basis van welke voorwaarde waar is, wordt de if...else if...else-instructie gebruikt.

Elk van de drie vormen wordt hieronder nader bekeken, inclusief de syntax en een werkend voorbeeld. Dezelfde regels zijn van toepassing, ongeacht of het script zich bevindt in de opgegeven map. binnen de pagina of in een extern bestanden of de voorwaarde op het hoogste niveau of binnen een is geschreven. functie.

Hoe gebruik je voorwaardelijke instructies?

Voorwaardelijke instructies worden gebruikt om de uitvoeringsstroom te bepalen op basis van verschillende voorwaarden. Als een voorwaarde waar is, kunt u één actie uitvoeren en als de voorwaarde onwaar is, kunt u nog een actie uitvoeren.

Het onderstaande diagram illustreert dit idee als een tweesprong: een enkele voorwaarde wordt eenmaal geëvalueerd, waarna de besturing de juiste of de onjuiste tak volgt, nooit beide.

Als Statement

Syntax:

if(condition)
{
	lines of code to be executed if condition is true
}

Je kunt gebruiken if Gebruik deze instructie als u slechts een specifieke voorwaarde wilt controleren. Wanneer de expressie binnen de haakjes evalueert naar true, wordt het blok uitgevoerd; wanneer het evalueert tot falseDe tolk slaat dit gedeelte over en het script gaat verder met de volgende zin.

Probeer dit zelf:

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

Het voorbeeld vraagt ​​de bezoeker om een ​​leeftijd en test die waarde vervolgens twee keer: één keer voor 18 jaar en ouder, en één keer voor jonger dan 18. Omdat twee aparte if Er worden verklaringen gebruikt in plaats van een elseBeide voorwaarden worden elke keer dat de pagina wordt geladen, geëvalueerd.

Modern equivalent: De bovenstaande code is exact overgenomen zoals gepubliceerd. In de huidige JavaScripts met dezelfde logica worden normaal gesproken geschreven met let or const in plaats van varmet console.log() or textContent in plaats van document.write(), en zonder de type="text/javascript" attribuut, dat in HTML5 optioneel is.

Als…anders-instructie

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
}

U kunt gebruik maken van de if...else Deze instructie is nodig als je één voorwaarde moet controleren en voor elk resultaat een ander codeblok moet uitvoeren. Precies één van de twee blokken wordt altijd uitgevoerd, dus een aparte tweede test is niet nodig.

Probeer dit zelf:

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

Hier new Date().getHours() Geeft het huidige uur van de browserklok weer als een getal van 0 tot 23. Elke waarde onder de 12 resulteert in de ochtendgroet, en alle andere waarden worden automatisch weergegeven. else tak.

Als…Anders Als…Anders-instructie

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
}

U kunt gebruik maken van de if...else if...else Gebruik deze instructie als u meer dan twee voorwaarden wilt controleren. De voorwaarden worden van boven naar beneden geëvalueerd, de uitvoering stopt bij de eerste voorwaarde die waar is, en de laatste voorwaarde wordt gecontroleerd. else fungeert als een vangnet wanneer geen van de andere opties overeenkomt.

Probeer dit zelf:

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

Let op de twee oproepen naar parseInt(). Waarden geretourneerd door prompt() Het zijn tekenreeksen, dus als je ze zonder conversie vergelijkt, wordt er tekst vergeleken in plaats van getallen, en wordt "9" als groter dan "10" gerapporteerd.

Ternair Operator: Een afkorting voor if…else

wanneer een if...else Het blok kiest slechts tussen twee waarden, de voorwaardelijke (ternaire) operator drukt dezelfde beslissing uit als één enkele expressie. Het is de enige JavaScriptoperator die drie operanden accepteert: een voorwaarde, een vraagteken, de waarde die wordt gebruikt wanneer de voorwaarde waar is, een dubbele punt en de waarde die wordt gebruikt wanneer de voorwaarde onwaar is.

// 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";

Gebruik de ternaire operator wanneer dit de leesbaarheid verbetert, niet alleen om regels te besparen:

• Goede pasvorm: Een van de twee waarden kiezen om toe te wijzen, terug te geven of in een sjabloonstring te plaatsen.
• Slechte pasvorm: vertakkingen die meerdere instructies uitvoeren, functies aanroepen vanwege hun neveneffecten, of hun eigen lokale variabelen nodig hebben.
• Vermijd het vormen van nesten: Een ternair systeem binnen een ternair systeem is veel moeilijker te lezen dan een else if keten.

switch-statement versus if…else if…else

Een lange tijd else if Een keten die steeds dezelfde variabele vergelijkt met verschillende vaste waarden is meestal duidelijker als een switch verklaring. De switch evalueert de expressie eenmaal en springt vervolgens naar de overeenkomende instructie. case; break voorkomt dat de executie doorloopt naar de volgende zaak, en default speelt de rol van de laatste else.

switch (day) {
  case "Sat":
  case "Sun":
    document.write("Weekend");
    break;
  default:
    document.write("Weekday");
}

De twee structuren zijn niet in elke situatie uitwisselbaar:

Waarheids- en onwaarheidswaarden in JavaScriptvoorwaarden

Een voorwaarde hoeft geen vergelijking te zijn. JavaHet script zet alles wat het tussen haakjes vindt eerst om naar een booleaanse waarde, vandaar if (name) is geldige code. Slechts zes waarden worden omgezet naar onwaar: false, 0, de lege string, null, undefineden NaNAl het andere is waar, inclusief de tekenreeks. "0", een lege array en een leeg object.

De meeste voorwaardelijke fouten in scripts van beginners komen voort uit een kort lijstje met vergissingen:

• Toewijzing in plaats van vergelijking: if (x = 5) kent waarden toe en is altijd waarachtig; if (x === 5) vergelijkt.
• Verrassende ontwikkelingen op het gebied van gelijkheid: == converteert typen vóór de vergelijking, dus "" == 0 is waar. Voorkeur ===.
• Ontbrekende beugel: zonder {} Alleen de volgende afzonderlijke instructie behoort tot de tak, precies zoals in de bovenstaande voorbeelden.
• Niet-geconverteerde invoer: waarden van prompt() en formuliervelden zijn tekenreeksen totdat parseInt() or Number() converteert ze.
• Niet-bereikbare vestigingen: in een else if In de keten geldt: begin met de meest strikte voorwaarde, anders wint een eerdere, bredere test altijd.

Veelgestelde vragen