web-dev-qa-db-ja.com

Javascript 1行のIf ... else ... else ifステートメント

var variable = (condition) ? (true block) : (else block)を実行することで、if/elseステートメントを1行で変数を設定できることはわかっていますが、else ifステートメントをそこに配置する方法があるかどうか疑問に思っていました。どんな提案でも感謝します、みんなありがとう！

javascriptconditional-operator
48
Sam Perlmutter

もちろん、ネストされた三項演算子を実行できますが、読みにくいです。

var variable = (condition) ? (true block) : ((condition2) ? (true block2) : (else block2))
118
Gremash

tl; dr

はい、次のことができます...If a then a、else b b if if c then c（b）、else b、else null

a ? a : (b ? (c ? c(b) : b) : null)

a
  ? a
  : b
      ? c
        ? c(b)
        : b
      : null

より長いバージョン

インラインif-elseとして使用される三項演算子?:は右結合です。つまり、これは右端の?が最初に供給され、正確にone左側の最も近いオペランドとtwoをとることを意味します、右側に:が付きます。

実際には、次のステートメントを考慮してください（上記と同じ）：

a ? a : b ? c ? c(b) : b : null

一番右の?が最初にフィードされるため、それとその周囲のつの引数を見つけて、左に連続して別の?に展開します。

   a ? a : b ? c ? c(b) : b : null
                 ^                  <---- RTL
1.            |1-?-2----:-3|
             ^ <-
2.        |1-?|--2---------|:-3---|
     ^ <-
3.|1-?-2-:|--3--------------------|

result: a ? a : (b ? (c ? c(b) : b) : null)

これはコンピューターがそれを読む方法です：

  1. 用語aが読み取られます。
    ノード：a
  2. 非端末?が読み取られます。
    ノード：a ?
  3. 用語aが読み取られます。
    ノード：a ? a
  4. 非端末:が読み取られます。
    ノード：a ? a :
  5. 用語bが読み取られます。
    ノード：a ? a : b
  6. 非終端?が読み取られ、右結合規則がトリガーされます。連想性の決定：
    node：a ? a : (b ?
  7. 用語cが読み取られます。
    ノード：a ? a : (b ? c
  8. 非終端?が読み取られ、右結合規則が再適用されます。
    ノード：a ? a : (b ? (c ?
  9. 用語c(b)が読み取られます。
    ノード：a ? a : (b ? (c ? c(b)
  10. 非端末:が読み取られます。
    ノード：a ? a : (b ? (c ? c(b) :
  11. 用語bが読み取られます。
    ノード：a ? a : (b ? (c ? c(b) : b
  12. 非端末:が読み取られます。前のスコープの三項演算子?:が満たされ、スコープが閉じられます。
    ノード：a ? a : (b ? (c ? c(b) : b) :
  13. 用語nullが読み取られます。
    ノード：a ? a : (b ? (c ? c(b) : b) : null
  14. 読み取るトークンはありません。残りの開いた括弧を閉じます。

    結果：a ? a : (b ? (c ? c(b) : b) : null)

読みやすさ

上記のいonelinerは、読みやすいように（およびshould）に書き換えることができます。
（インデントはnotであることに注意してください。ブラケット（）が行うように正しいクロージャを暗黙的に定義します。）

a
  ? a
  : b
      ? c
        ? c(b)
        : b
      : null

例えば

return a + some_lengthy_variable_name > another_variable
        ? "yep"
        : "nop"

もっと読む

Mozilla：JavaScript条件演算子
Wiki：Operator Associativity

ボーナス：論理演算子

var a = 0 // 1
var b = 20
var c = null // x=> {console.log('b is', x); return true} // return true here!

a
  && a
  || b
      && c
        && c(b) // if this returns false, || b is processed
        || b
      || null

この例のように論理演算子を使用するのはくて間違っていますが、ここが彼らの輝かしいところです...

「ヌル合体」

function(mayBeNull) {
  var cantBeNull = mayBeNull || 42             // "default" value
  var alsoCantBe = mayBeNull ? mayBeNull : 42  // ugly...
  ..
}

短絡評価

false && (anything) // is short-circuit evaluated to false.
true || (anything)  // is short-circuit evaluated to true.

論理演算子
ヌル合体
短絡評価

29
Qwerty

簡単な言葉で：

var x = (day == "yes") ? "Good Day!" : (day == "no") ? "Good Night!" : "";
6
Masood Aslami

私はこれが古いスレッドであることを知っていますが、2セントを入れると思いました。三項演算子は次の方法でネストできます。

var variable = conditionA ? valueA : (conditionB ? valueB: (conditionC ? valueC : valueD));

例：

var answer = value === 'foo' ? 1 :
    (value === 'bar' ? 2 : 
        (value === 'foobar' ? 3 : 0));
4
MyLilMulePepe

これは主に変数の割り当てに使用され、二項条件付けなどを使用します。

var time = Date().getHours(); // or something

var clockTime = time > 12 ? 'PM' : 'AM' ;

ElseIfはありません。開発のためにチェーンを使用しないで、switchを使用できます。

3
Piotr Dajlido
  a === "a" ? do something
: a === "b" ? do something
: do something
2
BBB.CCC

必要なだけ条件をチェーンできます。もしあなたがそうするなら：

var x = (false)?("1true"):((true)?"2true":"2false");

x="2true"を取得します

したがって、次のように表現できます。

var variable = (condition) ? (true block) : ((condition)?(true block):(false block))
2
Eddie Lozada