Basculer plusieurs cas en Javascript

1. Switch avec plusieurs cas en Javascript à l’aide du modèle Fall Through
2. Gestion de plusieurs cas dans Switch à l’aide d’expressions mathématiques en JavaScript
3. Gestion de plusieurs cas dans Switch à l’aide d’expressions de chaîne en Javascript
4. Gestion de plusieurs cas dans Switch à l’aide d’expressions logiques en Javascript

Les boîtiers de commutation sont beaucoup plus performants que l’échelle if-else. Ils ont une correspondance directe des valeurs d’une variable, dans le bloc switch(variable), à leurs valeurs correspondantes, dans le bloc case: value. Nous connaissons l’utilisation habituelle du switch-case avec une seule carte de valeur, mais peut-elle prendre en charge plusieurs cas ? Voyons quelques façons, en javascript, d’avoir plusieurs cas dans le bloc switch-case.

Switch avec plusieurs cas en Javascript à l’aide du modèle Fall Through

Le modèle Fall through est une première étape dans la prise en charge de switch avec plus d’un bloc case en javascript. Ici, nous capturons plusieurs valeurs de la variable commutée à travers plusieurs cas. Nous appliquons le mot-clé break pour un ensemble de cas valides. Par exemple, si nous voulons enregistrer le nom du trimestre d’une année en fonction du mois écoulé, nous associerons les indices du mois en fonction du trimestre. Référez-vous au code suivant.

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
}

function findQuarter(dateString) {
  var monthIndex = new Date(dateString).getMonth();
  switch (monthIndex) {
    case 0:
    case 1:
    case 2:
      console.log('First Quarter');
      break;
    case 3:
    case 4:
    case 5:
      console.log('Second Quarter');
      break;
    case 6:
    case 7:
    case 8:
      console.log('Third Quarter');
      break;
    case 9:
    case 10:
    case 11:
      console.log('Fourth Quarter');
      break;
  }
}

Production:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter

La fonction findQuarter() accepte une chaîne de date au format yyyy-mm-dd. Il extrait ensuite l’index du mois de l’argument dateString en le convertissant d’abord en un objet date javascript, puis en obtenant l’index du mois à partir de l’objet date. Le getMonth() est une fonction javascript qui s’applique sur un objet Date et renvoie l’index du mois à partir de 0. Nous utilisons ici plusieurs cas, empilés les uns sous les autres pour capturer plusieurs valeurs pour la sortie.

Par exemple, pour les mois de janvier à mars, les indices de mois respectifs seront compris entre 0 et 2 en fonction de la sortie renvoyée par la fonction getMonth(). On empile tous les cas de 0 à 2 sans le mot-clé break. Par conséquent, ils trébuchent et cassent le switch-case en rencontrant le break qui se trouve dans la ligne case 2: où il enregistre la valeur First Quarter. Cet ensemble de codes semble encombrant. Nous pouvons réécrire la même chose comme suit pour réduire le nombre de lignes.

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
}

function findQuarter(dateString) {
  var monthIndex = new Date(dateString).getMonth();
  switch (monthIndex) {
    case 0:
    case 1:
    case 2:
      console.log('First Quarter');
      break;
    case 3:
    case 4:
    case 5:
      console.log('Second Quarter');
      break;
    case 6:
    case 7:
    case 8:
      console.log('Third Quarter');
      break;
    case 9:
    case 10:
    case 11:
      console.log('Fourth Quarter');
      break;
  }
}

Production:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter

Notez qu’ici la sortie reste la même. C’est juste une autre façon d’écrire le modèle Fall through du switch-case. Cela rend le code plus propre et économise de l’espace.

Gestion de plusieurs cas dans Switch à l’aide d’expressions mathématiques en JavaScript

Nous avons affaire à des valeurs numériques d’un mois selon l’exemple mentionné dans la section précédente. Peut-on utiliser des expressions dans des blocs case ? Définitivement oui! Référons-nous au code suivant avant d’en expliquer le fonctionnement.

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
  findQuarter('2021-2-30');
}

function findQuarter(dateString) {
  var monthIndex = new Date(dateString).getMonth();
  switch (monthIndex) {
        case ( (monthIndex < 2) ? monthIndex : -1 ):
            console.log('First Quarter');
          break;
        case ( ((monthIndex > 2) && (monthIndex < 5)) ?  monthIndex : -1):
            console.log('Second Quarter');
          break;
        case ( ((monthIndex > 5) && (monthIndex < 8)) ?  monthIndex : -1):
            console.log('Third Quarter');
          break;
        case ( ((monthIndex > 8) && (monthIndex < 11)) ?  monthIndex : -1):
            console.log('Fourth Quarter');
          break;
        default:
          console.log('Invalid date');
          break;
  }
}

Production:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter

Si nous utilisons des expressions dans le cas du commutateur, elles doivent renvoyer une valeur numérique sinon -1. Dans l’extrait de code ci-dessus, nous avons ajouté des expressions numériques dans le bloc case au lieu de leurs valeurs réelles. Ces expressions évaluent pour le trimestre correspondant du mois et enregistrent le nom du trimestre. Ici, nous avons inclus la clause default dans le switch case pour gérer Invalid date. La méthode getMonth() en javascript renvoie une valeur (entre 0 et 11) si le month dans date est valide (dans la plage de 1 à 12) sinon elle renvoie NaN. Le bloc default attrapera de tels scénarios de date invalide.

Gestion de plusieurs cas dans Switch à l’aide d’expressions de chaîne en Javascript

Nous pouvons également utiliser des expressions de chaîne à l’intérieur du bloc case. Ces expressions sont évaluées au moment de l’exécution, en exécutant la clause case. Pour notre exemple de mois, essayons de changer le nom du mois. Pour cela, nous allons appliquer la fonction toLocaleDateString() sur l’objet date. Dans le paramètre options de la fonction, on donne { month: 'long' }. La sortie pour le toLocaleDateString('en-US', { month: 'long' }) sera désormais un nom de mois, le nom complet du mois. Ensuite, nous changeons la sortie du nom complet du mois de la fonction toLocaleDateString('en-US', { month: 'long' }).

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
  findQuarter('2021-21-30');
}

function findQuarter(dateString) {
  var monthName =
      new Date(dateString).toLocaleDateString('en-US', {month: 'long'});
  switch (true) {
    case['January', 'February', 'March'].includes(monthName):
      console.log('First Quarter');
      break;
    case['April', 'May', 'June'].includes(monthName):
      console.log('Second Quarter');
      break;
    case['July', 'August', 'September'].includes(monthName):
      console.log('Third Quarter');
      break;
    case['October', 'November', 'December'].includes(monthName):
      console.log('Fourth Quarter');
      break;
    default:
      console.log('Invalid date');
      break;
  }
}

Production:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter
Invalid date

Dans le code ci-dessus, nous avons utilisé l’instruction switch(true). Dans la clause case, nous avons la comparaison de chaînes. Nous avons créé un tableau temporaire de mois pour chaque trimestre et les avons ajoutés à chaque cas. Ensuite, nous vérifions si le monthName est disponible dans le tableau quarter. S’il est trouvé, il enregistrera le nom du quartier. Si la date n’est pas valide, la fonction toLocaleDateString('en-US', { month: 'long' }) affichera Invalid Date. Ce scénario est pris en compte par le bloc default car la chaîne Invalid Date ne correspondra pas aux tableaux prédéfinis contenant les noms des mois d’un trimestre. Par conséquent, nous gérons le scénario de date invalide en douceur ici.

Gestion de plusieurs cas dans Switch à l’aide d’expressions logiques en Javascript

Comme nous l’avons vu dans les expressions mathématiques et de chaîne, nous pouvons également utiliser des opérateurs logiques dans les cas multiples dans le bloc switch-case. Dans l’exemple du mois, nous utiliserons l’opérateur logique OR || pour décider si le nom du mois est dans un trimestre particulier. Référons-nous au code suivant.

window.onload =
    function() {
  findQuarter('2021-08-08');
  findQuarter('2021-05-12');
  findQuarter('2021-02-28');
  findQuarter('2021-11-30');
  findQuarter('2021-21-30');
}

function findQuarter(dateString) {
  var monthName =
      new Date(dateString).toLocaleDateString('en-US', {month: 'long'});
  switch (true) {
    case (
        monthName === 'January' || monthName === 'February' ||
        monthName === 'March'):
      console.log('First Quarter');
      break;
    case (monthName === 'April' || monthName === 'May' || monthName === 'June'):
      console.log('Second Quarter');
      break;
    case (
        monthName === 'July' || monthName === 'August' ||
        monthName === 'September'):
      console.log('Third Quarter');
      break;
    case (
        monthName === 'October' || monthName === 'November' ||
        monthName === 'December'):
      console.log('Fourth Quarter');
      break;
    default:
      console.log('Invalid date');
      break;
  }
}

Production:

Third Quarter
Second Quarter
First Quarter
Fourth Quarter
Invalid date

Dans le code, nous vérifions si la valeur monthName est égale au mois d’un trimestre. En conséquence, nous consolons le nom du quartier. Ici aussi, nous traitons le cas de la date invalide car elle ne satisfera à aucune des conditions codées dans la clause case et tombera dans le bloc default, qui imprime alors Date invalide sur la console du navigateur.