javascript：在switch case中使用条件答案

【问题标题】：JavaScript: using a condition in switch casejavascript：在switch case中使用条件
【发布时间】：2011-07-24 18:37:34
【问题描述】：

抱歉这个愚蠢的问题。如何在 javascript switch-case 语言元素中为 case 使用条件？如下例所示，当变量 liCount 为 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;                  
}

感谢您的建议！

【问题讨论】：

如果你想这样做，请使用 if 语句......
你不应该忽视每个告诉你使用ifs的人，因为他们是对的。这是switch 的糟糕应用。
我不敢相信这个解决方案还没有提供。您可以这样做，该语句只需要评估 switch 子句中的值。所以这会起作用：var liCount = 2; switch (liCount) { case 0: console.log(0); break; case (liCount<=5 && liCount>0) && liCount: console.log('liCount<=5 && liCount>0'); break; case (liCount<=10 && liCount>5) && liCount: console.log('liCount<=10 && liCount>5'); break; case (liCount>10) && liCount: console.log(liCount); break; }

标签： javascript conditional-statements select-case

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

这是不正确的。这是一个演示它的工作原理：jsfiddle.net/Ender/fr3wL。 ECMAScript 标准明确声明这是允许的：docstore.mik.ua/orelly/webprog/jscript/ch06_05.htm#FOOTNOTE-18
@Ender 这和 haemse 想要做的有什么区别？
@Aistina 不是。由于他的案例条件产生的是真/假值而不是数值，因此 haemse 需要测试他的案例以获得真值（例如 danp 的回答所建议的），而不是针对 liCount 的数值进行测试。我只是指出 cwolves 的原始声明“JS 解释器要求 case 语句是静态值”是不正确的。 cwolves 已经修改了这个声明，所以我的评论不再相关。
因为这不能回答问题。他没有要求以不同的方式来做到这一点，他要求使开关盒按他的意愿工作。 “以其他方式做”几乎从来都不是一个正确的答案，尽管我们几乎总是认为它是正确的。我们一直认为我们有更好的方法，但他不想那样做，所以这个答案完全是错误的。
@Jasmine - “你不能，所以用其他方式来做”是完全有效的，如果它是正确的。我的回答被否决了，因为它是错误的 :) 正如@danp 指出的那样，你可以切换到true 并且它有效。但它已经 3 岁多了，所以我真的不在乎。

【解决方案3】：

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

【讨论】：

【解决方案4】：

你想使用 if 语句：

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

【讨论】：

【解决方案5】：

你已经方式把它复杂化了。用 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();

【讨论】：

你必须去和我一起。 :)
我们同时写了我们的帖子。在我发布之前我没有看到你的。你现在似乎做得过火了……
哇，我并没有真正考虑过过于复杂的条件。
@Chaos：是的，这可能有点过头了。您还必须向setLayoutState 添加一个空检查：P。
@Eric - 一些程序员的编程圈数比我说的要多：“仅仅因为你可以编写没有大括号的 Javascript（并且 - 实际上要小心 - 分号）并不意味着你应该"，但是无论如何，我只是像您的示例一样重写了一些多个 if 语句，所以谢谢-工作正常，直到在条件之后执行多行。不过，三元解决方案对我来说太远了……

【解决方案6】：

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

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

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

【讨论】：

【解决方案7】：

如果可能的值是整数，您可以将大小写成一堆。否则，使用 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();

【讨论】：

【解决方案8】：

这行得通：

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){..} 并让所需的表达式评估为假而不是真..但个人更喜欢处理评估为真实性的条件。但是，它也确实有效，因此值得牢记以了解它在做什么。

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

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

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

【讨论】：

我认为你需要switch(true) { 和case liCount == 0: 对吗？否则这个比较是liCount == (liCount <=5 && liCount > 0)。
你知道，不是因为你可以你应该。这是需要用火杀死的东西。
这是语言的一部分——因此，了解它总比不了解要好。显然，它并不适合所有情况，但在纯粹的主观层面上，我认为这是一种有趣的方法，并且在这种情况下比一系列 ifs/elifs 更清晰/更不脆弱。要记住的重要一点是，编码是意图的表达，加上品味和实践。有更多的选择在代码中清晰地表达自己从来都不是一件坏事。
对我来说，这是一种非常有用且非常好的方式来组织我的逻辑，我需要根据 if 条件一遍又一遍地使用变量名，但这是一个 n+1 类型的场景因此，没有中断的 switch 语句 case 将移动到下面的下一行这一事实非常有用。
你甚至睁开眼睛看看如果 switch 表达式为 false 会是什么结果 switch(false) { }

【解决方案9】：

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

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

【讨论】：

如果我在 switch 语句中传递一些整数说10，它会起作用吗？在我的情况下不工作不知道是什么原因。
10 !== true，所以没有。是否有一些变量可能具有值10？如果x，那么case x === 10: 可以工作。
但它应该像其他语句一样工作，例如如果你使用if (10) {..} 流应该传入If 条件，不是吗？因为 10 或除 0 以外的任何整数都将被视为真值并允许进入条件。不知道他在这里的 switch 语句有什么问题。
@PardeepJain, switch 根本不像if 那样工作。 if 测试条件是否为truthy。 switch 测试switch 之后的表达式是否为=== (CaseClauseIsSelected step 4) 到case 之后的表达式的值。
哦，这样，谢谢。这对我来说是全新的。 @迈克

【解决方案10】：

请注意，我们没有将分数传递给开关，而是真实的。我们赋予开关的值用作比较的基础。

下面的例子展示了我们如何在 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;
}

【讨论】：

【解决方案11】：

虽然在 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
    }
}

【讨论】：

【解决方案12】：

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

【讨论】：

【解决方案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);

【讨论】：