web-dev-qa-db-ja.com

javascript：スイッチケースで条件を使用する

その愚かな質問でごめんなさい。 javascript switch-case言語要素でケースの条件を使用するにはどうすればよいですか？以下の例のように、変数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;                  
}

アドバイスをありがとう！

javascriptconditional-statementsselect-case
64
haemse

これは動作します：

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){...}であり、ケース式がブール値に評価されるためです。

スイッチに与える値は、比較の基準として使用されるため、機能します。その結果、ケース式とブール値の評価により、実行されるケースが決まります。また、これを逆にして、switch(false){..}を渡し、目的の式がtrueではなくfalseに評価されるようにすることもできます。ただし、機能するので、何をしているのかを理解するために心に留めておく価値があります。

例：liCountが3の場合、最初の比較はtrue === (liCount == 0)です。つまり、最初のケースはfalseです。その後、スイッチは次のケースtrue === (liCount<=5 && liCount>0)に進みます。この式はtrueに評価されます。つまり、このケースは実行され、breakで終了します。ここではわかりやすくするためにかっこを追加しましたが、表現の複雑さに応じてオプションです。

それは非常にシンプルで、（あなたがやろうとしていることに合っている場合）一連の長い条件を処理するきちんとした方法です（おそらく、ìf() ... else if() ... else if () ...の長い一連は、視覚的なノイズや脆弱性をもたらします）。

有効なコードであるにもかかわらず、非標準のパターンであるため、注意して使用してください。

217
dmp

あなたはwayそれを過度に複雑にしました。代わりに次のような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();
19
Eric

以下の dmpの答え を参照してください。できればこの答えを削除しますが、受け入れられたのでこれが次善策です:)

できません。 JSインタープリターでは、switchステートメントと比較する必要があります（たとえば、「case when」ステートメントはありません）。本当にこれを行いたい場合は、if(){ .. } else if(){ .. }ブロックを作成するだけです。

7
Mark Kahn

Ifステートメントを使用したい場合：

if (liCount === 0) {
    setLayoutState('start');
} else if (liCount <= 5) {
    setLayoutState('upload1Row');
} else if (liCount <= 10) {
    setLayoutState('upload2Rows');
}
$('#UploadList').data('jsp').reinitialise();
7
ChaosPandion
switch (true) {
  case condition0:
    ...
    break;
  case condition1:
    ...
    break;
}

条件が適切なboolean値を返す限りJavaScriptで機能しますが、else ifステートメントに比べて多くの利点はありません。

5
Mike Samuel

それがあなたがしたいことであれば、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
Neal

これは、if句を使用する必要がある場合です。

3
ThiefMaster

あなたのコードは、あなたが期待していることをしていないので機能しません。 Switchブロックは値を受け取り、各ケースを指定された値と比較して、同等性を探します。比較値は整数ですが、ほとんどのケース式はブール値に解決されます。

したがって、たとえば、liCount = 2と言います。 2 != 0であるため、最初のケースは一致しません。 2番目のケース(liCount<=5 && liCount>0)はtrueと評価されますが、2 != trueと評価されるため、このケースも一致しません。

このため、他の多くの人が言っているように、これを行うには一連のif...then...else ifブロックを使用する必要があります。

2
Ender

可能な値が整数の場合、ケースをまとめることができます。それ以外の場合は、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();
2
kennebec