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