bent u het zat om uzelf te herhalen tijdens het coderen? Gebruik je nog steeds de traditionele’ als…else ‘ blokken? Wat als ik je vertel dat je 15 regels code kan schrijven in 4 regels? Bel 1-800-TERNARY-OPERATORS nu.
ternaire Operators zijn de steno versie van if … else verklaringen. Het is de enige voorwaardelijke operator in JavaScript die drie operanden heeft.
de basissyntaxis voor ternaire operatoren is
voorwaarde ? expressie1 : Expressie2
- wanneer de voorwaarde de waarde is die moet worden getest/geëvalueerd, kan
- expressie1 waarde(s) zijn van elk type dat moet worden uitgevoerd als de voorwaarde Waar is
- Expressie2 kan Waarde(s) zijn van elk type dat moet worden uitgevoerd als expressie1 onwaar is, d.w.z. fallback-waarde die gewoonlijk bekend staat als” else ”
- “? “betekent ” als”, en ” : “betekent ” else”
laten we eens kijken naar een voorbeeld
als we zouden bepalen of iemand mag rijden op basis van hun leeftijd, gebruikmakend van de if…else statements — het ziet er ongeveer zo uit
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!"
met behulp van ternaire operators, zal dezelfde code er zo uitzien
var age = 18;alert (age >= 16) ? "You're allowed to drive!" : "You should be 16 to drive!"// You're allowed to drive!
Voila! Dit blok code zal vertalen naar als variabele ‘leeftijd’ is groter of gelijk aan 16, de browser moet waarschuwen ‘ je mag rijden!’, ELSE ‘ je moet 16 zijn om te rijden!’moet worden gewaarschuwd!
een andere reden om ternary aan te nemen, is de flexibiliteit en miniatuurgrootte die overal in uw code kunnen passen. Als u bijvoorbeeld het resultaat van uw string direct aan een string wilt koppelen, kunt u dat eenvoudig doen zonder uw conditie afzonderlijk te hoeven declareren.
var isMember = true;
'The fee is ' + (isMember ? '.00' : '.00'); // The fee is .00
indien isMember waar is, is “de vergoeding $2,00”, anders “de vergoeding is $ 10,00”.
raad eens?! U kunt ook de resultaten van de ternaire operaties toewijzen aan variabelen. Laten we hetzelfde rijvoorbeeld gebruiken als eerder.
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!"
in dit voorbeeld hebben we het resultaat opgeslagen in een variabele en later weergegeven in de console.
er zijn in ternaire operatoren net zoveel mogelijk als in het traditionele if … else-blok. Meerdere ternaire operators kunnen aan elkaar geketend worden om wat we noemen ‘als…anders als…anders’ blok te vormen.
var year = prompt('Which year was the 2018 World Cup?', '');
alert(year < 2018) ? 'Too early' : (year > 2018) ? 'Too late' : 'Exactly!'; // Exactly!
het blok code hierboven zal vertalen als het jaar lager is dan 2018, de browser moet waarschuwen ’te vroeg’, of anders, als het jaar groter is dan 2018,’ te laat ‘zal worden weergegeven, anders als het niet groter of kleiner is dan dwz gelijk aan, dan zal’ precies ‘ worden weergegeven.
u kunt ook geneste if statements hebben:
var statement1 = true;
var statement2 = true;var check = statement1 ? (statement2 ? "True, Yes!" : "True, False!") : 'False';console.log(check); // True, Yes!
onze ogen scant codes verticaal, die inspringen en spaties spelen grote rol in het helpen ons lezen van de codes gemakkelijk. Ze zijn niet uitgesloten in ternary, en vrije ruimtes hebben geen invloed op uw code.
var stop = false, age = 23;
age > 18 ? (
alert('OK, you can go.')
) : (
alert('Sorry, you are much too young!')
);
de bovenstaande code zal net zo goed werken als elke ternaire evaluatie of elke if…else operatie.
het is ook mogelijk om meerdere bewerkingen per geval te hebben, en ze te scheiden met een komma.
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!')
);
u kunt ook meerdere bewerkingen uitvoeren en de waarden aan een variabele toewijzen. De laatste door komma ‘ s gescheiden waarde zal worden toegewezen aan de variabele.
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"
tenslotte kunnen ternaire operaties worden gebruikt om waarden in functies terug te geven. Bijvoorbeeld, als we een functie zouden schrijven om een waarde terug te geven om te bepalen of Chris Pratt lid is van het Marvel Universum of niet;
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!"
merk op dat we meerdere keren return gebruikten en dat we de if … else verklaring moesten schrijven en hun waarden in accolades enz. moesten insluiten, wat geweldig is. Maar het kan worden ingekort met behulp van ternaire operators. Dezelfde code hierboven zal als zodanig worden geëvalueerd in ternaire werking;
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!"
Opmerking: alle variabelen die in een ternaire operatie worden gebruikt, moeten worden gedefinieerd voordat de operatie wordt gemaakt.
als je zover bent gekomen, bedankt!
voeg me toe op Twitter en op Instagram