Como escrever uma instrução IF embutida em JavaScript?


286

Como posso usar uma ifinstrução embutida em JavaScript? Também existe uma elsedeclaração em linha ?

Algo assim:

var a = 2;
var b = 3;

if(a < b) {
    // do something
}

12
Onde está o jQuery aqui? E eu realmente não entendo a pergunta de qualquer maneira.
Marc

parte jquery pode ser assim $ (document) .ready (function () {var a = 2; var b = 3; if (a <b) {// faça alguma coisa}});
takeItEasy

também é uma pergunta de knockoutjs
Martin Capodici 17/07/2014

1
Também é um angular 1 e 2 e todos os outros frameworks js (incluindo o vanilla.js) por aí
Ben Taliadoros 19/16 / 16-

Respostas:


641

Você não precisa necessariamente do jQuery. Somente o JavaScript fará isso.

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

A cvariável será minorse o valor for truee majorse o valor for false.


Isso é conhecido como operador condicional (ternário).

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


59
Ele ilustra como usar um IF embutido, que responde EXATAMENTE à pergunta.
MattW

26
Apenas para observar, todos os parênteses neste caso são opcionais. Geralmente, é o estilo de preferência / codificação pessoal que determina quando eles são usados.
Will Klein

3
@ Khan, esta é uma pergunta sobre JavaScript. Expressões podem avaliar em outros idiomas de maneira diferente.
Will Klein

1
@MattW Este não mostra como usar um inline IF, ele mostra como usar um IF ELSE
Finlay Percy

1
@getName não realmente, mas você pode usar uma linha de comando if se você queriaif (a < b) c = 'major';
MattW

44

Para escrever a ifinstrução em linha, o código dentro dela deve ser apenas uma instrução:

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

43

Existe um operador ternário, assim:

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

4
Na verdade, ele não precisa ser atribuído a nada. Os elementos do lado direito podem ser simplesmente chamadas de função.
usar o seguinte código

7
Eles nem precisam ser chamadas de função ... 0 < 1 : 5 : 120;é uma afirmação perfeitamente válida. Um pouco inútil, a menos que você seja pago por linha, no entanto.
Ry-

Ok, @ jfriend00, minitech, Obrigado pelas dicas.
Mahmoud Gamal

@ jfriend00 Eu recomendaria contra isso em quase todos os casos. Se você não estiver usando o valor da expressão, o que você realmente deseja são efeitos colaterais; e efeitos colaterais é para que declarações são ótimas. O uso da ifdeclaração simples e chata antiga nesse caso provavelmente tornará seu código muito mais fácil de ler e entender, e menos provável de interromper com alterações posteriores.
Emil Lundberg

35

Você também pode aproximar um if / else usando apenas Operadores Lógicos.

(a && b) || c

O acima é aproximadamente o mesmo que dizer:

a ? b : c

E, claro, aproximadamente o mesmo que:

if ( a ) { b } else { c }

Digo aproximadamente porque há uma diferença nessa abordagem, pois você precisa saber que o valor de bserá avaliado como verdadeiro, caso contrário, você sempre obterá c. Basicamente, você deve perceber que a parte que apareceria if () { here }agora faz parte da condição que você coloca if ( here ) { }.

O exposto acima é possível devido ao comportamento do JavaScripts de transmitir / retornar um dos valores originais que formaram a expressão lógica, que depende do tipo de operador. Certas outras linguagens, como PHP, continuam o resultado real da operação, ou seja, verdadeiro ou falso, o que significa que o resultado é sempre verdadeiro ou falso; por exemplo:

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 {}

Um benefício principal, comparado com uma declaração if normal, é que os dois primeiros métodos podem operar no lado direito de um argumento, ou seja, como parte de uma tarefa.

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

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

A única maneira de conseguir isso com uma instrução if padrão seria duplicar a atribuição:

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

Você pode perguntar por que usar apenas Operadores Lógicos, em vez do Operador Ternário , para casos simples que provavelmente não usaria, a menos que quisesse ter certeza ae bfosse verdade. Você também pode obter condições complexas mais simplificadas com os operadores lógicos, que podem ficar bastante confusos usando operações ternárias aninhadas ... novamente, se você deseja que seu código seja facilmente legível, eles também não são tão intuitivos.


32

Em inglês simples, a sintaxe explicava:

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

Pode ser escrito como:

condition ? do_something_if_condition_is_met : do_something_else_if_condition_is_not_met;

5
É possível fazer isso sem a declaração "else"? iecondition ? true
Advogado do Diabo

@ScottBeeson Claro. Também depende do seu uso da condição. true falsee ""tudo deve ficar bem em ignorar a parte else.
Onimusha

Então 2 == 2 ? doSomething()seria o mesmo que if (2 == 2) doSomething()?
Advogado do diabo

1
Sim, mas a parte else não pode ser completamente omitida. No contrato : falseou : ""deve estar lá, pois o javascript está esperando isso.
Onimusha

5
Oh. Portanto, não é possível fazer isso sem a instrução else.
Advogado do diabo

21
<div id="ABLAHALAHOO">8008</div>
<div id="WABOOLAWADO">1110</div>

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

48
Eu nem sei o que acabei de ler, mas estou rindo bastante.
Jazz

20

Se você deseja apenas um IF embutido (sem o ELSE), pode usar o operador AND lógico:

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

Se você precisar de um ELSE também, use a operação ternária que as outras pessoas sugeriram.


17

Você poderia fazer assim em JavaScript:

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

8

Para sua informação, você pode compor operadores condicionais

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

Se sua lógica for suficientemente complexa, você poderá considerar o uso de um IIFE

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

Obviamente, se você planeja usar essa lógica mais de uma vez, deve encapsulá-la em uma função para manter as coisas boas e SECAS.


6

Geralmente, preciso executar mais código por condição, usando: ( , , )vários elementos de código podem executar:

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

4

Para adicionar isso, você também pode usar inline se condição com && e || operadores. Como isso

var a = 2;
var b = 0;

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

0

A questão não é essencialmente: posso escrever o seguinte?

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

a resposta é sim, o acima será traduzido.

no entanto, tenha cuidado ao fazer o seguinte

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

não se esqueça de incluir código ambíguo entre chaves, pois o exemplo acima gera uma exceção (e permutações semelhantes produzirão um comportamento indesejado).


0

inline se:

(('hypothesis') ? 'truthy conclusion' : 'falsey conclusion')

conclusão verdadeira: declarações executadas quando a hipótese é verdadeira

conclusão de falsey: declarações executadas quando a hipótese é falsa

seu exemplo:

var c = ((a < b) ? 'a<b statements' : '!(a<b) statements');
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.