wake-up-neo.com

Javascript: Verwenden einer Bedingung im Schaltergehäuse

Entschuldigung für diese dumme Frage. Wie kann ich eine Bedingung für einen Fall im Sprachelement Javascript Switch-Case 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;                  
}

Danke für jeden Rat!

64
haemse

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){...} und damit Ihre Fallausdrücke zu Booleschen Werten werden.

Es funktioniert, weil der Wert, den wir dem Schalter geben, als Grundlage für den Vergleich verwendet wird. Folglich bestimmen die case-Ausdrücke, die auch als Boolesche Werte ausgewertet werden, welcher case ausgeführt wird. Könnte dies auch umkehren und switch(false){..} übergeben und die gewünschten Ausdrücke als falsch statt als wahr bewerten lassen. Es funktioniert jedoch auch, so dass es sich lohnt, im Hinterkopf zu behalten, 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 geht dann weiter zum nächsten Fall true === (liCount<=5 && liCount>0). Dieser Ausdruck ergibt true, was bedeutet, dass dieser Fall ausgeführt wird und am break endet. 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 nette Art, mit einer langen Reihe von Bedingungen umzugehen (wenn es zu dem passt, was Sie versuchen), wobei eine lange Reihe von ìf() ... else if() ... else if () ... möglicherweise viel visuelles Rauschen oder Zerbrechlichkeit hervorruft .

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

217
dmp

Sie haben viel das überkompliziert. 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();
19
Eric

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

Das kannst du nicht. Bei JS-Interpretern müssen Sie einen Vergleich mit der switch-Anweisung durchführen (z. B. gibt es keine "case when" -Anweisung). Wenn Sie das wirklich wollen, können Sie einfach if(){ .. } else if(){ .. } Blöcke erstellen.

7
Mark Kahn

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();  
7
ChaosPandion
switch (true) {
  case condition0:
    ...
    break;
  case condition1:
    ...
    break;
}

funktioniert in JavaScript, solange Ihre Bedingungen die richtigen boolean Werte zurückgeben, aber es hat nicht viele Vorteile gegenüber else if Aussagen.

5
Mike Samuel

Wenn Sie dies tun möchten, ist es besser, if -Anweisungen 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();
4
Neal

In diesem Fall sollten Sie if -Klauseln verwenden.

3
ThiefMaster

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 nach Gleichheit zu suchen. Ihr Vergleichswert ist eine Ganzzahl, aber die meisten Ihrer case-Ausdrücke werden in einen booleschen Wert aufgelöst.

Sagen Sie zum Beispiel liCount = 2. Dein erster Fall wird nicht passen, weil 2 != 0. Dein zweiter Fall, (liCount<=5 && liCount>0) ergibt true, aber 2 != true, so wird dieser Fall auch nicht übereinstimmen.

Aus diesem Grund sollten Sie, wie viele andere gesagt haben, eine Reihe von if...then...else if blockiert dies.

2
Ender

wenn es sich bei den möglichen Werten um Ganzzahlen handelt, können Sie Fälle bündeln. Ansonsten verwende 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();
2
kennebec