javascript: utilisation d'une condition dans la casse du commutateur

Désolé pour cette question stupide. Comment puis-je utiliser une condition pour un cas dans l'élément de langage javascript switch-case? Comme dans l'exemple ci-dessous, un cas doit correspondre lorsque la variable liCountest <= 5 et> 0; cependant, mon code ne fonctionne pas:

switch (liCount) {
    case 0:
        setLayoutState('start');
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;
    case (liCount<=5 && liCount>0):
        setLayoutState('upload1Row');
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;
    case (liCount<=10 && liCount>5):
        setLayoutState('upload2Rows');
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;
    case (liCount>10):
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;                  
}

Merci pour tout conseil!

Cela marche:

switch (true) {
    case liCount == 0:
        setLayoutState('start');
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;
    case liCount<=5 && liCount>0:
        setLayoutState('upload1Row');
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;
    case liCount<=10 && liCount>5:
        setLayoutState('upload2Rows');
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;
    case liCount>10:
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;                  
}

Une version précédente de cette réponse considérait les parenthèses comme le coupable. En vérité, les parenthèses ne sont pas pertinentes ici - la seule chose nécessaire est switch(true){...}que vos expressions de cas soient évaluées en booléens.

Cela fonctionne parce que la valeur que nous attribuons au commutateur est utilisée comme base de comparaison. Par conséquent, les expressions de cas, également évaluées en booléens, détermineront quel cas est exécuté. Pourrait également switch(false){..}inverser la tendance , passer et faire évaluer les expressions souhaitées comme fausses au lieu de vraies ... mais personnellement, préférez traiter des conditions qui évaluent la vérité. Cependant, cela fonctionne aussi, il vaut donc la peine de garder à l'esprit ce qu'il fait.

Par exemple: si liCount vaut 3, la première comparaison est true === (liCount == 0), ce qui signifie que le premier cas est faux. L'interrupteur passe ensuite au cas suivant true === (liCount<=5 && liCount>0). Cette expression prend la valeur true, ce qui signifie que ce cas est exécuté et se termine au break. J'ai ajouté des parenthèses ici pour le rendre plus clair, mais elles sont facultatives, en fonction de la complexité de votre expression.

C'est assez simple et une manière élégante (si cela correspond à ce que vous essayez de faire) de gérer une longue série de conditions, où peut-être une longue série de conditions ìf() ... else if() ... else if () ...pourrait introduire beaucoup de bruit visuel ou de fragilité.

À utiliser avec prudence, car il s'agit d'un modèle non standard, bien qu'il s'agisse d'un code valide.

Vous avez bien trop compliqué cela. Écrivez-le avec des instructions if à la place comme ceci:

if(liCount == 0)
    setLayoutState('start');
else if(liCount<=5)
    setLayoutState('upload1Row');
else if(liCount<=10)
    setLayoutState('upload2Rows');

$('#UploadList').data('jsp').reinitialise();

Ou, si ChaosPandion essaie d'optimiser autant que possible:

setLayoutState(liCount == 0 ? 'start' :
               liCount <= 5 ? 'upload1Row' :
               liCount <= 10 ? 'upload2Rows' :
               null);

$('#UploadList').data('jsp').reinitialise();

Vous souhaitez utiliser les instructions if:

if (liCount === 0) {
    setLayoutState('start');
} else if (liCount <= 5) {
    setLayoutState('upload1Row');
} else if (liCount <= 10) {
    setLayoutState('upload2Rows');
}
$('#UploadList').data('jsp').reinitialise();  

Voir la réponse de dmp ci-dessous. Je supprimerais cette réponse si je le pouvais, mais elle a été acceptée, c'est donc la meilleure chose à faire :)

Vous ne pouvez pas. Les interpréteurs JS exigent que vous compariez avec l'instruction switch (par exemple, il n'y a pas d'instruction "case when"). Si vous voulez vraiment faire cela, vous pouvez simplement créer des if(){ .. } else if(){ .. }blocs.

switch (true) {
  case condition0:
    ...
    break;
  case condition1:
    ...
    break;
}

fonctionnera en JavaScript tant que vos conditions renvoient des booleanvaleurs appropriées , mais cela n'a pas beaucoup d'avantages par rapport aux else ifinstructions.

C'est un cas où vous devriez utiliser des ifclauses.

Si c'est ce que vous voulez faire, il serait préférable d'utiliser des ifinstructions. Par exemple:

if(liCount == 0){
    setLayoutState('start');
}
if(liCount<=5 && liCount>0){
    setLayoutState('upload1Row');
}
if(liCount<=10 && liCount>5){
    setLayoutState('upload2Rows');
}             
var api = $('#UploadList').data('jsp');
    api.reinitialise();

Votre code ne fonctionne pas car il ne fait pas ce que vous attendez de lui. Les blocs de commutation prennent une valeur et comparent chaque cas à la valeur donnée, en recherchant l'égalité. Votre valeur de comparaison est un entier, mais la plupart de vos expressions de cas se résolvent en une valeur booléenne.

Alors, par exemple, disons liCount = 2. Votre premier cas ne correspondra pas, car 2 != 0. Votre deuxième cas, (liCount<=5 && liCount>0)évalue à true, mais 2 != true, donc ce cas ne correspondra pas non plus.

Pour cette raison, comme beaucoup d'autres l'ont dit, vous devez utiliser une série de if...then...else ifblocs pour ce faire.

si les valeurs possibles sont des entiers, vous pouvez regrouper les observations. Sinon, utilisez ifs.

var api, tem;

switch(liCount){
    case 0:
    tem= 'start';
    break;
    case 1: case 2: case 3: case 4: case 5:
    tem= 'upload1Row';
    break;
    case 6: case 7: case 8: case 9: case 10:
    tem= 'upload2Rows';
    break;
    default:
    break;
}
if(tem) setLayoutState((tem);
api= $('#UploadList').data('jsp');
api.reinitialise();

Notez que nous ne transmettons pas le score au commutateur mais vrai. La valeur que nous attribuons au commutateur est utilisée comme base de comparaison.

L'exemple ci-dessous montre comment nous pouvons ajouter des conditions dans le cas: sans aucune instruction if.

function getGrade(score) {
    let grade;
    // Write your code here
    switch(true) {
        case score >= 0 && score <= 5:
        grade = 'F';
        break;
        case score > 5 && score <= 10:
        grade = 'E';
        break;
        case score > 10 && score <= 15:
        grade = 'D';
        break;
        case score > 15 && score <= 20:
        grade = 'C';
        break;
        case score > 20 && score <= 25:
        grade = 'B';
        break;
        case score > 25 && score <= 30:
        grade = 'A';
        break;
    }

    return grade;
}

Bien que dans l'exemple particulier de la question du PO, switchne soit pas approprié, il y a un exemple où le changement est toujours approprié / bénéfique, mais d'autres expressions d'évaluation sont également nécessaires. Cela peut être réalisé en utilisant la clause par défaut pour les expressions:

switch (foo) {
  case 'bar':
    // do something
    break;
  case 'foo':
    // do something
    break;
  ... // other plain comparison cases
  default:
    if (foo.length > 16) {
      // something specific
    } else if (foo.length < 2) {
      // maybe error
    } else {
      // default action for everything else
    }
}