Instruction 'if' sur une seule ligne JavaScript - meilleure syntaxe, cette alternative?

201

Il a été clairement dit, bien que l'opinion n'en soit pas moins, que le fait de renoncer aux accolades sur une seule ifdéclaration de ligne n'est pas idéal pour la maintenabilité et la lisibilité.

Mais qu'en est-il?

if (lemons) { document.write("foo gave me a bar"); }

Il est encore plus compressé et s'il est étendu, les accolades ne seront pas oubliées. Y a-t-il des problèmes flagrants et sinon, quelles sont les considérations? J'ai l'impression que c'est toujours très lisible, au moins autant qu'un opérateur ternaire de toute façon. Il me semble que les opérateurs ternaires ne sont pas autant suggérés en raison de la lisibilité, même si j'ai l'impression que cette conclusion n'est pas aussi unanime.

Le jumeau maléfique en moi veut suggérer cela, bien que la syntaxe ne soit évidemment pas faite pour ça, et c'est probablement juste une mauvaise idée.

(syntax) ? document.write("My evil twin emerges"): "";
David Hobs
la source
2
Ce serait bien si JavaScript supportait les conditions de fin de phrase:document.write("My evil twin emerges") if lemons
Beau Smith
7
Je pense que vous pensez peut-être à la courte déclaration if, else. ( variable = (condition) ? true-value : false-value;.) Bonne chance.
Progo

Réponses:

328

J'ai vu le comportement de court-circuit de l' &&opérateur utilisé pour atteindre cet objectif, bien que les personnes qui ne sont pas habituées à cela puissent avoir du mal à lire ou même à appeler cela un anti-modèle:

lemons && document.write("foo gave me a bar");  

Personnellement, j'utilise souvent une seule ligne ifsans crochets, comme ceci:

if (lemons) document.write("foo gave me a bar");

Si j'ai besoin d'ajouter plus de déclarations, je mettrai les déclarations sur la ligne suivante et ajouter des crochets. Étant donné que mon IDE fait une indentation automatique, les objections de maintenabilité à cette pratique sont sans objet.

Peter Olson
la source
11
J'aime ce dernier. Merci pour la contribution et une alternative créative de plus sur le premier!
David Hobs
vous devez savoir ce que vous attendez, car une chaîne vide et 0 sont des valeurs fausses, cela échouera lors de l'exécution de la deuxième instruction
Orlando
1
Bien sûr, vous pouvez tout aussi bien y mettre une déclaration booléenne plus explicite
acjay
7
@PeterOlson pourquoi les objections de maintenabilité sont-elles sans objet? Que faire s'il arrive qu'un autre développeur n'utilise pas votre IDE avec sa configuration.
agconti
2
Merci d'avoir eu le courage de vous prononcer en faveur d'une seule ligne si des déclarations sans crochets. Un jour, nos enfants vous remercieront.
Marc M.
136

Je l'utilise comme ceci:

(lemons) ? alert("please give me a lemonade") : alert("then give me a beer");
asael2
la source
36
alert(lemons?"please give me a lemonade":"then give me a beer")
MrVaykadji
44

Vous pouvez utiliser ce format, qui est couramment utilisé en PHP:

(lemon) ? document.write("foo gave me a bar") : document.write("if condition is FALSE");
Macro
la source
12
Vous n'avez pas besoin de crochets sur le lemon.
leymannx
6
Il peut être préférable d'inclure () autour d'une instruction conditionnelle - supprime toute confusion quant à l'ordre des opérations, etc. pour les autres développeurs. Je me trompe généralement en le spécifiant, sauf lorsqu'il n'y a aucun moyen pour une personne décemment qualifiée de se perdre.
djvs
1
document.write(lemon ? "foo gave me a bar" : "if condition is FALSE");:)
Joseph Goh
J'aime les crochets car pour moi ils impliquent une coercition booléenne.
Daniel Sokolowski
18

Cette ligne est beaucoup plus propre.

if(dog) alert('bark bark');

Je préfère ça. j'espère que ça aide quelqu'un

shakee93
la source
16

peut l'utiliser,

lemons ? alert("please give me a lemonade") : alert("then give me a beer");

explication: s'il lemonsexiste, donnez-moi unalert("please give me a lemonade") else alert("then give me a beer")

Mohideen bin Mohammed
la source
Excellente solution.
Davidson Lima
1
lemons? alert("please give me a fancy beer with a lemon wedge in it"): alert(please give me a beer")FTFY
stib
15

// Un autre exemple simple

 var a = 11;
 a == 10 ? alert("true") : alert("false");
user3413838
la source
15
pourquoi pas simplement .. var a = 11; alert(a === 10);?
ManuKaracho
@ManuKaracho Je vois beaucoup ce problème lorsque je travaille avec des instructions ternaires. Je comprends que OP a peut-être juste essayé d'en écrire un simple mais il est répandu dans le code que je lis au travail.
adam-beck
alert(a === 10 ? "true" : "false")
Josh Wood
@JoshWood, l'alerte imprimera également des booléens, vous pouvez donc faire alert(a===10)comme Manu l'a dit.
Keith
12

Comme beaucoup de gens l'ont dit, si vous cherchez une vraie ligne si alors:

    if (Boolean_expression) do.something();

est préféré. Cependant, si vous cherchez à faire un if / else, le ternaire est votre ami (et aussi super cool):

    (Boolean_expression) ? do.somethingForTrue() : do.somethingForFalse();

AUSSI:

    var something = (Boolean_expression) ? trueValueHardware : falseATRON;

Cependant, j'ai vu un exemple très cool. Remerciements à @ Peter-Oslson pour &&

    (Boolean_expression) && do.something();

Enfin, ce n'est pas une instruction if, mais exécuter des choses en boucle avec une carte / réduire ou Promise.resolve () est aussi amusant. Cris à @brunettdan

Kemacal
la source
7

Comme cela a déjà été dit, vous pouvez utiliser:

&& style

lemons && document.write("foo gave me a bar");  

ou

style sans support

if (lemons) document.write("foo gave me a bar");

retour de court-circuit

Si, cependant, vous souhaitez utiliser l' ifinstruction d' une ligne pour court-circuiter une fonction, vous devez utiliser la version sans support comme suit:

if (lemons) return "foo gave me a bar";

comme

lemons && return "foo gave me a bar"; // does not work!

vous donnera un SyntaxError: Unexpected keyword 'return'

Marc
la source
Dans les courts-circuits sur une seule ligne, nous pouvons omettre le «retour» et cela devrait fonctionner comme prévu. `` `citrons &&" foo m'a donné un bar "; // travaux! ``
siwalikm
@siwalikm pourriez-vous expliquer? C'est pour le cas où vous ne voulez pas revenir lemons(si c'est falsey) - vous voulez seulement retourner "foo m'a donné la barre" quand lemonsc'est vrai.
Marc
si (citrons) reviennent "foo m'a donné un bar"; c'est faux. Il vous donnera "Uncaught SyntaxError: déclaration de retour illégale"
Fenec
@Fenec partageriez-vous le navigateur et la version qui vous causent cette erreur? Cela a fonctionné pour moi il y a presque 2 ans et continue de fonctionner pour moi.
Marc
4

J'ai vu de nombreuses réponses avec de nombreux votes préconisant l'utilisation de l'opérateur ternaire. Le ternaire est parfait si a) vous avez une option alternative et b) vous retournez une valeur assez simple à partir d'une condition simple. Mais...

La question d'origine n'avait pas d'alternative, et l'opérateur ternaire avec une seule branche (réelle) vous oblige à renvoyer une réponse confectionnée.

lemons ? "foo gave me a bar" : "who knows what you'll get back"

Je pense que la variation la plus courante est lemons ? 'foo...' : '', et, comme vous le saurez en lisant la myriade d'articles pour toutes les langues sur vrai, faux, véridique, falsey, nul, nul, vide, vide (avec ou sans?), Vous entrez un champ de mines (bien qu'un champ de mines bien documenté.)

Dès qu'une partie du ternaire se complique, vous êtes mieux avec une forme plus explicite de conditionnel.

Un long chemin pour dire que je vote pour if (lemons) "foo".

Anita Graham
la source
2

Cela peut également être fait en utilisant une seule ligne avec des whileboucles et ifcomme ceci:

if (blah)
    doThis();

Il fonctionne également avec des whileboucles.

Noitidart
la source
7
Cela échouera au peluchage et n'est pas recommandé
danwellman
9
Le PO a également demandé un vol simple.
aaron-coding
2

Exemple dans les fonctions fléchées:

let somethingTrue = true
[1,2,3,4,5].map(i=>somethingTrue && i*2)

En promesses:

Promise.resolve()
  .then(_=>checkTrueFalse && asyncFunc())
  .then(_=>{ .. })

Autrement:

if(somethingTrue) thenDo()

Si c'est juste un conditionnel simple, je préfère utiliser if (valeur) autant que possible parce que le mot if au début de la déclaration en dit plus sur ce qui se passe que les paranthèses et les points d'interrogation.

brunettdan
la source
1
**Old Method:**
if(x){
   add(x);
}
New Method:
x && add(x);

Même attribuer le fonctionnement, nous pouvons également le faire avec des supports ronds

exp.includes('regexp_replace') && (exp = exp.replace(/,/g, '@&'));
Sajith Mantharath
la source
"Même assigner le fonctionnement nous pouvons aussi le faire avec des crochets". C'est très intéressant, je ne savais pas qu'il était possible de faire des opérations d'affectation à l'intérieur de ces opérations sur une seule ligne.
sagits