Tingimuslikud avaldused sisse JavaSkript: if, else ja else if

Autor: James Hartman James Hartman
Hours Ajakohastatud

⚡ Nutikas kokkuvõte

Tingimuslaused JavaSkript otsustab, milline koodiplokk käivitatakse, testides tingimust ning if, if…else ja if…else if…else vormid katavad peaaegu kõik hargnemisotsused, mida algaja skript kunagi vajab.

  • 🔘 süntaksit: if-lause käivitab oma bloki ainult siis, kui sulgudes olev tingimus annab tulemuseks tõese väärtuse.
  • ☑️ Kaks haru: Vorm if…else pakub varuvariandi plokki, mis käivitub alati, kui tingimus on väär.
  • ✅ Paljud harud: Aheldamine, kui else testib mitut tingimust järjest ja peatub esimese sobivuse juures.
  • 🧪 Lühendatud tekst: Kolmekomponentne operaator koondab lihtsa if…else avaldise üheks avaldiseks, mis tagastab väärtuse.
  • 🛠️ Alternatiiv: Lülitilause võrdleb ühte väärtust paljude fikseeritud valikutega selgemini kui pikk ahel.
  • 📊 Lõksud: Valed väärtused, hulkuv omistamisoperaator ja puuduvad sulud põhjustavad enamiku tingimusvigade esinemisest.
Loe rohkem

Tingimuslikud avaldused sisse JavaScript

JavaSkripti tingimuslaused

Seal on peamiselt kolme tüüpi tingimuslauseid JavaScript.

  1. kui Avaldus: 'if'-lause käivitab tingimusel põhineva koodi.
  2. kui...muidu Avaldus: if…else lause koosneb kahest koodiplokist; kui tingimus on tõene, käivitab see esimese koodiploki ja kui tingimus on väär, siis teise koodiploki.
  3. kui…muidu kui…muidu Avaldus: kui testida on vaja mitut tingimust ja käivitada erinevad koodiplokid selle põhjal, milline tingimus on tõene, kasutatakse if…else if…else lauset.

Kõiki kolme vormi uuritakse allpool koos süntaksi ja käivitatava näitega. Samad reeglid kehtivad olenemata sellest, kas skript asub lehe sees või välises failisja kas tingimus on kirjutatud kõrgeimal tasemel või elemendi sees funktsioon.

Kuidas kasutada tingimuslauseid

Tingimuslikke lauseid kasutatakse täitmise voo otsustamiseks erinevatel tingimustel. Kui tingimus on tõene, saate teha ühe toimingu ja kui tingimus on vale, saate teha teise toimingu.

Allolev diagramm näitab seda ideed teelahkmena: üks tingimus hinnatakse üks kord ja kontroll liigub mööda tõelist haru või valeharu, mitte kunagi mõlemat.

Vooskeem, mis näitab a JavaSkripti tingimus hargneb tõeseks teeks ja vääraks teeks

Kui avaldus

süntaksit:

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

Võite kasutada if lauset, kui soovite kontrollida ainult kindlat tingimust. Kui sulgudes olev avaldis annab tulemuseks true, plokk käivitatakse; kui see hindab tulemuse false, hüppab interpreter sellest otse mööda ja skript jätkab järgmise lausega.

Proovige seda ise:

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

Näites küsitakse külastajalt vanust ja seejärel kontrollitakse seda väärtust kaks korda: üks kord 18-aastaste ja vanemate ning üks kord alla 18-aastaste puhul. Kuna kaks eraldi if kasutatakse pigem avaldusi kui else, hinnatakse mõlemat tingimust iga kord, kui leht laadib.

Kaasaegne vaste: Ülaltoodud koodi hoitakse täpselt avaldatuna. Praeguses JavaSama loogikaga skript kirjutatakse tavaliselt let or const asemel varKoos console.log() or textContent asemel document.write()ja ilma type="text/javascript" atribuut, mille HTML5 muudab valikuliseks.

Kui…muul juhul lause

süntaksit:

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
}

Võite kasutada if...else lauset, kui peate kontrollima ühte tingimust ja iga tulemuse jaoks käivitama erineva koodiploki. Täpselt üks kahest plokist töötab alati, seega pole eraldi teist testi vaja.

Proovige seda ise:

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

Siin new Date().getHours() tagastab brauseri kella praeguse tunni numbrina vahemikus 0 kuni 23. Iga väärtus alla 12 annab hommikuse tervituse ja kõik muud väärtused langevad else filiaal.

Kui…Muidu Kui…Muidu lause

süntaksit:

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
}

Võite kasutada if...else if...else lauset, kui soovite kontrollida rohkem kui kahte tingimust. Tingimused hinnatakse ülevalt alla, täitmine peatub esimese tõese tingimuse juures ja viimane else toimib kõikehõlmava vahendina, kui ükski neist ei sobi kokku.

Proovige seda ise:

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

Pange tähele kahte üleskutset parseInt(). Tagastatud väärtused prompt() on stringid, seega nende võrdlemine ilma teisendamiseta võrdleks numbrite asemel teksti ja kuvaks „9” suuremana kui „10”.

Ära jäta:

Kolmepoolne Operator: Lühend sõnadest "kui…muidu"

Kui an if...else Kui plokk valib ainult kahe väärtuse vahel, väljendab tingimuslik (kolmekordne) operaator sama otsustusvõimet kui üks avaldis. See on see, JavaSkriptioperaator, mis võtab vastu kolm operandi: tingimuse, küsimärgi, väärtuse, mida kasutatakse siis, kui tingimus on tõene, kooloni ja väärtuse, mida kasutatakse siis, kui tingimus on väär.

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

Kasutage kolmekomponentset operaatorit siis, kui see parandab loetavust, mitte ainult ridade kokkuhoiuks:

  • Hea sobivus: kahest väärtusest ühe valimine määramiseks, tagastamiseks või malli stringi lisamiseks.
  • Halb sobivus: harud, mis käitavad mitut lauset, kutsuvad funktsioone välja nende kõrvalmõjude jaoks või vajavad oma lokaalseid muutujaid.
  • Vältige pesitsemist: kolmikkomponenti kolmikkomponendi sees on palju raskem lugeda kui else if kett.

lülitilause vs if…else if…else

Pikk else if Ahel, mis pidevalt võrdleb sama muutujat erinevate fikseeritud väärtustega, on tavaliselt selgem kui switch lause. Lüliti hindab oma avaldist üks kord ja seejärel hüppab sobivale case; break takistab teostuse langemist järgmisse juhtumisse ja default mängib finaali rolli else.

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

Need kaks struktuuri ei ole igas olukorras omavahel asendatavad:

Võrdluspunkt kui…muidu kui…muidu lüliti
Testi tüüp Mis tahes tõeväärtusavaldis, sh vahemikud, näiteks hours<12 Võrdsus ainult fikseeritud väärtuste vastu
Kasutatud võrdlus Ükskõik, millise operaatori sa kirjutad Range võrdlus, seega "5" ei sobi 5
loetavus Parim mõne omavahel mitteseotud seisundi korral Parim ühe muutuja paljude väärtuste jaoks
Levinud viga Jälge unustamine else unustades break, mis laseb teostusel läbi kukkuda

Tõelised ja valed väärtused JavaSkripti tingimused

Tingimus ei pea olema võrdlus. JavaSkript teisendab sulgudes leiduva kõigepealt tõeväärtuseks, mistõttu if (name) on kehtiv kood. Ainult kuus väärtust teisendatakse vääraks: false, 0, tühi string, null, undefinedja NaNKõik muu on tõene, kaasa arvatud nöör. "0", tühi massiiv ja tühi objekt.

Enamik algajate skriptide tingimuslikke vigu tulenevad lühikesest vigade loendist:

  • Võrdluse asemel määramine: if (x = 5) määrab ja on alati tõemeelne; if (x === 5) võrdleb.
  • Lahtine võrdsus üllatab: == teisendab tüübid enne võrdlemist, seega "" == 0 on tõsi. Eelista ===.
  • Puuduvad breketid: ilma {} ainult järgmine üksik lause kuulub harule, täpselt nagu ülaltoodud näidetes.
  • Konverteerimata sisend: väärtused alates prompt() ja vormiväljad on stringid kuni parseInt() or Number() konverteerib neid.
  • Kättesaamatud harud: aastal else if ahelas, asetage kõige kitsam tingimus esimesena või võidab alati laiem varasem test.

KKK

Üksik = määrab väärtuse ja muudab tingimuse kogemata tõeseks. == võrdleb pärast tüüpide teisendamist, seega "" == 0 on tõsi. === võrdleb väärtust ja tüüpi koos ning on turvalisem vaikeväärtus.

Tehisintellekti assistendid saavad harjumatut ümber sõnastada else if Lihtsas keeles öeldes paku välja sisendväärtused, mis iga haruni jõuavad, ja märgi tingimus, mis ei saa kunagi tõene olla. Käivita kood alati ise, sest seletus on pigem ettepanek kui tõestus.

Sageli jah. GitHubi koopia lõpetab hargnemiskoodi kommentaarist või osalisest tingimusest. Kontrollige valitud piiriväärtusi, kuna genereeritud > kus sa vajasid >= on lihtne mööda vaadata.

Keelepiirangut pole. Haru sees võib esineda mis tahes lause, sealhulgas täiendav ifKahest tasemest edasi muutub loogika jälgimine raskeks, seega ühendage testid && või hoopis varem tagasi tulla.

Ei. Ilma sulgudeta omab haru ainult järgmist üksikut lauset, mistõttu ülaltoodud näited toimivad. Sulgude lisamine on siiski soovitatav, sest hiljem lisatud teine ​​rida jääb vaikselt harust väljapoole.

&& on tõene ainult siis, kui mõlemad pooled on tõesed ja || on tõene, kui kumbki pool on. Mõlemad lühistavad: paremat poolt ei hinnata kunagi, kui tulemus on juba otsustatud.

getHours() tagastab külastaja enda kella praeguse tunni numbrina vahemikus 0 kuni 23, seega jagab võrdlus 12-ga päeva hommikuks ja pärastlõunaks ilma igasuguse täiendava analüüsita.

Ei. JavaSkript kasutab kahte eraldi märksõna, else if, tühikuga nende vahel. Üksik sõna elseif kuulub PHP-sse ja mõnedesse mallikeeltesse ning tekitab brauseris süntaksivea.

Võta see postitus kokku järgmiselt: