Oletko kyllästynyt toistamaan itseäsi koodatessasi? Käytätkö vielä perinteisiä ”jos … muuta” – palikoita? Mitä jos kertoisin, että voisit kirjoittaa 15 riviä koodia neljällä rivillä? Soita 1-800-ternary-operaattoreille nyt.
Ternaarioperaattorit ovat pikakirjoitusversio if … else-lausumista. Se on JavaScriptin ainoa ehdollinen operaattori, joka ottaa kolme operandia.
ternaarioperaattoreiden perussyntaksi on
ehto ? ekspressio1 : ekspressio2
- jos ehto on testattava/arvioitava arvo,
- ekspressio1 voi olla minkä tahansa tyyppinen suoritettava arvo(t), jos ehto on tosi
- ekspressio2 voi olla minkä tahansa tyyppinen suoritettava arvo(t), jos ekspressio1 on epätosi eli vara-arvo, joka yleisesti tunnetaan nimellä” else ”
- ”? ”tarkoittaa ” jos”, ja ” : ’tarkoittaa ’ muuta”
katsotaanpa esimerkkiä
jos selvitettäisiin, saako ajaa ikänsä perusteella, käyttäen if … else-lausekkeita-se näyttää jokseenkin tältä
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!"
käyttäen ternarioperaattoreita, sama koodi näyttää tältä
var age = 18;alert (age >= 16) ? "You're allowed to drive!" : "You should be 16 to drive!"// You're allowed to drive!
Voila! Tämä koodilohko kääntää, jos muuttuja ’ ikä ’on suurempi tai yhtä suuri kuin 16, selaimen pitäisi varoittaa’ sinulla on oikeus ajaa!’, ELSE ’ sinun pitäisi olla 16 ajaa! pitäisi hälyttää!
toinen syy ottaa käyttöön ternary, on sen joustavuus ja pienoiskoko, joka voisi sopia mihin tahansa koodiin. Jos esimerkiksi haluat liittää narusi tuloksen suoraan naruun, voit tehdä sen helposti ilman, että sinun tarvitsee erikseen ilmoittaa tilaasi.
var isMember = true;
'The fee is ' + (isMember ? '.00' : '.00'); // The fee is .00
jos isMember on totta, ”the fee is $2.00”, muuten ”the fee is $10.00”.
arvaa mitä?! Voit myös määrittää muuttujille ternaarioperaatioiden tulokset. Käytetään samaa ajoesimerkkiä kuin aiemmin.
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!"
tässä esimerkissä tallennimme tuloksen muuttujaan ja näytimme sen myöhemmin konsolissa.
ternarioperaattoreissa on yhtä paljon mahdollista kuin perinteisessä if … else-lohkossa. Useita kolmansia toimijoita voidaan kahlita yhteen muodostaen niin sanotun” IF…ELSE IF ELSE ” – lohkon.
var year = prompt('Which year was the 2018 World Cup?', '');
alert(year < 2018) ? 'Too early' : (year > 2018) ? 'Too late' : 'Exactly!'; // Exactly!
yllä oleva koodilohko kääntää, jos vuosi on alle 2018, Selaimen tulee ilmoittaa ”liian aikaisin”, tai muuten, jos vuosi on suurempi kuin 2018, ”liian myöhään” näytetään, muuten jos se ei ole suurempi tai pienempi kuin eli yhtä suuri kuin, niin ”täsmälleen” näytetään.
Voit myös pesiä jos lauseet:
var statement1 = true;
var statement2 = true;var check = statement1 ? (statement2 ? "True, Yes!" : "True, False!") : 'False';console.log(check); // True, Yes!
silmämme skannaa koodeja pystysuunnassa, mikä sisennys ja välilyönnit ovat suuri osa auttaa meitä lukemaan koodeja helposti. Niitä ei suljeta pois, eivätkä vapaat tilat vaikuta koodiisi.
var stop = false, age = 23;
age > 18 ? (
alert('OK, you can go.')
) : (
alert('Sorry, you are much too young!')
);
yllä oleva koodi toimii yhtä hyvin kuin mikä tahansa kolmas arviointi tai mikä tahansa if … else-operaatio.
on myös mahdollista tehdä useita operaatioita per tapaus, ja erottaa ne pilkulla.
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!')
);
voit myös suorittaa useita operaatioita ja antaa arvot muuttujalle. Muuttujalle annetaan viimeinen pilkulla erotettu arvo.
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"
viimeisenä, mutta ei vähäisimpänä, funktioiden arvojen palauttamiseen voidaan käyttää ternaarisia operaatioita. Jos esimerkiksi kirjoittaisimme funktion, joka palauttaisi arvon sen määrittämiseksi, onko Chris Pratt Marvel-universumin jäsen vai ei;
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!"
huomaa käytimme return useita kertoja ja piti kirjoittaa if … else lausuma ja upottaa niiden arvot kihara suluissa jne, Mikä on hienoa. Mutta se voidaan lyhentää käyttämällä ternary operaattorit. Sama koodi edellä arvioidaan sellaisenaan kolmannessa toiminnassa;
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!"
Huom: Kaikki ternaarioperaatiossa käytettävät muuttujat tulee määritellä ennen operaation luomista.
jos pääsit näin pitkälle, kiitos!
Feel free to add me Twitterissä ja Instagram