JavaScript
condizioni

introduzione

Sintassi

• se ( condizione ) dichiarazione ;
• if ( condition ) statement_1 , statement_2 , ... , statement_n ;
• se ( condizione ) {
  dichiarazione
  }
• se ( condizione ) {
  statement_1 ;
  statement_2 ;
  ...
  statement_n ;
  }
• se ( condizione ) {
  dichiarazione
  } altro {
  dichiarazione
  }
• se ( condizione ) {
  dichiarazione
  } else if ( condizione ) {
  dichiarazione
  } altro {
  dichiarazione
  }
• switch ( espressione ) {
  caso valore1 :
  dichiarazione
  [rompere;]
  caso valore2 :
  dichiarazione
  [rompere;]
  valore del casoN :
  dichiarazione
  [rompere;]
  predefinito:
  dichiarazione
  [rompere;]
  }
• condizione ? value_for_true : value_for_false ;

Osservazioni

Se / Else If / Else Control

Nella sua forma più semplice, una condizione if può essere usata in questo modo:

var i = 0;

if (i < 1) {
    console.log("i is smaller than 1");
}

La condizione i < 1 viene valutata e, se viene valutata su true viene eseguito il blocco che segue. Se viene valutato come false , il blocco viene saltato.

Una condizione if può essere espansa con un else blocco. La condizione viene verificata una volta come sopra e se viene valutata false verrà eseguito un blocco secondario (che verrebbe ignorato se la condizione fosse true ). Un esempio:

if (i < 1) {
    console.log("i is smaller than 1");
} else {
    console.log("i was not smaller than 1");
}

Supponiamo che il blocco else non contenga altro if non un blocco if (con opzionalmente un else blocco) come questo:

if (i < 1) {
    console.log("i is smaller than 1");
} else {
    if (i < 2) {
        console.log("i is smaller than 2");
    } else {
        console.log("none of the previous conditions was true");
    }
}

Poi c'è anche un modo diverso di scrivere ciò che riduce il nesting:

if (i < 1) {
    console.log("i is smaller than 1");
} else if (i < 2) {
    console.log("i is smaller than 2");
} else {
    console.log("none of the previous conditions was true");
}

Alcune importanti note a piè di pagina sugli esempi di cui sopra:

• Se una qualsiasi condizione viene valutata come true , non verrà valutata nessun'altra condizione in quella catena di blocchi e tutti i blocchi corrispondenti (incluso il blocco else ) non verranno eseguiti.

• Il numero di else if parti sono praticamente illimitate. L'ultimo esempio sopra ne contiene solo uno, ma puoi averne quanti ne vuoi.

• La condizione all'interno di un'istruzione if può essere qualsiasi cosa che può essere forzata ad un valore booleano, vedere l'argomento sulla logica booleana per maggiori dettagli;

• La scala if-else-if esce al primo successo. Cioè, nell'esempio sopra, se il valore di i è 0,5, allora viene eseguito il primo ramo. Se le condizioni si sovrappongono, viene eseguito il primo criterio che si verifica nel flusso di esecuzione. L'altra condizione, che potrebbe anche essere vera, viene ignorata.

• Se si dispone di una sola istruzione, le parentesi attorno a tale affermazione sono tecnicamente facoltative, ad esempio questo va bene:

  if (i < 1) console.log("i is smaller than 1");
  

  E anche questo funzionerà:

  if (i < 1) 
      console.log("i is smaller than 1");
  

  Se si desidera eseguire più istruzioni all'interno di un blocco if , allora le parentesi graffe attorno ad esse sono obbligatorie. Solo l'uso dell'indentazione non è sufficiente. Ad esempio, il seguente codice:

  if (i < 1) 
      console.log("i is smaller than 1");
      console.log("this will run REGARDLESS of the condition"); // Warning, see text!
  

  è equivalente a:

  if (i < 1) {
      console.log("i is smaller than 1");
  }
  console.log("this will run REGARDLESS of the condition");
  

Passare la dichiarazione

Le istruzioni switch confrontano il valore di un'espressione con uno o più valori ed eseguono diverse sezioni di codice in base a tale confronto.

var value = 1;
switch (value) {
  case 1:
    console.log('I will always run');
    break;
  case 2:
    console.log('I will never run');
    break;
}

L'istruzione break "interrompe" l'istruzione switch e garantisce che non venga eseguito più codice all'interno dell'istruzione switch. Questo è il modo in cui sono definite le sezioni e consente all'utente di creare casi "fall-through".

Attenzione : in mancanza di break o di una dichiarazione di return per ogni caso, il programma continuerà a valutare il caso successivo, anche se i criteri del caso non sono soddisfatti!

switch (value) {
  case 1:
    console.log('I will only run if value === 1');
    // Here, the code "falls through" and will run the code under case 2
  case 2:
    console.log('I will run if value === 1 or value === 2');
    break;
  case 3:
    console.log('I will only run if value === 3');
    break;
}

L'ultimo caso è il caso default . Questo verrà eseguito se non sono state effettuate altre corrispondenze.

var animal = 'Lion';
switch (animal) {
  case 'Dog':
    console.log('I will not run since animal !== "Dog"');
    break;
  case 'Cat':
    console.log('I will not run since animal !== "Cat"');
    break;
  default:
    console.log('I will run since animal does not match any other case');
}

Va notato che l'espressione di un caso può essere qualsiasi tipo di espressione. Ciò significa che puoi usare confronti, chiamate di funzioni, ecc. Come valori di caso.

function john() {
  return 'John';
}

function jacob() {
  return 'Jacob';
}

switch (name) {
  case john(): // Compare name with the return value of john() (name == "John")
    console.log('I will run if name === "John"');
    break;
  case 'Ja' + 'ne': // Concatenate the strings together then compare (name == "Jane")
    console.log('I will run if name === "Jane"');
    break;
  case john() + ' ' + jacob() + ' Jingleheimer Schmidt':
    console.log('His name is equal to name too!');
    break;
}

Criteri multipli inclusivi per i casi

Poiché i casi "rientrano" senza un'istruzione di break o return , è possibile utilizzarli per creare più criteri di inclusione:

var x = "c"
switch (x) {
   case "a":
   case "b":
   case "c":
      console.log("Either a, b, or c was selected.");
      break;
   case "d":
      console.log("Only d was selected.");
      break;
   default:
      console.log("No case was matched.");
      break;  // precautionary break if case order changes
}

Operatori ternari

Può essere usato per accorciare le operazioni if ​​/ else. Ciò è utile per restituire rapidamente un valore (cioè per assegnarlo a un'altra variabile).

Per esempio:

var animal = 'kitty';
var result = (animal === 'kitty') ? 'cute' : 'still nice';

In questo caso, il result ottiene il valore 'carino', perché il valore dell'animale è 'gattino'. Se l'animale avesse un altro valore, il risultato otterrebbe il valore "ancora bello".

Confronta questo con ciò che il codice vorrebbe con le condizioni if/else .

var animal = 'kitty';
var result = '';
if (animal === 'kitty') {
    result = 'cute';
} else {
    result = 'still nice';
}

Le condizioni if or else possono avere diverse operazioni. In questo caso l'operatore restituisce il risultato dell'ultima espressione.

var a = 0;
var str = 'not a';
var b = '';
b = a === 0 ? (a = 1, str += ' test') : (a = 2);

Poiché a era uguale a 0, diventa 1 e str diventa "non un test". L'operazione che ha coinvolto str stata l'ultima, quindi b riceve il risultato dell'operazione, che è il valore contenuto in str , cioè 'not a test'.

Gli operatori ternari si aspettano sempre altre condizioni, altrimenti si verificherà un errore di sintassi. Come soluzione alternativa, è possibile restituire uno zero simile nel ramo else: non importa se non si utilizza il valore restituito ma si riduce semplicemente (o si tenta di accorciare) l'operazione.

var a = 1;
a === 1 ? alert('Hey, it is 1!') : 0;

Come vedi, if (a === 1) alert('Hey, it is 1!'); farei la stessa cosa Sarebbe solo un po 'di più, dal momento che non ha bisogno di else condizione obbligatoria. Se fosse coinvolta else condizione, il metodo ternario sarebbe molto più pulito.

a === 1 ? alert('Hey, it is 1!') : alert('Weird, what could it be?');
if (a === 1) alert('Hey, it is 1!') else alert('Weird, what could it be?');

Le ternarie possono essere annidate per incapsulare la logica aggiuntiva. Per esempio

foo ? bar ? 1 : 2 : 3

// To be clear, this is evaluated left to right 
// and can be more explicitly expressed as:

foo ? (bar ? 1 : 2) : 3

Questo è lo stesso di quanto segue if/else

if (foo) {
  if (bar) {
    1
  } else {
    2
  }
} else {
  3
}

Stilisticamente questo dovrebbe essere usato solo con nomi di variabili brevi, in quanto le ternarie multi-linea possono ridurre drasticamente la leggibilità.

Le sole affermazioni che non possono essere usate in ternari sono le dichiarazioni di controllo. Ad esempio, non puoi usare return o break con ternaries. La seguente espressione non sarà valida.

var animal = 'kitty';
for (var i = 0; i < 5; ++i) {
    (animal === 'kitty') ? break:console.log(i);
}

Per le dichiarazioni di reso, anche quanto segue sarebbe non valido:

var animal = 'kitty';
(animal === 'kitty') ? return 'meow' : return 'woof';

Per fare correttamente quanto sopra, si dovrebbe restituire il ternario come segue:

var animal = 'kitty';
return (animal === 'kitty') ? 'meow' : 'woof';

Strategia

Un modello di strategia può essere utilizzato in Javascript in molti casi per sostituire un'istruzione switch. È particolarmente utile quando il numero di condizioni è dinamico o molto grande. Consente al codice di ciascuna condizione di essere indipendente e verificabile separatamente.

L'oggetto strategico è semplice un oggetto con più funzioni, che rappresentano ciascuna condizione separata. Esempio:

const AnimalSays = {
    dog () {
        return 'woof';
    },

    cat () {
        return 'meow';
    },

    lion () {
        return 'roar';
    },

    // ... other animals

    default () {
        return 'moo';
    }
};

L'oggetto sopra può essere usato come segue:

function makeAnimalSpeak (animal) {
    // Match the animal by type
    const speak = AnimalSays[animal] || AnimalSays.default;
    console.log(animal + ' says ' + speak());
}

risultati:

makeAnimalSpeak('dog') // => 'dog says woof'
makeAnimalSpeak('cat') // => 'cat says meow'
makeAnimalSpeak('lion') // => 'lion says roar'
makeAnimalSpeak('snake') // => 'snake says moo'

Nell'ultimo caso, la nostra funzione predefinita gestisce eventuali animali mancanti.

Usando || e && corto circuito

Gli operatori booleani || e && eseguirà "cortocircuito" e non valuterà il secondo parametro se il primo è rispettivamente vero o falso. Questo può essere usato per scrivere condizionali brevi come:

var x = 10

x == 10 && alert("x is 10")
x == 10 || alert("x is not 10")