JavaScript：在 switch case 中使用条件

发布于 2024-10-27 14:51:15 字数 782 浏览 5 评论 0原文

如何在 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;
}

感谢任何建议！

原文

How can I use a condition inside a switch statement for JavaScript?
In the example below, a case should match when the variable liCount is <= 5 and > 0; however, my code does not work:

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

Appreciate any advice!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吃兔兔 2024-11-03 14:51:15

这是可行的：

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.. 但个人更喜欢处理计算为 true 的条件。然而，它也确实有效，因此值得记住以了解它在做什么。

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

它非常简单，并且是处理一长串条件的巧妙方法（如果它适合您想要做的事情），其中可能是一长串 ìf() ... else if() ... else if () ... 可能会引入很多视觉噪音或脆弱性。

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

This works:

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

The only thing necessary is switch(true){...} and for your case expressions to evaluate to booleans.

It works because, the value we give to the switch is used as the basis to compare against. Consequently, the case expressions, also evaluating to booleans will determine which case is run. Could also turn this around, and pass switch(false){..} and have the desired expressions evaluate to false instead of true.. but personally prefer dealing with conditions that evaluate to truthyness. However, it does work too, so worth keeping in mind to understand what it is doing.

Eg: if liCount is 3, the first comparison is true === (liCount == 0), meaning the first case is false. The switch then moves on to the next case true === (liCount<=5 && liCount>0). This expression evaluates to true, meaning this case is run, and terminates at the break. I've added parentheses here to make it clearer, but they are optional, depending on the complexity of your expression.

It's pretty simple, and a neat way (if it fits with what you are trying to do) of handling a long series of conditions, where perhaps a long series of ìf() ... else if() ... else if () ... might introduce a lot of visual noise or fragility.

Use with caution, because it is a non-standard pattern, despite being valid code.

回复收藏 0 原文

与他有关 2024-11-03 14:51:15

你把这个问题想得太复杂了。使用 if 语句来编写它，如下所示：

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

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

或者， if ChaosPandion< /a> 正在尝试尽可能优化：

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

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

You've way overcomplicated that. Write it with if statements instead like this:

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

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

Or, if ChaosPandion is trying to optimize as much as possible:

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

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

回复收藏 0 原文

若有似无的小暗淡 2024-11-03 14:51:15

您想使用 if 语句：

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

You want to use if statements:

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

回复收藏 0 原文

岁月静好 2024-11-03 14:51:15

您可以在 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

You can use fall-through method in switch case.

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

回复收藏 0 原文

苏大泽ㄣ 2024-11-03 14:51:15

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

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

回复收藏 0 原文

一人独醉 2024-11-03 14:51:15

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

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

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

will work in JavaScript as long as your conditions return proper boolean values, but it doesn't have many advantages over else if statements.

回复收藏 0 原文

泅渡 2024-11-03 14:51:15

如果可能的值是整数，则可以将情况集中起来。
否则，使用 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();

if the possible values are integers you can bunch up cases.
Otherwise, use 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();

回复收藏 0 原文

多像笑话 2024-11-03 14:51:15

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

回复收藏 0 原文

月亮坠入山谷 2024-11-03 14:51:15

如果这就是您想要做的，最好使用 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();

If that's what you want to do, it would be better to use if statements. For example:

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

回复收藏 0 原文

因为看清所以看轻 2024-11-03 14:51:15

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

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

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

回复收藏 0 原文

芸娘子的小脾气 2024-11-03 14:51:15

如果你想在 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);

If you want pass any value in switch statement
and then apply condition on that passing value and
evaluate statement then you have to write switch
statement under an function and pass parameter in that
function and then pass true in switch expression like the
below example.

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

回复收藏 0 原文

泪意 2024-11-03 14:51:15

请注意，我们没有将分数传递给开关，而是将分数传递给 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;
}

Notice that we don't pass score to the switch but true. The value we give to the switch is used as the basis to compare against.

The below example shows how we can add conditions in the case: without any if statements.

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

回复收藏 0 原文

小情绪 2024-11-03 14:51:15

尽管在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
    }
}

Although in the particular example of the OP's question, switch is not appropriate, there is an example where switch is still appropriate/beneficial, but other evaluation expressions are also required. This can be achieved by using the default clause for the expressions:

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

回复收藏 0 原文

暖伴 2024-11-03 14:51:15

（对于多年后的后代）

这非常违反惯例，但如果有人想避免使用条件开关案例，也可以使用三元作为看起来更干净的 if/else 链。

例如，

let value;
if (mainCondition) { value = 0; }
else if (subCondition1) { value = 1; }
else if (subCondition2) { value = 2; }
else { value = null; }

如果

const value = mainCondition ? 0 :
  subCondition1 ? 1 :
  subCondition2 ? 2 :
  null;

维护不善，它很快就会变得一团糟，大多数人都不会喜欢看到这个，甚至如果经验不足的话也无法阅读它，毕竟它是非常规的，但它会清理 if else 到这样的程度几乎就像开关盒一样简单。

(For posterity years later)

It's pretty against convention, but it's also possible to use ternary as a cleaner looking if/else chain, if someone wants to avoid using conditional switch cases.

E.g.

let value;
if (mainCondition) { value = 0; }
else if (subCondition1) { value = 1; }
else if (subCondition2) { value = 2; }
else { value = null; }

Becomes

const value = mainCondition ? 0 :
  subCondition1 ? 1 :
  subCondition2 ? 2 :
  null;

It can quickly become a spaghetti mess if poorly maintained, and most people won't like seeing this or even be able to read it if less experienced, it's non-conventional after all, but it cleans up if else to the point of being nearly as simple as a switch case can be.

回复收藏 0 原文

~没有更多了~