Jak napisać wbudowaną instrukcję IF w JavaScript?


286

Jak mogę użyć ifinstrukcji wbudowanej w JavaScript? Czy jest też elseinstrukcja wbudowana ?

Coś takiego:

var a = 2;
var b = 3;

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

12
Gdzie jest jQuery? I tak naprawdę nie rozumiem pytania.
Marc

część jquery może wyglądać tak: $ (dokument) .ready (function () {var a = 2; var b = 3; if (a <b) {// zrób coś}});
takeItEasy

to także pytanie nokautowe
Martin Capodici

1
Jest to również kątowa 1 i 2 i każde inne środowisko js (w tym vanilla.js)
Ben Taliadoros

Odpowiedzi:


641

Niekoniecznie potrzebujesz jQuery. Sam JavaScript to zrobi.

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

cZmienna będzie minor, jeśli wartość jest true, a majorjeżeli wartość jest false.


Jest to znane jako operator warunkowy (trójskładnikowy).

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


59
Ilustruje to, jak korzystać z IF Inline, który dokładnie odpowiada na pytanie.
MattW

26
Uwaga: wszystkie pareny w tym przypadku są opcjonalne. Często jest to osobisty styl preferencji / styl kodowania, który decyduje o ich użyciu.
Will Klein,

3
@ Khany, to jest pytanie JavaScript. Wyrażenia mogą być oceniane w innych językach inaczej.
Czy Klein

1
@MattW To nie pokazuje, jak używać IF Inline, ale pokazuje, jak używać IF ELSE
Finlay Percy

1
@getName nie jest tak naprawdę, ale możesz użyć jednego wiersza, jeśli chcesz, jeśli chceszif (a < b) c = 'major';
MattW

44

Do pisania ifinstrukcji inline kod w niej powinien być tylko jedną instrukcją:

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

43

Istnieje operator trójskładnikowy, taki jak ten:

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

4
W rzeczywistości nie musi być przypisany do niczego. Elementy po prawej stronie mogą być po prostu wywołaniami funkcji.
jfriend00

7
Nie muszą nawet być wywołaniami funkcji ... 0 < 1 : 5 : 120;jest to całkowicie poprawna instrukcja. Trochę bezużyteczne, chyba że płacisz za linię.
Ry-

Ok, @ jfriend00, minitech, dzięki za wskazówki.
Mahmoud Gamal,

@ jfriend00 Jednak odradzałbym to w prawie wszystkich przypadkach. Jeśli nie używasz wartości wyrażenia, to tak naprawdę chcesz efektów ubocznych; a efekty uboczne są tym, do czego świetne są stwierdzenia . Użycie zwykłego, nudnego ifoświadczenia w takim przypadku prawdopodobnie znacznie ułatwi odczytanie i zrozumienie kodu i rzadziej spowoduje zerwanie z późniejszymi zmianami.
Emil Lundberg,

35

Możesz także przybliżyć wartość if / else, używając tylko operatorów logicznych.

(a && b) || c

Powyższe jest mniej więcej tym samym, co powiedzenie:

a ? b : c

I oczywiście mniej więcej tak samo jak:

if ( a ) { b } else { c }

Mówię z grubsza, ponieważ istnieje jedna różnica w tym podejściu, polegająca na tym, że musisz wiedzieć, że wartość bbędzie oceniana jako prawdziwa, w przeciwnym razie zawsze otrzymasz c. Zasadniczo musisz zdać sobie sprawę, że część, która się pojawi, if () { here }jest teraz częścią warunku, który stawiasz if ( here ) { }.

Jest to możliwe ze względu na zachowanie JavaScript w przekazywaniu / zwróceniu jednej z oryginalnych wartości, które utworzyły wyrażenie logiczne, które zależy od typu operatora. Niektóre inne języki, takie jak PHP, przekazują rzeczywisty wynik operacji, tj. Prawda lub fałsz, co oznacza, że ​​wynik jest zawsze prawdziwy lub fałszywy; na przykład:

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

Jedną z głównych korzyści, w porównaniu z normalną instrukcją if, jest to, że dwie pierwsze metody mogą działać po prawej stronie argumentu, tj. Jako część przypisania.

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

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

Jedynym sposobem na osiągnięcie tego za pomocą standardowego wyrażenia if byłoby zduplikowanie przypisania:

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

Możesz zapytać, dlaczego używaj tylko operatorów logicznych zamiast operatora trójskładnikowego , w prostych przypadkach prawdopodobnie byś tego nie zrobił, chyba że chcesz się upewnić ai boba są prawdziwe. Możesz także osiągnąć bardziej uproszczone złożone warunki za pomocą operatorów logicznych, które mogą stać się dość nieporządne przy użyciu zagnieżdżonych operacji trójkowych ... jeśli znowu chcesz, aby kod był czytelny, żadne z nich nie jest tak intuicyjne.


32

Prosto po angielsku wyjaśniono składnię:

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

Można zapisać jako:

condition ? do_something_if_condition_is_met : do_something_else_if_condition_is_not_met;

5
Czy można to zrobić bez instrukcji „else”? tj.condition ? true
Adwokat diabła,

@ScottBeeson Sure. To zależy również od tego, czy używasz warunku. true falsei ""wszystko powinno być w porządku, aby zignorować część else.
Onimusha

Więc 2 == 2 ? doSomething()byłoby tak samo jak if (2 == 2) doSomething()?
Adwokat diabła

1
Tak, ale drugiej części nie można całkowicie pominąć. Najem : falselub : ""powinien być tam, ponieważ javascript tego oczekuje.
Onimusha

5
O. Więc to nie można tego zrobić bez else.
Adwokat diabła,

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

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

48
Nie wiem nawet, co właśnie przeczytałem, ale śmieję się dość mocno.
Jazz

20

Jeśli chcesz tylko wbudowany JEŻELI (bez ELSE), możesz użyć logicznego operatora AND:

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

Jeśli potrzebujesz również ELSE, skorzystaj z operacji trójskładnikowej zaproponowanej przez inne osoby.


17

Możesz to zrobić w JavaScript:

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

8

Do Twojej wiadomości możesz komponować operatory warunkowe

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

Jeśli Twoja logika jest wystarczająco złożona, możesz rozważyć użycie IIFE

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

Oczywiście, jeśli planujesz używać tej logiki więcej niż raz, musisz nauczyć się enkapsulować ją w funkcji, aby zachować ładność i SUSZENIE.


6

Często muszę uruchamiać więcej kodu dla każdego warunku, używając: ( , , )można wykonać wiele elementów kodu:

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

Aby dodać do tego, możesz również użyć wbudowanego, jeśli warunek z && i || operatorzy. Lubię to

var a = 2;
var b = 0;

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

0

Pytanie nie jest zasadniczo takie: czy mogę napisać następujące?

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

odpowiedź brzmi: tak, powyższe zostanie przetłumaczone.

jednak uważaj na następujące czynności

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

pamiętaj o zawijaniu niejednoznacznego kodu w nawiasach klamrowych, ponieważ powyższe spowoduje zgłoszenie wyjątku (a podobne permutacje spowodują niepożądane zachowanie).


0

wbudowany, jeśli:

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

prawdziwy wniosek: stwierdzenia wykonywane, gdy hipoteza jest prawdziwa

wniosek falsey: stwierdzenia wykonywane, gdy hipoteza jest fałszywa

twój przykład:

var c = ((a < b) ? 'a<b statements' : '!(a<b) statements');
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.