javascript: utilizzo di una condizione in switch case

Scusa per quella stupida domanda. Come posso utilizzare una condizione per un caso nell'elemento linguaggio switch-case javascript? Come nell'esempio seguente, un caso dovrebbe corrispondere quando la variabile liCountè <= 5 e> 0; tuttavia, il mio codice non funziona:

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

Grazie per qualsiasi consiglio!

Funziona:

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

Una versione precedente di questa risposta considerava le parentesi il colpevole. In verità, le parentesi qui sono irrilevanti: l'unica cosa necessaria è switch(true){...}e affinché le espressioni del tuo caso vengano valutate come booleane.

Funziona perché il valore che diamo all'interruttore viene utilizzato come base per il confronto. Di conseguenza, le espressioni case, valutando anche booleani, determineranno quale caso viene eseguito. Potrebbe anche capovolgere questo, e passare switch(false){..}e fare in modo che le espressioni desiderate valutino false invece che vere .. ma personalmente preferisco trattare condizioni che valutano veridicità. Tuttavia, funziona anche lui, quindi vale la pena tenerlo a mente per capire cosa sta facendo.

Ad esempio: se liCount è 3, il primo confronto è true === (liCount == 0), il che significa che il primo caso è falso. L'interruttore passa quindi al caso successivo true === (liCount<=5 && liCount>0). Questa espressione restituisce true, il che significa che questo caso viene eseguito e termina in break. Ho aggiunto parentesi qui per renderlo più chiaro, ma sono opzionali, a seconda della complessità della tua espressione.

È piuttosto semplice e un modo pulito (se si adatta a ciò che stai cercando di fare) per gestire una lunga serie di condizioni, dove forse una lunga serie di condizioni ìf() ... else if() ... else if () ...potrebbe introdurre molto rumore visivo o fragilità.

Usare con cautela, perché è un pattern non standard, nonostante sia un codice valido.

Hai modo troppo complicata che. Scrivilo con istruzioni if ​​invece in questo modo:

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

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

Oppure, se ChaosPandion sta cercando di ottimizzare il più possibile:

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

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

Vuoi usare le istruzioni if:

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

Vedi la risposta di dmp di seguito. Eliminerei questa risposta se potessi, ma è stata accettata, quindi questa è la prossima cosa migliore :)

Non puoi. Gli interpreti JS richiedono di confrontare con l'istruzione switch (ad esempio, non esiste un'istruzione "case when"). Se vuoi davvero farlo, puoi semplicemente creare if(){ .. } else if(){ .. }blocchi.

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

funzionerà in JavaScript fintanto che le tue condizioni restituiscono booleanvalori corretti , ma non ha molti vantaggi rispetto alle else ifistruzioni.

Questo è un caso in cui dovresti usare le ifclausole.

Se è quello che vuoi fare, sarebbe meglio usare le ifdichiarazioni. Per esempio:

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

Il tuo codice non funziona perché non sta facendo quello che ti aspetti che faccia. I blocchi di commutazione prendono un valore e confrontano ogni caso con il valore dato, cercando l'uguaglianza. Il valore di confronto è un numero intero, ma la maggior parte delle espressioni del caso si risolve in un valore booleano.

Quindi, ad esempio, dì liCount = 2. Il tuo primo caso non corrisponderà, perché 2 != 0. Il tuo secondo caso (liCount<=5 && liCount>0)restituisce true, ma 2 != true, quindi neanche questo caso corrisponderà.

Per questo motivo, come molti altri hanno detto, dovresti utilizzare una serie di if...then...else ifblocchi per farlo.

se i valori possibili sono numeri interi, puoi raggruppare i casi. Altrimenti, usa 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();

Notare che non passiamo il punteggio allo switch ma è vero. Il valore che diamo allo switch viene utilizzato come base per il confronto.

L'esempio seguente mostra come aggiungere condizioni nel case: senza alcuna istruzione 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;
}

Sebbene nel particolare esempio della domanda del PO, switchnon sia appropriato, c'è un esempio in cui il passaggio è ancora appropriato / vantaggioso, ma sono necessarie anche altre espressioni di valutazione. Ciò può essere ottenuto utilizzando la clausola predefinita per le espressioni:

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

È possibile utilizzare il metodo di ricaduta in caso di commutazione.

const x = 'Welcome';

switch (x) {
  case 'Come':
    console.log(1)
    break;

  case 'Welcome':
  case 'Wel':
  case 'come':
    console.log(2)
    break;

  case 'Wel':
    console.log(3)
    break;

  default:
    break;
}

    
> Result => 2