masz dość powtarzania się podczas kodowania? Czy nadal używasz tradycyjnych bloków „if … else”? A gdybym ci powiedział, że możesz napisać 15 linijek kodu w 4 linijkach? Zadzwoń do 1-800-TERNARY-OPERATORS.
operatory trójdzielne są skróconą wersją instrukcji if … else. Jest to jedyny operator warunkowy w języku JavaScript, który pobiera trzy operandy.
podstawowa składnia operatorów trójwymiarowych to
warunek ? ekspresja1 : ekspresja2
- jeżeli warunek jest wartością do przetestowania / obliczenia,
- wyrażenie1 może być wartością (- ami) dowolnego typu do wykonania, jeśli warunek jest prawdziwy
- wyrażenie2 może być wartością (- ami) dowolnego typu do wykonania, jeśli wyrażenie1 jest fałszywe, tzn. wartość zastępcza powszechnie znana jako 'else’
- ” ? „oznacza ” jeśli”, oraz ” : „means ” else”
spójrzmy na przykład
jeśli mielibyśmy ustalić, czy można jeździć według wieku, używając instrukcji if … else-wygląda to mniej więcej tak
var age = 18;if (age >= 16) {
alert("You're allowed to drive!");
}else {
alert("You should be 16 to drive!");
}// "You're allowed to drive!"
używając operatorów trójskładnikowych, ten sam kod będzie wyglądał tak
var age = 18;alert (age >= 16) ? "You're allowed to drive!" : "You should be 16 to drive!"// You're allowed to drive!
Voila! Ten blok kodu zostanie przetłumaczony na to, że jeśli zmienna „wiek”jest większa lub równa 16, przeglądarka powinna ostrzegać „możesz prowadzić!’, Inaczej ’ powinieneś mieć 16 lat, aby prowadzić!/ powinni być zaalarmowani!
kolejnym powodem do przyjęcia trójwymiarowego jest elastyczność i miniaturowy rozmiar, który może zmieścić się w dowolnym miejscu w kodzie. Na przykład, jeśli chcesz dołączyć wynik łańcucha bezpośrednio do łańcucha, możesz to łatwo zrobić bez konieczności deklarowania swojego warunku osobno.
var isMember = true;
'The fee is ' + (isMember ? '.00' : '.00'); // The fee is .00
jeśli to prawda, „opłata wynosi $2.00”, w przeciwnym razie „opłata wynosi $10.00”.
Zgadnij co?! Można również przypisać wyniki operacji trójskładnikowych do zmiennych. Użyjmy tego samego przykładu jazdy, którego użyliśmy wcześniej.
var age = 18;
var canDrive = (age >= 16) ? "You're allowed to drive!" : "You should be 16 to drive!";
console.log(canDrive); // "You're allowed to drive!"
w tym przykładzie zapisaliśmy wynik w zmiennej, a następnie wyświetliliśmy go w konsoli.
w operatorach trójdzielnych jest tyle co w tradycyjnym bloku if…else. Wiele operatorów trójskładnikowych można połączyć w łańcuch, tworząc tzw. blok” IF…ELSE IF…ELSE”.
var year = prompt('Which year was the 2018 World Cup?', '');
alert(year < 2018) ? 'Too early' : (year > 2018) ? 'Too late' : 'Exactly!'; // Exactly!
powyższy blok kodu zostanie przetłumaczony, jeśli rok jest mniejszy niż 2018, przeglądarka powinna ostrzegać „za wcześnie”, lub, jeśli rok jest większy niż 2018, „za późno” zostanie wyświetlony, w przeciwnym razie, jeśli nie jest większy lub mniejszy niż tj. równy, zostanie wyświetlony „dokładnie”.
Możesz również mieć zagnieżdżone polecenia if:
var statement1 = true;
var statement2 = true;var check = statement1 ? (statement2 ? "True, Yes!" : "True, False!") : 'False';console.log(check); // True, Yes!
nasze oczy skanują kody pionowo, co wcięć i spacje odgrywają wielką rolę w pomaganiu nam w łatwym odczytaniu kodów. Nie są one wykluczone w ternary, a wolne spacje nie mają wpływu na Twój kod.
var stop = false, age = 23;
age > 18 ? (
alert('OK, you can go.')
) : (
alert('Sorry, you are much too young!')
);
powyższy kod będzie działał tak samo dobrze, jak każda trójwymiarowa ocena lub dowolna operacja if…else.
możliwe jest również wykonanie wielu operacji w każdym przypadku i oddzielenie ich przecinkiem.
var stop = false, age = 23;
age > 18 ? (
alert('OK, you can go.'),
location.assign('continue.html')
) : (
stop = true,
alert('Sorry, you are much too young!')
);
Możesz również wykonać wiele operacji i przypisać wartości do zmiennej. Do zmiennej zostanie przypisana ostatnia wartość oddzielona przecinkami.
var age = 16;
var auth = age > 18 ? (
alert('OK, you can go.'),
// alert returns "undefined", but it will be ignored because
// isn't the last comma-separated value of the parenthesis
'APPROVED' // the value to be assigned if age > 18
) : (
alert('You are much too young!'),
alert('Sorry :-('),
// etc. etc.
'DISAPPROVE' // the value to be assigned if !(age > 18)
);
location.assign(auth); // "DISAPPROVE"
wreszcie, operacje trójdzielne mogą być użyte do zwracania wartości w funkcjach. Na przykład, gdybyśmy napisali funkcję zwracającą wartość, aby ustalić, czy Chris Pratt jest członkiem uniwersum Marvela, czy nie;
var marvel = true;function chrisPratt(marvel) {
if (marvel === true){
return "I am Star-Lord!";
}
else {
return "Have you watched Guardians of the Galaxy?";
}}
var output = chrisPratt(marvel);
console.log(output); // "I am Star-Lord!"
zauważ, że użyliśmy return wiele razy i musieliśmy napisać instrukcję if … else i osadzić ich wartości w nawiasach klamrowych itp., co jest świetne. Ale można go skrócić za pomocą operatorów trójskładnikowych. Ten sam kod powyżej zostanie oceniony jako taki w operacji trójdzielnej;
var marvel = true;function chrisPratt(marvel) {
return (marvel === true) ? "I am Star-Lord!" : "Have you watched Guardians of the Galaxy?";
}
var output = chrisPratt(marvel);
console.log(output); // "I am Star-Lord!"
Uwaga: wszystkie zmienne używane w operacji trójdzielnej powinny być zdefiniowane przed utworzeniem operacji.
jeśli dotarłeś tak daleko, dziękuję!
zapraszam do dodawania mnie na Twitterze i na Instagramie