Sind Sie es leid, sich beim Codieren zu wiederholen? Verwenden Sie immer noch die traditionellen if … else-Blöcke? Was wäre, wenn ich Ihnen sagen würde, Sie könnten 15 Codezeilen in 4 Zeilen schreiben? Rufen Sie jetzt 1-800-TERNARY-OPERATORS an.
Ternäre Operatoren sind die Kurzversion von if…else-Anweisungen. Es ist der einzige bedingte Operator in JavaScript, der drei Operanden benötigt.
Die grundlegende Syntax für ternäre Operatoren ist
Bedingung ? ausdruck1 : ausdruck2
- wo die Bedingung der zu testende / auszuwertende Wert ist,
- expression1 kann Wert (e) eines beliebigen Typs sein, der ausgeführt werden soll, wenn die Bedingung wahr ist
- expression2 kann Wert (e) eines beliebigen Typs sein, der ausgeführt werden soll, wenn expression1 falsch ist, dh Fallback-Wert allgemein bekannt als „else“
- „? “ bedeutet „wenn“ und “ : “ bedeutet „sonst“
Schauen wir uns ein Beispiel an
Wenn wir mit den if…else Anweisungen feststellen würden, ob man nach seinem Alter fahren darf — es sieht ungefähr so aus
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!"
Mit ternären Operatoren sieht derselbe Code folgendermaßen aus
var age = 18;alert (age >= 16) ? "You're allowed to drive!" : "You should be 16 to drive!"// You're allowed to drive!
Voila! Dieser Codeblock wird übersetzt, wenn Variable ‚Alter‘ ist größer oder gleich 16, Der Browser sollte warnen ‚Du darfst fahren!‘, ELSE ‚Du solltest 16 sein, um zu fahren!‘ sollte alarmiert werden!
Ein weiterer Grund, ternär zu verwenden, ist seine Flexibilität und Miniaturgröße, die überall in Ihren Code passen könnte. Wenn Sie beispielsweise das Ergebnis Ihrer Zeichenfolge direkt an eine Zeichenfolge anhängen möchten, können Sie dies problemlos tun, ohne Ihre Bedingung separat deklarieren zu müssen.
var isMember = true;
'The fee is ' + (isMember ? '.00' : '.00'); // The fee is .00
WENN isMember wahr ist, beträgt die Gebühr 2,00 USD, ANDERNFALLS 10,00 USD.
Weißt du was?! Sie können die Ergebnisse der ternären Operationen auch Variablen zuweisen. Lassen Sie uns das gleiche Fahrbeispiel verwenden, das wir zuvor verwendet haben.
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 diesem Beispiel haben wir das Ergebnis in einer Variablen gespeichert und später in der Konsole angezeigt.
In ternären Operatoren ist genauso viel möglich wie im traditionellen if…else-Block. Mehrere ternäre Operatoren können miteinander verkettet werden, um einen sogenannten „IF…ELSE IF…ELSE“ -Block zu bilden.
var year = prompt('Which year was the 2018 World Cup?', '');
alert(year < 2018) ? 'Too early' : (year > 2018) ? 'Too late' : 'Exactly!'; // Exactly!
Der obige Codeblock übersetzt, wenn das Jahr kleiner als 2018 ist, der Browser sollte ‚Zu früh‘ warnen, oder, wenn das Jahr größer als 2018 ist, ‚Zu spät‘ wird angezeigt, sonst, wenn es nicht größer oder kleiner als dh gleich ist, dann wird ‚Genau‘ angezeigt.
Sie können auch verschachtelte if-Anweisungen haben:
var statement1 = true;
var statement2 = true;var check = statement1 ? (statement2 ? "True, Yes!" : "True, False!") : 'False';console.log(check); // True, Yes!
Unsere Augen scannen Codes vertikal, wobei Einrückungen und Leerzeichen eine wichtige Rolle beim einfachen Lesen der Codes spielen. Sie sind in ternary nicht ausgeschlossen, und freie Leerzeichen wirken sich nicht auf Ihren Code aus.
var stop = false, age = 23;
age > 18 ? (
alert('OK, you can go.')
) : (
alert('Sorry, you are much too young!')
);
Der obige Code funktioniert genauso gut wie jede ternäre Auswertung oder jede if…else Operation.
Es ist auch möglich, mehrere Operationen pro Fall zu haben und sie durch ein Komma zu trennen.
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!')
);
Sie können auch mehrere Operationen durchführen und die Werte einer Variablen zuweisen. Der letzte durch Kommas getrennte Wert wird der Variablen zugewiesen.
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"
Last but not least können ternäre Operationen verwendet werden, um Werte in Funktionen zurückzugeben. Zum Beispiel, wenn wir eine Funktion schreiben würden, um einen Wert zurückzugeben, um festzustellen, ob Chris Pratt ein Mitglied des Marvel-Universums ist oder nicht;
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!"
Beachten Sie, dass wir return mehrmals verwendet haben und die if…else-Anweisung schreiben und ihre Werte in geschweifte Klammern usw. einbetten mussten, was großartig ist. Es kann jedoch mit ternären Operatoren verkürzt werden. Derselbe obige Code wird im ternären Betrieb als solcher ausgewertet;
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!"
Hinweis: Alle Variablen, die in einer ternären Operation verwendet werden, sollten definiert werden, bevor die Operation erstellt wird.
Wenn Sie es so weit geschafft haben, danke!
Fühlen Sie sich frei, mich auf Twitter und auf Instagram hinzuzufügen