JavaScript
Conditions

Introduction

Syntaxe

• déclaration if ( condition );
• if ( condition ) statement_1 , statement_2 , ... , statement_n ;
• si ( condition ) {
  déclaration
  }
• si ( condition ) {
  statement_1 ;
  déclaration_2 ;
  ...
  relevé_n ;
  }
• si ( condition ) {
  déclaration
  } autre {
  déclaration
  }
• si ( condition ) {
  déclaration
  } sinon if ( condition ) {
  déclaration
  } autre {
  déclaration
  }
• switch ( expression ) {
  valeur de cas1 :
  déclaration
  [Pause;]
  valeur du cas2 :
  déclaration
  [Pause;]
  valeur du casN :
  déclaration
  [Pause;]
  défaut:
  déclaration
  [Pause;]
  }
• condition ? value_for_true : value_for_false ;

Remarques

Si / Sinon Si / Contrôle Else

Dans sa forme la plus simple, une condition if peut être utilisée comme ceci:

var i = 0;

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

La condition i < 1 est évaluée et si elle est true le bloc qui suit est exécuté. S'il est évalué à false , le bloc est ignoré.

Une condition if peut être étendue avec un bloc else . La condition est vérifiée une fois comme ci-dessus et si elle est évaluée à false un bloc secondaire sera exécuté (qui serait ignoré si la condition était true ). Un exemple:

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

En supposant que le bloc else ne contient rien d'autre qu'un autre bloc if (avec éventuellement un else bloc) comme ceci:

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");
    }
}

Ensuite, il existe une autre façon d’écrire cela, ce qui réduit l’imbrication:

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");
}

Quelques notes de bas de page importantes sur les exemples ci-dessus:

• Si une condition est évaluée à true , aucune autre condition de cette chaîne de blocs ne sera évaluée et tous les blocs correspondants (y compris le bloc else ) ne seront pas exécutés.

• Le nombre d’ else if pièces sont pratiquement illimitées. Le dernier exemple ci-dessus n'en contient qu'un, mais vous pouvez en avoir autant que vous le souhaitez.

• La condition dans une instruction if peut être tout ce qui peut être contraint à une valeur booléenne, voir la rubrique sur la logique booléenne pour plus de détails;

• L'échelle if-else-if existe dès le premier succès. C'est-à-dire que dans l'exemple ci-dessus, si la valeur de i est 0,5, la première branche est exécutée. Si les conditions se chevauchent, le premier critère apparaissant dans le flux d'exécution est exécuté. L'autre condition, qui pourrait également être vraie, est ignorée.

• Si vous ne disposez que d'une seule instruction, les accolades autour de cette instruction sont facultatives, par exemple, cela convient:

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

  Et cela fonctionnera aussi bien:

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

  Si vous souhaitez exécuter plusieurs instructions dans un bloc if , les accolades qui les entourent sont obligatoires. Utiliser uniquement l'indentation n'est pas suffisant. Par exemple, le code suivant:

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

  est équivalent à:

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

Déclaration de changement

Les instructions de commutateur comparent la valeur d'une expression à une ou plusieurs valeurs et exécutent différentes sections de code en fonction de cette comparaison.

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

L'instruction break "se casse" de l'instruction switch et garantit qu'aucun autre code dans l'instruction switch n'est exécuté. C’est ainsi que les sections sont définies et permet à l’utilisateur de faire des cas de «chute».

Attention : l'absence de déclaration de return ou de break pour chaque cas signifie que le programme continuera à évaluer le cas suivant, même si le critère de cas n'est pas satisfait!

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

Le dernier cas est le cas default . Celui-ci fonctionnera si aucun autre match n'a été effectué.

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');
}

Il convient de noter qu'une expression de cas peut être toute sorte d'expression. Cela signifie que vous pouvez utiliser des comparaisons, des appels de fonction, etc. comme valeurs de cas.

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

Critères d'inclusion multiples pour les cas

Étant donné que les requêtes "tombent" sans déclaration de return ou de break , vous pouvez l'utiliser pour créer plusieurs critères inclus:

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
}

Opérateurs ternaires

Peut être utilisé pour raccourcir les opérations if / else. Cela s'avère pratique pour renvoyer rapidement une valeur (c.-à-d. Pour l'attribuer à une autre variable).

Par exemple:

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

Dans ce cas, le result obtient la valeur «mignon», car la valeur de l'animal est «minou». Si animal avait une autre valeur, le résultat aurait la valeur «encore agréable».

Comparez cela à ce que le code aimerait avec les if/else .

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

Les if ou else peuvent avoir plusieurs opérations. Dans ce cas, l'opérateur retourne le résultat de la dernière expression.

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

Comme a est égal à 0, il devient 1 et str devient «pas un test». L'opération qui impliquait str était la dernière, donc b reçoit le résultat de l'opération, qui est la valeur contenue dans str , c'est-à-dire "pas un test".

Les opérateurs ternaires attendent toujours d' autres conditions, sinon vous obtiendrez une erreur de syntaxe. En guise de solution de contournement, vous pouvez retourner un zéro dans la branche else - peu importe si vous n'utilisez pas la valeur de retour, mais simplement en raccourcissant (ou en essayant de raccourcir) l'opération.

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

Comme vous voyez, if (a === 1) alert('Hey, it is 1!'); ferait la même chose Ce ne serait qu'un char plus long, car il n'a pas besoin d'une else condition obligatoire. Si une else condition était impliquée, la méthode ternaire serait beaucoup plus propre.

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?');

Les ternaires peuvent être imbriqués pour encapsuler une logique supplémentaire. Par exemple

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

C'est la même chose que if/else

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

Du point de vue stylistique, ceci ne devrait être utilisé qu'avec des noms de variables courts, car les ternaires multi-lignes peuvent réduire considérablement la lisibilité.

Les seules instructions qui ne peuvent pas être utilisées dans les ternaires sont les instructions de contrôle. Par exemple, vous ne pouvez pas utiliser return ou break avec des ternaires. L'expression suivante sera invalide.

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

Pour les instructions de retour, les éléments suivants seraient également non valides:

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

Pour effectuer correctement les opérations ci-dessus, vous devez renvoyer le ternaire comme suit:

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

Stratégie

Un modèle de stratégie peut être utilisé dans Javascript dans de nombreux cas pour remplacer une instruction switch. Cela est particulièrement utile lorsque le nombre de conditions est dynamique ou très élevé. Il permet au code de chaque condition d'être indépendant et testable séparément.

L'objet de stratégie est un objet simple avec plusieurs fonctions, représentant chaque condition distincte. Exemple:

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

    cat () {
        return 'meow';
    },

    lion () {
        return 'roar';
    },

    // ... other animals

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

L'objet ci-dessus peut être utilisé comme suit:

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

Résultats:

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

Dans le dernier cas, notre fonction par défaut gère tous les animaux manquants.

En utilisant || et && court-circuitant

Les opérateurs booléens || et && va "court-circuiter" et ne pas évaluer le second paramètre si le premier est vrai ou faux respectivement. Cela peut être utilisé pour écrire des conditions courtes comme:

var x = 10

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