web-dev-qa-db-fra.com

Javascript une ligne If ... else ... else if statement

Je sais que vous pouvez définir des variables avec une seule ligne si/else en faisant var variable = (condition) ? (true block) : (else block), mais je me demandais s’il existait un moyen d’y insérer une autre instruction if. Toutes les suggestions seraient appréciées, merci à tous!

javascriptconditional-operator
48
Sam Perlmutter

Bien sûr, vous pouvez créer des opérateurs ternaires imbriqués, mais ils sont difficiles à lire.

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

tl; dr

Oui, vous pouvez ... Si a alors a, sinon si b alors si c alors c (b), sinon b, sinon null

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

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

version plus longue

L'opérateur ternaire _?:_ utilisé comme inline si-else est associatif à droite . En bref, cela signifie que le _?_ le plus à droite est alimenté en premier et qu'il faut exactement un opérande le plus proche à gauche et deux , avec un _:_, à droite.

En pratique, considérons la déclaration suivante (identique à ci-dessus):

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

Le __ le plus à droite _?_ est alimenté en premier, alors trouvez-le et son entourage trois arguments et développez-le consécutivement vers la gauche pour atteindre un autre _?_.

_   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)
_

Voici comment les ordinateurs le lisent:

  1. Le terme a est lu.
    Node: a
  2. Nonterminal _?_ est lu.
    Node: a ?
  3. Le terme a est lu.
    Node: a ? a
  4. Nonterminal _:_ est lu.
    Node: a ? a :
  5. Le terme b est lu.
    Node: a ? a : b
  6. Nonterminal _?_ est lu, déclenchant la règle d’associativité droite. L'associativité décide:
    noeud: a ? a : (b ?
  7. Le terme c est lu.
    Node: a ? a : (b ? c
  8. Nonterminal _?_ est lu en réappliquant la règle d’associativité droite.
    Node: a ? a : (b ? (c ?
  9. Le terme c(b) est lu.
    Node: a ? a : (b ? (c ? c(b)
  10. Nonterminal _:_ est lu.
    Node: a ? a : (b ? (c ? c(b) :
  11. Le terme b est lu.
    Node: a ? a : (b ? (c ? c(b) : b
  12. Nonterminal _:_ est lu. L'opérateur ternaire _?:_ de l'étendue précédente est satisfait et l'étendue est fermée.
    Node: a ? a : (b ? (c ? c(b) : b) :
  13. Le terme null est lu.
    Node: a ? a : (b ? (c ? c(b) : b) : null
  14. Pas de jetons à lire. Fermer la parenthèse restante ouverte.

    Le résultat est: a ? a : (b ? (c ? c(b) : b) : null)

Meilleure lisibilité

Le vilain oneliner d'en haut pourrait (et devrait) être réécrit pour la lisibilité comme:
(Notez que l'indentation ne () ne définit pas implicitement les fermetures correctes comme des crochets ().]

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

par exemple

_return a + some_lengthy_variable_name > another_variable
        ? "yep"
        : "nop"
_

Plus de lecture

Mozilla: opérateur conditionnel JavaScript
Wiki: Associativity Operator

Bonus: opérateurs logiques

_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
_

tiliser des opérateurs logiques comme dans cet exemple est moche et faux, mais c'est là qu'ils brillent ...

"Coalescence nulle"

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

Évaluation de court-circuit

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

opérateurs logiques
Coalescence nulle
Évaluation de court-circuit

29
Qwerty

En mots simples:

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

Je sais que c'est un vieux fil, mais je pensais y mettre mes deux sous. Les opérateurs ternaires peuvent être imbriqués de la manière suivante:

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

Exemple:

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

Ceci est utilisé principalement pour assigner une variable, et utilise un conditionnement binomial, par exemple.

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

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

Il n'y a pas d'autre ElseIf, pour des raisons de développement, n'utilisez pas de chaînage, vous pouvez utiliser switch qui est beaucoup plus rapide si vous avez plusieurs conditionnements dans .js

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

Vous pouvez enchaîner autant de conditions que vous le souhaitez. Si tu fais:

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

Vous obtiendrez x="2true"

Donc, cela pourrait être exprimé par:

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