javascript: używanie warunku w przypadku przełącznika

Przepraszam za to głupie pytanie. Jak mogę użyć warunku dla przypadku w elemencie języka przełączania wielkości liter javascript? Podobnie jak w poniższym przykładzie, wielkość liter powinna być zgodna, gdy zmienna liCountma wartość <= 5 i> 0; jednak mój kod nie działa:

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

Dzięki za każdą radę!

To działa:

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

Poprzednia wersja tej odpowiedzi uważała nawiasy za winowajcę. Prawdę mówiąc, nawiasy nie mają tu znaczenia - jedyne, co jest potrzebne, to switch(true){...}aby wyrażenia przypadków były obliczane na wartości logiczne.

Działa, ponieważ wartość, którą podajemy przełącznikowi, jest używana jako podstawa do porównania. W konsekwencji wyrażenia przypadków, również obliczane na wartości logiczne, określają, który przypadek jest uruchamiany. Mógłby to również odwrócić i przekazać switch(false){..}i sprawić, że pożądane wyrażenia zostaną ocenione na fałsz zamiast na prawdę, ale osobiście wolę radzić sobie z warunkami, które oceniają prawdziwość. Jednak to też działa, więc warto pamiętać, aby zrozumieć, co robi.

Np .: jeśli liCount wynosi 3, pierwsze porównanie jest true === (liCount == 0), co oznacza, że ​​pierwszy przypadek jest fałszywy. Przełącznik przechodzi następnie do następnej sprawy true === (liCount<=5 && liCount>0). To wyrażenie zwraca wartość true, co oznacza, że ​​ten przypadek jest uruchamiany i kończy się na break. Dodałem tutaj nawiasy, aby było jaśniej, ale są one opcjonalne, w zależności od złożoności Twojego wyrażenia.

Jest to dość proste i zgrabny sposób (jeśli pasuje do tego, co próbujesz zrobić) radzenia sobie z długą serią warunków, w których być może długa seria ìf() ... else if() ... else if () ...może wprowadzić dużo wizualnego szumu lub kruchości.

Używaj ostrożnie, ponieważ jest to niestandardowy wzorzec, mimo że jest prawidłowym kodem.

Masz sposób zbyt skomplikowana, że. Zamiast tego napisz go za pomocą instrukcji if w ten sposób:

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

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

Lub, jeśli ChaosPandion próbuje zoptymalizować tak bardzo, jak to możliwe:

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

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

Chcesz użyć instrukcji if:

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

Zobacz odpowiedź dmp poniżej. Skasowałbym tę odpowiedź, gdybym mógł, ale została zaakceptowana, więc to kolejna najlepsza rzecz :)

Nie możesz. Interpretatorzy JS wymagają porównania z instrukcją switch (np. Nie ma instrukcji „przypadek kiedy”). Jeśli naprawdę chcesz to zrobić, możesz po prostu zrobić if(){ .. } else if(){ .. }bloki.

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

będzie działać w JavaScript, o ile twoje warunki zwrócą prawidłowe booleanwartości, ale nie ma wielu zalet w porównaniu z else ifinstrukcjami.

To jest przypadek, w którym powinieneś używać ifklauzul.

Jeśli tego chcesz, lepiej byłoby użyć ifinstrukcji. Na przykład:

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

Twój kod nie działa, ponieważ nie robi tego, czego od niego oczekujesz. Bloki przełączające pobierają wartość i porównują każdy przypadek z podaną wartością, szukając równości. Twoja wartość porównawcza jest liczbą całkowitą, ale większość wyrażeń określających wielkość liter ma wartość logiczną.

Na przykład powiedz liCount = 2. Twój pierwszy przypadek nie będzie pasował, ponieważ2 != 0 . Twój drugi przypadek zostanie (liCount<=5 && liCount>0)oszacowany na true, ale 2 != true, więc ten przypadek również nie będzie pasował.

Z tego powodu, jak powiedziało wielu innych, powinieneś użyć do tego szeregu if...then...else ifbloków.

jeśli możliwe wartości są liczbami całkowitymi, możesz zebrać przypadki. W przeciwnym razie użyj 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();

Zauważ, że nie przekazujemy wyniku do przełącznika, ale prawda. Wartość, którą podajemy przełącznikowi, służy jako podstawa do porównania.

Poniższy przykład pokazuje, jak możemy dodać warunki w przypadku: bez żadnych instrukcji 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;
}

Chociaż w tym konkretnym przykładzie pytania PO switchnie jest właściwe, istnieje przykład, w którym zmiana jest nadal odpowiednia / korzystna, ale wymagane są również inne wyrażenia oceny. Można to osiągnąć, używając domyślnej klauzuli dla wyrażeń:

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