javascript：在switch case中使用条件

Posted 2023-03-14

【中文标题】javascript：在switch case中使用条件

【英文标题】：JavaScript: using a condition in 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;

【参考方案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);