[解決済み] 条件文を短くする方法
質問
以下のような非常に長い条件文があります。
if(test.type == 'itema' || test.type == 'itemb' || test.type == 'itemc' || test.type == 'itemd'){
// do something.
}
この式/ステートメントをもっと簡潔な形にリファクタリングできないかと考えていました。
どうすれば実現できるのか、何かアイデアはありますか?
どのように解決するのですか?
値を配列に入れ、その中に項目があるかどうかをチェックします。
if ([1, 2, 3, 4].includes(test.type)) {
// Do something
}
サポートするブラウザに
Array#includes
メソッドを使用することができます。
このポリフィル
.
の簡単な説明
~
チルダのショートカットです。
<ブロッククオート
更新しました。
現在では
includes
メソッドを使用する意味がありません。
~
ハックすることができます。ただ、このハックがどのように機能するのかに興味がある人や、他の人のコードで遭遇したことがある人のために、ここに残しておきます。
の結果をチェックする代わりに
indexOf
は
>= 0
という、ちょっといいショートカットがあります。
if ( ~[1, 2, 3, 4].indexOf(test.type) ) {
// Do something
}
以下はそのフィドルです。 http://jsfiddle.net/HYJvK/
どのように動作するのでしょうか?配列の中に項目があった場合
indexOf
はそのインデックスを返します。もしその項目が見つからなければ
-1
. あまり詳しい説明は省きますが
~
は
ビット単位のNOT演算子
を返します。
0
に対してのみ
-1
.
を使うのが好きです。
~
のショートカットは、戻り値で比較を行うよりも簡潔であるためです。JavaScriptにも
in_array
関数はブール値を直接返す (PHP のような) 関数ですが、それは単なる希望的観測に過ぎません (
更新しました。
が、今はそうなっています。その名も
includes
. 上記参照)。なお、jQueryの
inArray
は、PHP のメソッドシグネチャを共有しながらも、実際にはネイティブの
indexOf
機能 (これは、インデックスが本当に必要なものである場合、さまざまなケースで役に立ちます) があります。
重要なお知らせです。
チルダを使ったショートカットには賛否両論があるようです。
猛烈に
は、コードが十分に明確ではないので、何としても避けるべきだと考えています(この回答に対するコメントを参照)。もしあなたが彼らと同じ考えなら
.indexOf(...) >= 0
の解決策になります。
少し長い説明です。
JavaScript の整数は符号付きです。つまり、一番左のビットが符号ビットとして予約されており、数値が正か負かを示すフラグとして
1
は負である。
以下は、32ビット2進数形式での正の数の例です。
1 : 00000000000000000000000000000001
2 : 00000000000000000000000000000010
3 : 00000000000000000000000000000011
15: 00000000000000000000000000001111
今度は、同じ数字をマイナスにしてみました。
-1 : 11111111111111111111111111111111
-2 : 11111111111111111111111111111110
-3 : 11111111111111111111111111111101
-15: 11111111111111111111111111110001
なぜマイナスの数字にこのような奇妙な組み合わせがあるのでしょうか?単純なことだ。負の数とは、単純に正の数+1の逆数であり、正の数に負の数を足せば必ず
0
.
これを理解するために、簡単な二進法の算術をしてみましょう。
ここでは、次のように追加します。
-1
から
+1
:
00000000000000000000000000000001 +1
+ 11111111111111111111111111111111 -1
-------------------------------------------
= 00000000000000000000000000000000 0
そして、次のように追加します。
-15
に
+15
:
00000000000000000000000000001111 +15
+ 11111111111111111111111111110001 -15
--------------------------------------------
= 00000000000000000000000000000000 0
その結果はどのようにして得られるのでしょうか。学校で習ったとおりに、右端の列から始めて、すべての行を足し算するのです。一番右の列から始めて、すべての行を足し算します。その合計が、一番大きい一桁の数(10進数で言うと
9
しかし、2進数では
1
) 余りを次の列に繰り越す。
さて、お気づきのように、負の数と正の数を足すとき、一番右の列のうち、すべて
0
は、常に2つの
1
があり、それを足すと
2
. という2つのバイナリ表現があります。
10
を運ぶ。
1
を次の列へ移動し
0
を、最初の列の結果に適用します。左側の他の列はすべて1行だけで、その行には
1
というように
1
前列から繰り越されるのは、再び
2
となり、それが引き継がれる...。このプロセスは、一番左の列に到達するまで繰り返され、そこで
1
は行き場を失い、オーバーフローしてしまい、残ったのは
0
が横並びになっている。
というシステムです。 2の補数 . 詳しくはこちらをご覧ください。
さて、2の補数についての特訓が終わったところで、次のことに気がつくでしょう。
-1
が2進数表現である唯一の数です。
1
を全面的に採用した。
を使用することで
~
ビットごとの NOT 演算子で、与えられた数値のすべてのビットが反転されます。唯一の方法は
0
すべてのビットを反転させることから戻るには、最初に
1
を全体に配置する。
というわけで、ここまでが長文でした。
~n
を返すだけです。
0
もし
n
は
-1
.
関連
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] forEachループでasync/awaitを使用する
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] React JSX内のループ
-
[解決済み] JavaScriptの正規表現でマッチしたグループにアクセスするにはどうすればよいですか?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
Vueの要素ツリーコントロールに破線を追加する説明
-
Vueはランニングライト形式のテキストを水平方向にスクロールする機能を実装している
-
vue for 登録ページ効果 vue for sms 認証コードログイン
-
vue ディレクティブ v-html と v-text
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
[解決済み】Uncaught SyntaxError: JSONの位置0に予期しないトークンuがあります。
-
[解決済み] 配列の結合時に未定義のプロパティ 'push' を読み込むことができない
-
Uncaught TypeError: null のプロパティ 'offsetHeight' を読み取れませんでした。
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] Javascript - 配列の項目を値で削除する [duplicate]