javascript:在switch case中使用条件

Question

对不起那个愚蠢的问题.如何在javascript switch-case语言元素中使用case的条件？如下例所示,当变量liCount<= 5且> 0 时,情况应匹配; 但是,我的代码不起作用:

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

谢谢你的建议!

Answer 1

这有效:

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

此答案的先前版本认为括号是罪魁祸首.事实上,括号在这里是无关紧要的 - 唯一必要的是switch(true){...}你的案例表达式来评估布尔值.

它的工作原理是,我们给开关的值用作比较的基础.因此,案例表达式,也评估布尔值将决定运行哪种情况.也可以转过来,并传递switch(false){..}并将所需的表达式评估为false而不是true ..但个人更喜欢处理评估为真实性的条件.但是,它确实也有效,因此值得记住,了解它在做什么.

例如:如果liCount为3,则第一个比较是true === (liCount == 0),意味着第一种情况是假的.然后开关转到下一个案例true === (liCount<=5 && liCount>0).此表达式的计算结果为true,表示此情况已运行,并终止于break.我在这里添加括号以使其更清晰,但它们是可选的,具体取决于表达式的复杂性.

它非常简单,并且处理一系列条件很简单(如果它符合你想要做的),也许很长一段时间ìf() ... else if() ... else if () ...可能会引入很多视觉噪音或脆弱性.

请谨慎使用,因为它是非标准模式,尽管是有效的代码.

Answer 2

你的方式过于复杂这一点.用if语句写它,就像这样:

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

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

或者,如果ChaosPandion尝试尽可能地优化:

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

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

Answer 3

您可以在 switch case 中使用 drop-through 方法。

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

Answer 4

请参阅下面的dmp答案.如果可以的话,我会删除这个答案,但它已被接受,所以这是下一个最好的东西:)

你不能.JS解释器要求您与switch语句进行比较(例如,没有"case when when"语句).如果你真的想这样做,你可以制作if(){ .. } else if(){ .. }积木.

Answer 5

您想使用if语句:

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

Answer 6

如果可能的值是整数，则可以将情况集中起来。否则，使用 if。

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

Answer 7

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

只要您的条件返回正确的boolean值，它就可以在JavaScript中工作，但是与else if语句相比并没有很多优势。