[解決済み] javascript: switch caseで条件を使用する
質問
くだらない質問で申し訳ありません。
javascriptのswitch-case言語要素で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;
}
アドバイスありがとうございました。
どのように解決するのですか?
これは動作します。
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式がbooleanに評価されることです。
これは、switchに与えた値が比較の基準として使用されるためです。その結果、case 式もブール値として評価され、どのケースが実行されるかが決定されます。これを逆手にとって
switch(false){..}
を渡して、目的の式を true ではなく false に評価させることもできますが、個人的には真偽を評価する条件を扱う方が好きです。しかし、これも動作するので、何をしているのか理解するために覚えておく価値があります。
例: liCountが3である場合、最初の比較は
true === (liCount == 0)
であり、最初のケースは偽であることを意味します。そして、スイッチは次のケースに移ります。
true === (liCount<=5 && liCount>0)
. この式は真と評価され、このケースが実行されることを意味します。
break
. ここではわかりやすくするために括弧をつけましたが、式の複雑さによっては括弧は省略可能です。
これはとてもシンプルで、長い一連の条件を処理するためのきちんとした方法です (あなたがやろうとしていることに合っていれば)。
ìf() ... else if() ... else if () ...
の長いシリーズが多くの視覚的なノイズや壊れやすさを導入するかもしれません。
有効なコードであるにもかかわらず、非標準的なパターンであるため、注意して使用してください。
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] Rubyのswitch文の書き方
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
-
[解決済み] <Enter>でjQuery UIダイアログを送信する
-
[解決済み] jQueryを使用して、すべてのクリックイベントハンドラを削除するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ジェスト あるクラスの特定のメソッドをモックする方法
-
[解決済み] 上級者向けJavaScript。この関数はなぜ括弧でくくられるのですか?重複
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] TypeScriptのdeclare classとinterfaceの違いとは?
-
[解決済み] 文字列が空白であるかどうかをチェックする
-
[解決済み] React js 親コンポーネントから子コンポーネントの状態を変更する
-
[解決済み] jQueryの$という記号の意味は何ですか?
-
[解決済み] react-routerのハッシュフラグメントからクエリパラメータを取得する
-
[解決済み] jqueryはjavascriptのライブラリなのかフレームワークなのか?[クローズド]
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?