Testez plusieurs cas dans un commutateur, comme un OU (||)

239

Comment utiliseriez-vous a switch caselorsque vous devez tester a ou b dans le même cas?

switch (pageid) {
  case "listing-page" || "home-page":
    alert("hello");
    break;
  case "details-page":
    alert("goodbye");
    break;
}

javascript switch-statement fall-through

— Andres
source

3

doublon possible de l' utilisation de l'opérateur OR dans la déclaration du commutateur javascript - c'est 100% votre question;)

— Felix Kling

J'ai trouvé en utilisant des virgules que 2 options permettaient chaque cas.

— Agus Widiarsa I Made

563

Vous pouvez utiliser la fonction Fall-through:

switch (pageid)
{
    case "listing-page":
    case "home-page":
        alert("hello");
        break;
    case "details-page":
        alert("goodbye");
        break;
}

— kei
source

69

C'est ce qu'on appelle la chute .

— Felix Kling

2

J'ai découvert cela avant de poster la question, mais j'ai pensé que ce serait utile pour la communauté car ce n'est pas bien documenté nulle part ... merci @SLaks pour votre réponse aussi.

— Andres

Salut @kei Je sais que ce n'est pas le bon endroit pour cela, mais vous avez répondu correctement à ma dernière question stackoverflow.com/questions/21049005/… souhaitez-vous republier votre réponse?

— Leon Gaban

1

Je pourrais aussi bien clarifier le point: une fois qu'un cas a été évalué comme étant vrai, c'est tout. Plus aucun cas n'est vérifié, juste toutes les instructions exécutées jusqu'à la fin: c'est-à-dire une "pause"; instruction ou si le commutateur est terminé.

— BeauCielBleu

d'autres exemples ici dans MDN docs

— Luca Reghellin

118

Étant donné que les autres réponses ont expliqué comment le faire sans vraiment expliquer pourquoi cela fonctionne:

Lorsque le switchs'exécute, il trouve la première caseinstruction correspondante , puis exécute chaque ligne de code après le commutateur jusqu'à ce qu'il atteigne une breakinstruction ou la fin de switch(ou une returninstruction pour quitter l'intégralité de la fonction contenant). Lorsque vous omettez délibérément le breakafin que le code sous le suivant casesoit également exécuté, cela s'appelle une erreur . Donc, pour l'exigence du PO:

switch (pageid) {
   case "listing-page":
   case "home-page":
      alert("hello");
      break;

   case "details-page":
      alert("goodbye");
      break;
}

Oublier d'inclure des breakinstructions est une erreur de codage assez courante et c'est la première chose que vous devez rechercher si votre switchne fonctionne pas comme prévu. Pour cette raison, certaines personnes aiment mettre un commentaire pour dire "fall through" pour indiquer clairement quand les déclarations de pause ont été délibérément omises. Je fais cela dans l'exemple suivant car c'est un peu plus compliqué et montre comment certains cas peuvent inclure du code à exécuter avant de tomber:

switch (someVar) {
   case 1:
      someFunction();
      alert("It was 1");
      // fall through
   case 2:
      alert("The 2 case");
      // fall through
   case 3:
      // fall through
   case 4:
      // fall through
   case 5:
      alert("The 5 case");
      // fall through
   case 6:
      alert("The 6 case");
      break;

   case 7:
      alert("Something else");
      break;

   case 8:
      // fall through
   default:
      alert("The end");
      break;
}

Vous pouvez également (facultativement) inclure un defaultcas, qui sera exécuté si aucun des autres cas ne correspond - si vous n'incluez pas dedefault cas et aucun cas, rien ne se passe. Vous pouvez (facultativement) passer au cas par défaut.

Donc, dans mon deuxième exemple, si someVarest 1, il appellerait someFunction()et vous verriez alors quatre alertes car il tombe dans plusieurs cas, dont certains ont des alertes sous eux. Est -ce someVarest 3, 4 ou 5 , vous verriez deux alertes. Si someVarc'est 7, vous verrez "autre chose" et si c'est 8 ou toute autre valeur, vous verrez "La fin".

— nnnnnn
source

4

Le commentaire // fall through fait que mon phpstorm cesse de m'avertir à propos de la déclaration de basculement, merci :)

— Getz

Vous pouvez utiliser return au lieu de break si le commutateur se trouve dans une fonction que vous appelez pour renvoyer un objet: switch (action.type) {case ADD: {return newState; } case DELETE: {return newState; } par défaut: {état de retour; }}

— Dominika

14

Vous devez créer deux caseétiquettes.

Le contrôle passera de la première étiquette à la seconde, ils exécuteront donc tous les deux le même code.

— SLaks
source

9

Vous devez le changer!

switch (true) {
    case ( (pageid === "listing-page") || (pageid === ("home-page") ):
        alert("hello");
        break;
    case (pageid === "details-page"):
        alert("goodbye");
        break;
}

— Stefano Favero
source

1

Cette méthode est très innovante :-) Je l'aime pour ça. Mais, comme il utilise plus de personnages que le classique "fall-through", il devient moins intéressant :)

— AlexLaforge

1

@AlexLaforge le plus étrange et ironique que dans une autre question stackouverflow une telle réponse a été totalement rejetée. Mais néanmoins je soutiens cette réponse et je suis d'accord, c'est une bonne solution pour des conditions flexibles.

— AlexNikonov

3

Oubliez switchet break, jouons avec if. Et au lieu d'affirmer

if(pageid === "listing-page" || pageid === "home-page")

permet de créer plusieurs tableaux avec des cas et de le vérifier avec Array.prototype.includes ()

var caseA = ["listing-page", "home-page"];
var caseB = ["details-page", "case04", "case05"];

if(caseA.includes(pageid)) {
    alert("hello");
}
else if (caseB.includes(pageid)) {
    alert("goodbye");
}
else {
    alert("there is no else case");
}

— khex
source

-6

Utilisez des virgules pour séparer la casse

switch (pageid)
{
    case "listing-page","home-page":
        alert("hello");
        break;
    case "details-page":
        alert("goodbye");
        break;
}

— Dinesh
source