Dichiarazioni condizionali in JavaScript: if, else, e else if

By: James Hartmann James Hartmann
Hours aggiornato

⚡ Riepilogo intelligente

Le dichiarazioni condizionali in JavaGli script decidono quale blocco di codice eseguire verificando una condizione, e le strutture if, if…else e if…else if…else coprono quasi tutte le decisioni di diramazione di cui uno script per principianti potrebbe mai aver bisogno.

  • 🔘 Sintassi: Un'istruzione if esegue il suo blocco solo quando la condizione tra parentesi risulta vera.
  • ☑️ Due rami: La struttura if…else fornisce un blocco di fallback che viene eseguito ogni volta che la condizione è falsa.
  • ✅ Molte ramificazioni: La funzione else if concatenata verifica diverse condizioni in sequenza e si ferma alla prima corrispondenza.
  • 🧪 Stenografia: L'operatore ternario condensa una semplice istruzione if…else in un'unica espressione che restituisce un valore.
  • ️ Alternativa: Un'istruzione switch confronta un valore con molte opzioni fisse in modo più ordinato rispetto a una lunga catena di istruzioni.
  • 📊 insidie: Valori errati, un operatore di assegnazione errato e parentesi graffe mancanti sono la causa della maggior parte dei bug condizionali.
Scopri di più

Dichiarazioni condizionali in JavaCopione

JavaIstruzioni condizionali dello script

Esistono principalmente tre tipi di istruzioni condizionali JavaCopione.

  1. se Dichiarazione: Un'istruzione 'if' esegue il codice in base a una condizione.
  2. if...else Dichiarazione: L'istruzione if…else è composta da due blocchi di codice; quando una condizione è vera, esegue il primo blocco di codice e quando la condizione è falsa, esegue il secondo blocco di codice.
  3. if…else if…else Istruzione: quando è necessario testare più condizioni ed eseguire diversi blocchi di codice in base alla condizione vera, viene utilizzata l'istruzione if...else if...else.

Ciascuna delle tre forme viene esaminata di seguito con la sua sintassi e un esempio eseguibile. Le stesse regole si applicano indipendentemente dal fatto che lo script si trovi all'interno della pagina o in un file esternoe se la condizione è scritta al livello superiore o all'interno di un funzione.

Come utilizzare le istruzioni condizionali

Le istruzioni condizionali vengono utilizzate per decidere il flusso di esecuzione in base a diverse condizioni. Se una condizione è vera, puoi eseguire un'azione e se la condizione è falsa, puoi eseguire un'altra azione.

Il diagramma sottostante illustra questo concetto come un bivio: una singola condizione viene valutata una sola volta e il controllo procede lungo il ramo vero o quello falso, mai entrambi.

Diagramma di flusso che mostra un JavaCondizione dello script che si dirama in un percorso vero e un percorso falso

Istruzione If

Sintassi:

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

Puoi usare if istruzione se si desidera controllare solo una condizione specifica. Quando l'espressione tra parentesi risulta essere true, il blocco viene eseguito; quando viene valutato a falseL'interprete lo ignora completamente e il copione prosegue con l'affermazione successiva.

Provalo tu stesso:

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

L'esempio chiede al visitatore l'età, quindi verifica quel valore due volte: una volta per i 18 anni e oltre, una volta per i minori di 18 anni. Poiché due separati if Le dichiarazioni vengono utilizzate piuttosto che un else, entrambe le condizioni vengono valutate ogni volta che la pagina viene caricata.

Equivalente moderno: il codice sopra riportato è mantenuto esattamente come pubblicato. Nella versione attuale JavaLo script della stessa logica è normalmente scritto con let or const invece di var, con console.log() or textContent invece di document.write()e senza il type="text/javascript" attributo, che HTML5 rende facoltativo.

Istruzione If…Else

Sintassi:

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
}

È possibile utilizzare il if...else Questa istruzione si applica quando è necessario verificare una condizione ed eseguire un blocco di codice diverso per ogni risultato. Viene sempre eseguito esattamente uno dei due blocchi, quindi non è necessario un secondo test separato.

Provalo tu stesso:

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

Qui new Date().getHours() restituisce l'ora corrente dell'orologio del browser come un numero da 0 a 23. Qualsiasi valore inferiore a 12 produce il saluto del mattino e ogni altro valore passa al else ramo.

Se…Altrimenti Istruzione Se…Altrimenti

Sintassi:

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
}

È possibile utilizzare il if...else if...else istruzione se si desidera controllare più di due condizioni. Le condizioni vengono valutate dall'alto verso il basso, l'esecuzione si interrompe alla prima che è vera e alla fine else funge da soluzione generica quando nessuna di esse corrisponde.

Provalo tu stesso:

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

Si notino le due chiamate a parseInt(). Valori restituiti da prompt() Si tratta di stringhe, quindi confrontarle senza conversione significherebbe confrontare testo anziché numeri e riporterebbe "9" come maggiore di "10".

ARTICOLI CORRELATI

Ternario Operator: una forma abbreviata di if…else

Quando un if...else Il blocco sceglie solo tra due valori, l'operatore condizionale (ternario) esprime la stessa decisione come un'unica espressione. È quello JavaOperatore di script che accetta tre operandi: una condizione, un punto interrogativo, il valore utilizzato quando la condizione è vera, i due punti e il valore utilizzato quando è falsa.

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

Utilizza l'operatore ternario quando migliora la leggibilità, non solo per risparmiare righe:

  • Buona vestibilità: scegliere uno dei due valori da assegnare, restituire o inserire in una stringa modello.
  • Scarsa vestibilità: ramificazioni che eseguono più istruzioni, chiamano funzioni per i loro effetti collaterali o necessitano di proprie variabili locali.
  • Evitare l'annidamento: un ternario dentro un ternario è molto più difficile da leggere di un else if catena.

Istruzione switch vs if…else if…else

Lungo else if una catena che continua a confrontare la stessa variabile con diversi valori fissi è solitamente più chiara come una switch dichiarazione. L'interruttore valuta la sua espressione una volta, quindi salta alla corrispondente case; break impedisce che l'esecuzione passi al caso successivo e default svolge il ruolo del finale else.

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

Le due strutture non sono intercambiabili in ogni situazione:

Punto di confronto se…altrimenti se…altrimenti interruttore
Tipo di prova Qualsiasi espressione booleana, inclusi intervalli come hours<12 Uguaglianza solo rispetto a valori fissi
Confronto utilizzato Qualunque operatore tu scriva Confronto rigoroso, quindi "5" non corrisponde 5
leggibilità migliori per alcune condizioni non correlate migliori per molti valori di una variabile
Insetto comune Dimenticando il tratto finale else Dimenticare break, che permette all'esecuzione di fallire

Valori veri e falsi in JavaCondizioni dello script

Una condizione non deve necessariamente essere un confronto. JavaLo script converte prima in booleano tutto ciò che trova all'interno delle parentesi, ed è per questo che if (name) è un codice valido. Solo sei valori vengono convertiti in falso: false, 0, la stringa vuota, null, undefinede NaN. Tutto il resto è vero, inclusa la stringa "0", un array vuoto e un oggetto vuoto.

La maggior parte dei bug condizionali negli script per principianti deriva da un breve elenco di errori:

  • Assegnazione anziché confronto: if (x = 5) assegna ed è sempre veritiero; if (x === 5) confronta.
  • Sorprese in materia di uguaglianza informale: == converte i tipi prima del confronto, quindi "" == 0 è vero. Preferisci ===.
  • Apparecchio ortodontico mancante: senza {} solo la successiva istruzione singola appartiene al ramo, esattamente come negli esempi precedenti.
  • Input non convertito: valori da prompt() e i campi del modulo sono stringhe fino a parseInt() or Number() li converte.
  • Filiali irraggiungibili: Organizza una else if Nella catena, metti prima la condizione più ristretta, altrimenti un test precedente più ampio avrà sempre la meglio.

DOMANDE FREQUENTI

Un singolo = assegna un valore e rende la condizione vera per errore. == confronta dopo aver convertito i tipi, quindi "" == 0 è vero. === confronta valore e tipo insieme ed è l'impostazione predefinita più sicura.

Gli assistenti IA possono ripetere un concetto sconosciuto else if La catena viene spiegata in modo semplice, vengono suggeriti i valori di input che raggiungono ogni ramo e viene segnalata una condizione che non può mai essere vera. Esegui sempre il codice tu stesso, perché la spiegazione è un suggerimento e non una dimostrazione.

Spesso sì. Copilota GitHub completa il codice di ramificazione da un commento o da una condizione parziale. Controlla i valori limite che seleziona, poiché un generato > dove ne avevi bisogno >= è facile non notarlo.

Non ci sono limiti di lingua. Qualsiasi istruzione può apparire all'interno di un ramo, incluso un ulteriore if. Oltre due livelli la logica diventa difficile da seguire, quindi combina i test con && oppure tornare prima.

No. Senza parentesi graffe, il ramo appartiene solo all'istruzione successiva, ed è per questo che gli esempi precedenti funzionano. L'aggiunta delle parentesi graffe è comunque consigliata, perché una seconda riga aggiunta in seguito cade silenziosamente al di fuori del ramo.

&& è vero solo quando entrambe le parti dicono la verità, e || è vero quando uno dei due lati è vero. Entrambi vanno in cortocircuito: il lato destro non viene mai valutato una volta che il risultato è già stato deciso.

getHours() restituisce l'ora corrente dell'orologio del visitatore come un numero da 0 a 23, quindi il confronto con 12 divide la giornata in mattina e pomeriggio senza alcuna ulteriore elaborazione.

No. JavaLo script utilizza due parole chiave separate, else if, con uno spazio tra di loro. La singola parola elseif appartiene a PHP e ad alcuni linguaggi di template e genera un errore di sintassi in un browser.

Riassumi questo post con: