Javascript: Verwenden einer Bedingung im Schalterfall

Entschuldigung für diese dumme Frage. Wie kann ich eine Bedingung für einen Fall im Javascript Switch-Case-Sprachelement verwenden? Wie im folgenden Beispiel sollte ein Fall übereinstimmen, wenn die Variable liCount<= 5 und> 0 ist. Mein Code funktioniert jedoch nicht:

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

Vielen Dank für jeden Rat!

Das funktioniert:

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

In einer früheren Version dieser Antwort wurden die Klammern als Schuldige angesehen. In Wahrheit sind die Klammern hier irrelevant - das einzige, was notwendig ist, ist, switch(true){...}dass Ihre Fallausdrücke zu Booleschen Werten ausgewertet werden.

Es funktioniert, weil der Wert, den wir dem Schalter geben, als Grundlage für den Vergleich verwendet wird. Folglich bestimmen die Fallausdrücke, die auch nach Booleschen Werten ausgewertet werden, welcher Fall ausgeführt wird. Könnte dies auch umkehren und bestehen switch(false){..}und die gewünschten Ausdrücke als falsch anstatt als wahr bewerten lassen. Ich persönlich bevorzuge es jedoch, mit Bedingungen umzugehen, die als wahrheitsgetreu bewertet werden. Es funktioniert jedoch auch, daher sollten Sie bedenken, um zu verstehen, was es tut.

Beispiel: Wenn liCount 3 ist, ist der erste Vergleich true === (liCount == 0), was bedeutet, dass der erste Fall falsch ist. Der Schalter fährt dann mit dem nächsten Fall fort true === (liCount<=5 && liCount>0). Dieser Ausdruck wird als wahr ausgewertet, was bedeutet, dass dieser Fall ausgeführt wird und am endet break. Ich habe hier Klammern hinzugefügt, um es klarer zu machen, aber sie sind optional, abhängig von der Komplexität Ihres Ausdrucks.

Es ist ziemlich einfach und eine gute Möglichkeit (wenn es zu dem passt, was Sie versuchen), mit einer langen Reihe von Bedingungen umzugehen, bei denen eine lange Reihe von ìf() ... else if() ... else if () ...möglicherweise viel visuelles Rauschen oder Zerbrechlichkeit mit sich bringt.

Seien Sie vorsichtig, da es sich trotz gültigen Codes um ein nicht standardmäßiges Muster handelt.

Sie haben das viel zu kompliziert gemacht. Schreiben Sie es stattdessen mit if-Anweisungen wie folgt:

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

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

Oder wenn ChaosPandion versucht, so viel wie möglich zu optimieren:

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

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

Sie möchten if-Anweisungen verwenden:

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

Siehe die Antwort von dmp unten. Ich würde diese Antwort löschen, wenn ich könnte, aber sie wurde akzeptiert, also ist dies das nächstbeste :)

Das kannst du nicht. JS-Interpreter verlangen, dass Sie mit der switch-Anweisung vergleichen (z. B. gibt es keine "case when" -Anweisung). Wenn Sie dies wirklich tun möchten, können Sie einfach if(){ .. } else if(){ .. }Blöcke erstellen.

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

funktioniert in JavaScript, solange Ihre Bedingungen die richtigen booleanWerte zurückgeben, hat jedoch nicht viele Vorteile gegenüber else ifAnweisungen.

In diesem Fall sollten Sie ifKlauseln verwenden.

Wenn Sie dies tun möchten, ist es besser, ifAnweisungen zu verwenden . Beispielsweise:

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();

Ihr Code funktioniert nicht, weil er nicht das tut, was Sie von ihm erwarten. Schalterblöcke nehmen einen Wert auf und vergleichen jeden Fall mit dem angegebenen Wert, um Gleichheit zu erreichen. Ihr Vergleichswert ist eine Ganzzahl, aber die meisten Ihrer Fallausdrücke werden in einen booleschen Wert aufgelöst.

So sagen wir zum Beispiel liCount = 2. Ihr erster Fall wird nicht übereinstimmen, weil 2 != 0. Ihr zweiter Fall wird (liCount<=5 && liCount>0)mit true, aber bewertet 2 != true, sodass dieser Fall auch nicht übereinstimmt.

Aus diesem Grund sollten Sie, wie viele andere gesagt haben, eine Reihe von if...then...else ifBlöcken verwenden, um dies zu tun.

Wenn die möglichen Werte Ganzzahlen sind, können Sie Fälle zusammenfassen. Verwenden Sie andernfalls 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();

Beachten Sie, dass wir keine Punktzahl an den Switch übergeben, sondern true. Der Wert, den wir dem Schalter geben, wird als Vergleichsbasis verwendet.

Das folgende Beispiel zeigt, wie wir im Fall Bedingungen hinzufügen können: ohne if-Anweisungen.

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

Obwohl in dem speziellen Beispiel der OP-Frage dies switchnicht angemessen ist, gibt es ein Beispiel, in dem ein Wechsel immer noch angemessen / nützlich ist, aber auch andere Bewertungsausdrücke erforderlich sind. Dies kann erreicht werden, indem die Standardklausel für die Ausdrücke verwendet wird:

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