Unod már, hogy kódolás közben ismételgesd magad? Még mindig a hagyományos ‘if…else’ blokkokat használja? Mi lenne, ha azt mondanám, hogy 15 sornyi kódot írhatsz 4 sorba? Hívja az 1-800-hármas operátorokat most.
a hármas operátorok az if…else utasítások rövidített változata. Ez az egyetlen feltételes operátor a JavaScript-ben, amely három operandust vesz igénybe.
a hármas operátorok alapvető szintaxisa
feltétel ? kifejezés1 : kifejezés2
- ahol a feltétel a tesztelendő/értékelendő érték,
- az expresszió1 bármilyen típusú végrehajtandó érték(ek) lehet, ha a feltétel igaz
- az expresszió2 bármilyen típusú végrehajtandó érték(ek) lehet, ha az expresszió1 hamis, azaz a tartalékérték általában” else ” néven ismert
- “? “azt jelenti, hogy “ha”, és” : “azt jelenti “mást”
nézzünk meg egy példát
ha az If…else utasításokkal meg akarjuk határozni, hogy az életkoruk szerint szabad — e vezetni-ez így néz ki
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!"
hármas operátorok használatával ugyanaz a kód így fog kinézni
var age = 18;alert (age >= 16) ? "You're allowed to drive!" : "You should be 16 to drive!"// You're allowed to drive!
Voila! Ez a kódblokk lefordítja, ha az ‘életkor’ változó nagyobb vagy egyenlő 16, a böngészőnek figyelmeztetnie kell, hogy vezethet!’, Különben ‘ 16-nak kellene lenned vezetni!’figyelmeztetni kell!
egy másik ok arra, hogy elfogadja a hármas, ez a rugalmasság és a miniatűr méret, amely elfér bárhol a kódot. Például, ha a karakterlánc eredményét közvetlenül egy karakterlánchoz szeretné csatolni, akkor ezt könnyen megteheti anélkül, hogy külön kellene deklarálnia az állapotát.
var isMember = true;
'The fee is ' + (isMember ? '.00' : '.00'); // The fee is .00
ha isMember igaz , ‘a díj $2.00’, különben ‘a díj $10.00’.
tudod mit?! A hármas műveletek eredményeit a változókhoz is hozzárendelheti. Használjuk ugyanazt a vezetési példát, amelyet korábban használtunk.
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!"
ebben a példában az eredményt egy változóba mentettük, majd később megjelenítettük a konzolban.
a hármas operátorokban éppúgy lehetséges, mint a hagyományos if…else blokkban. Több ternáris operátor összekapcsolható, hogy létrehozzuk az úgynevezett “ha … ELSE ha … ELSE” blokkot.
var year = prompt('Which year was the 2018 World Cup?', '');
alert(year < 2018) ? 'Too early' : (year > 2018) ? 'Too late' : 'Exactly!'; // Exactly!
a fenti kódblokk lefordítja, ha az év kevesebb, mint 2018, a böngészőnek figyelmeztetnie kell ‘túl korán’, különben, ha az év nagyobb, mint 2018, ‘túl késő’ jelenik meg, különben ha nem nagyobb vagy kisebb, mint azaz egyenlő, akkor ‘pontosan’ jelenik meg.
beágyazott if utasításokkal is rendelkezhet:
var statement1 = true;
var statement2 = true;var check = statement1 ? (statement2 ? "True, Yes!" : "True, False!") : 'False';console.log(check); // True, Yes!
a szemünk függőlegesen vizsgálja a kódokat, amelyek a behúzások és a terek nagy szerepet játszanak abban, hogy könnyebben olvassuk a kódokat. Ezek nincsenek kizárva a hármas rendszerben, és a szabad helyek nem befolyásolják a kódot.
var stop = false, age = 23;
age > 18 ? (
alert('OK, you can go.')
) : (
alert('Sorry, you are much too young!')
);
a fenti kód ugyanolyan jól fog működni, mint bármely hármas értékelés vagy bármilyen if…else művelet.
esetenként több művelet is lehetséges, vesszővel elválasztva.
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!')
);
több műveletet is végezhet, és az értékeket hozzárendelheti egy változóhoz. Az utolsó vesszővel elválasztott érték a változóhoz lesz rendelve.
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"
végül, de nem utolsósorban, a hármas műveletek felhasználhatók a függvények értékeinek visszaadására. Például, ha EGY függvényt írnánk egy érték visszaadására annak meghatározására, hogy Chris Pratt a Marvel univerzum tagja-e vagy sem;
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!"
figyeljük meg, hogy többször használtuk a return-t, és meg kellett írnunk az if…else utasítást, és beágyazni az értékeiket göndör zárójelbe stb., ami nagyszerű. De a hármas operátorok segítségével lerövidíthető. A fenti kódot mint ilyen kiértékeljük a hármas műveletben;
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!"
megjegyzés: a hármas műveletben használt összes változót meg kell határozni a művelet létrehozása előtt.
ha eddig eljutottál, köszönöm!
nyugodtan írj fel a Twitterre és az Instagram-ra