JavaScript：在 switch case 中使用条件

Question

如何在 JavaScript 的 switch 语句中使用条件？ 在下面的示例中，当变量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;
  default:
    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){...}和你的 case 表达式计算为布尔值。

它之所以有效，是因为我们赋予开关的值用作比较的基础。 因此，case 表达式（也计算为布尔值）将确定运行哪个 case。 也可以扭转这种情况，并通过switch(false){..}并让所需的表达式评估为 false 而不是 true.. 但个人更喜欢处理评估为真实性的条件。 但是，它也确实有效，因此值得牢记以了解它在做什么。

例如：如果 liCount 为 3，则第一个比较结果为true === (liCount == 0) ，这意味着第一个情况为 false。 然后切换到下一个案例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

您想使用 if 语句：

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

Answer 4

请参阅下面的 dmp 答案。 如果可以的话，我会删除这个答案，但它被接受了，所以这是下一个最好的事情:)

你不能。 JS 解释器要求您与 switch 语句进行比较（例如，没有“case when”语句）。 如果你真的想这样做，你可以只做 if(){ .. } else if(){ .. }块。

Answer 5

您可以在 switch case 中使用 fall-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 6

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

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

Answer 7

在这种情况下，您应该使用if子句。

Answer 8

如果这就是您想要做的，最好使用if语句。 例如：

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

Answer 9

如果可能的值是整数，则可以将案例捆绑在一起。 否则，使用 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();

Answer 10

您的代码不起作用，因为它没有按照您的期望执行。 Switch 块接受一个值，并将每个 case 与给定值进行比较，寻找相等性。 您的比较值是一个整数，但您的大多数 case 表达式都解析为一个布尔值。

因此，例如，说liCount = 2 。 您的第一个案例将不匹配，因为2 != 0 。 您的第二种情况(liCount<=5 && liCount>0)的计算结果为true ，但2 != true ，因此这种情况也不匹配。

出于这个原因，正如许多其他人所说，您应该使用一系列if...then...else if块来执行此操作。

Answer 11

请注意，我们没有将 score 传递给 switch，而是 true。 我们给开关的值用作比较的基础。

下面的例子展示了我们如何在 case: 中添加条件，而不需要任何 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;
}

Answer 12

尽管在 OP 问题的特定示例中， switch不合适，但有一个示例 switch 仍然合适/有益，但还需要其他评估表达式。 这可以通过使用表达式的默认子句来实现：

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

Answer 13

如果您想在 switch 语句中传递任何值，然后在该传递值和评估语句上应用条件，那么您必须在函数下编写 switch 语句并在该函数中传递参数，然后在 switch 表达式中传递 true，如下例所示。

 function numberChecker(num){ let age; switch(true){ case num >= 0 && num <= 10: age = "Child"; break; case num >= 10 && num <= 20: age = "Teenager"; break; case num >= 20 && num <= 30: age = "Young"; break; default: age = "Undefined!! Enter Age Between 0 - 30"; break; } console.log("WOW You Are " + age); } numberChecker(15);