web-dev-qa-db-ja.com

JavaScriptでインラインIFステートメントを記述する方法

JavaScriptでインラインifステートメントを使用する方法インラインのelseステートメントもありますか？

このようなもの：

var a = 2;
var b = 3;

if(a < b) {
    // do something
}
javascriptif-statementternary-operatorconditional-operator
243
takeItEasy

あなたは必ずしもjQueryを必要としません。 JavaScriptだけでこれができます。

var a = 2;
var b = 3;    
var c = ((a < b) ? 'minor' : 'major');

値がcの場合はminor変数はtrueとなり、値がmajorの場合はfalseとなります。

これは条件付き（三項）演算子として知られています。

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator

549
MattW

このような三項演算子があります。

var c = (a < b) ? "a is less than b"  : "a is not less than b";
40
Mahmoud Gamal

ifステートメントをインラインで書くためには、その中のコードは1つのステートメントだけであるべきです：

if ( a < b ) // code to be executed without curly braces;
38
undefined

論理演算子のみを使用してif/elseを近似することもできます。

(a && b) || c

上記はおおよそ同じことです：

a ? b : c

そしてもちろん、おおよそ以下と同じです。

if ( a ) { b } else { c }

大まかに言って、このアプローチには1つの違いがあるため、bの値がtrueと評価されることを知っておく必要があり、そうでなければ常にcが得られます。基本的には、if () { here }と表示される部分が、if ( here ) { }を配置する条件の一部になっていることを認識する必要があります。

上記のことは、論理式を形成した元の値の1つを渡す/返すJavaScriptの動作により可能になります。これは、演算子のタイプによって異なります。 PHPなど、他の特定の言語では、操作の実際の結果、つまりtrueまたはfalseをそのまま使用します。つまり、結果は常にtrueまたはfalseになります。例えば：

14 && 0          /// results as 0,  not false
14 || 0          /// results as 14, not true
1 && 2 && 3 && 4 /// results as 4,  not true
true && ''       /// results as ''
{} || '0'        /// results as {}

通常のifステートメントと比較した場合の1つの主な利点は、最初の2つのメソッドが引数の右側、つまり代入の一部として動作できることです。

d = (a && b) || c;
d = a ? b : c;

if `a == true` then `d = b` else `d = c`

標準のif文でこれを達成する唯一の方法は、割り当てを複製することです。

if ( a ) { d = b } else { d = c }

aとbが両方とも真実であることを確認したいのでない限り、単純な場合にはおそらくそうではない、 三項演算子 の代わりに単に 論理演算子 を使用する理由を尋ねるかもしれません。論理演算子を使用してより合理化された複雑な条件を実現することもできます。これは入れ子になった3項演算を使用すると非常に面倒になることがあります。

30
Pebbl

平易な英語で、構文は説明しました：

if(condition){
    do_something_if_condition_is_met;
}
else{
    do_something_else_if_condition_is_not_met;
}

次のように書くことができます。

condition ? do_something_if_condition_is_met : do_something_else_if_condition_is_not_met;
29
Onimusha
<div id="ABLAHALAHOO">8008</div>
<div id="WABOOLAWADO">1110</div>

parseInt( $( '#ABLAHALAHOO' ).text()) > parseInt( $( '#WABOOLAWADO ).text()) ? alert( 'Eat potato' ) : alert( 'You starve' );
18
HyderA

あなたはJavaScriptでこのようにすることができます：

a < b ? passed() : failed();
15
Ivar

インラインIFが（ELSEなしで）必要な場合は、論理AND演算子を使用できます。

(a < b) && /*your code*/;

ELSEも必要な場合は、他の人が提案した3項演算を使用してください。

12
Nahn

以下を使用して、条件ごとにより多くのコードを実行する必要があります。( , , )複数のコード要素で実行できます。

var a = 2;
var b = 3;
var c = 0;

( a < b ?  ( alert('hi'), a=3, b=2, c=a*b ) : ( alert('by'), a=4, b=10, c=a/b ) );
6
kurt

参考までに、 条件付き演算子を作成することができます

var a = (truthy) ? 1 : (falsy) ? 2 : 3;

あなたの論理が十分に複雑であるならば、あなたは _ iife _ を使うことを考えるかもしれません

var a = (function () {
  if (truthy) return 1;
  else if (falsy) return 2;
  return 3;
})();

もちろん、このロジックを複数回使用することを計画している場合は、NiceとDRYをうまく機能させるためにそれを関数にカプセル化する必要があります。

5
alan

これに追加するには、&&と||を使ってインラインif条件を使うこともできます。演算子。このような

var a = 2;
var b = 0;

var c = (a > b || b == 0)? "do something" : "do something else";
3
Anoop

問題は本質的ではない：私は以下を書くことができるか？

if (foo)
  console.log(bar)
else
  console.log(foo + bar)

答えは、そうです、上記は翻訳されます。

しかし、次のことには用心してください

if (foo)
  if (bar)
    console.log(foo)
  else 
    console.log(bar)
else 
  console.log(foobar)

上記の例では例外がスローされるため、あいまいなコードを中括弧で囲むようにしてください（同様の置換を行うと、望ましくない動作が発生します）。

0
Jay Edwards