Bedingte Verzweigung: if, '?'

Manchmal müssen wir basierend auf unterschiedlichen Bedingungen unterschiedliche Aktionen ausführen.

Dazu können wir die if -Anweisung und den Bedingungsoperator ? verwenden. , das wird auch „Fragezeichen“-Operator genannt.

Die „Wenn“-Anweisung

Die if(...) -Anweisung wertet eine Bedingung in Klammern aus und führt einen Codeblock aus, wenn das Ergebnis true ist.

Zum Beispiel:

 let year = prompt('In welchem ​​Jahr wurde die ECMAScript-2015-Spezifikation veröffentlicht?', '');

if (year == 2015) warning( 'Du hast recht!' );

Im obigen Beispiel handelt es sich bei der Bedingung um eine einfache Gleichheitsprüfung ( year == 2015 ), sie kann jedoch viel komplexer sein.

Wenn wir mehr als eine Anweisung ausführen möchten, müssen wir unseren Codeblock in geschweifte Klammern einschließen:

 if (Jahr == 2015) {
  alarm( "Das ist richtig!" );
  alarm( "Du bist so schlau!" );
}

Wir empfehlen, Ihren Codeblock jedes Mal, wenn Sie eine if -Anweisung verwenden, mit geschweiften Klammern {} zu umschließen, auch wenn nur eine Anweisung ausgeführt werden muss. Dies verbessert die Lesbarkeit.

Boolesche Konvertierung

Die if (…) -Anweisung wertet den Ausdruck in seinen Klammern aus und wandelt das Ergebnis in einen booleschen Wert um.

Erinnern wir uns an die Konvertierungsregeln aus dem Kapitel Typkonvertierungen:

• Eine Zahl 0 , eine leere Zeichenfolge "" , null , undefined und NaN werden alle zu false . Aus diesem Grund werden sie als „falsche“ Werte bezeichnet.

• Andere Werte werden true , daher werden sie „wahr“ genannt.

Daher würde der Code unter dieser Bedingung niemals ausgeführt werden:

 if (0) { // 0 ist falsch
  ...
}

…und in diesem Zustand wird es immer so sein:

 if (1) { // 1 ist wahr
  ...
}

Wir können auch einen vorab ausgewerteten booleschen Wert an if übergeben, etwa so:

 sei cond = (Jahr == 2015); // Gleichheit ergibt wahr oder falsch

if (cond) {
  ...
}

Die „else“-Klausel

Die if -Anweisung kann einen optionalen else Block enthalten. Es wird ausgeführt, wenn die Bedingung falsch ist.

Zum Beispiel:

 let year = prompt('In welchem ​​Jahr wurde die ECMAScript-2015-Spezifikation veröffentlicht?', '');

if (Jahr == 2015) {
  alarm( 'Du hast es richtig erraten!' );
} anders {
  alarm( 'Wie kann man so falsch liegen?' ); // beliebiger Wert außer 2015
}

Mehrere Bedingungen: „sonst wenn“

Manchmal möchten wir mehrere Varianten einer Bedingung testen. Mit der else if -Klausel können wir das tun.

Zum Beispiel:

 let year = prompt('In welchem ​​Jahr wurde die ECMAScript-2015-Spezifikation veröffentlicht?', '');

if (Jahr < 2015) {
  alarm( 'Zu früh...' );
} else if (Jahr > 2015) {
  alarm( 'Zu spät' );
} anders {
  alarm( 'Genau!' );
}

Im obigen Code prüft JavaScript zunächst year < 2015 . Wenn das falsch ist, geht es zum nächsten year > 2015 . Wenn auch das falsch ist, wird die letzte alert angezeigt.

Es können noch else if Blöcke vorhanden sein. Das letzte else ist optional.

Bedingungsoperator '?'

Manchmal müssen wir abhängig von einer Bedingung eine Variable zuweisen.

Zum Beispiel:

 let accessAllowed;
let age = prompt('Wie alt bist du?', '');

wenn (Alter > 18) {
  accessAllowed = true;
} anders {
  accessAllowed = false;
}

alarm(accessAllowed);

Mit dem sogenannten „Bedingungs“- oder „Fragezeichen“-Operator können wir dies auf kürzere und einfachere Weise tun.

Der Operator wird durch ein Fragezeichen dargestellt ? . Manchmal wird es „ternär“ genannt, weil der Operator drei Operanden hat. Es ist tatsächlich der einzige Operator in JavaScript, der so viele hat.

Die Syntax lautet:

 lass Ergebnis = Bedingung? Wert1: Wert2;

Die condition wird ausgewertet: Wenn sie wahr ist, wird value1 zurückgegeben, andernfalls – value2 .

Zum Beispiel:

 let accessAllowed = (Alter > 18) ? wahr: falsch;

Technisch gesehen können wir die Klammern bei age > 18 weglassen. Der Fragezeichenoperator hat eine niedrige Priorität und wird daher nach dem Vergleich > ausgeführt.

Dieses Beispiel bewirkt dasselbe wie das vorherige:

 // Der Vergleichsoperator „Alter > 18“ wird ohnehin zuerst ausgeführt
// (Es ist nicht nötig, es in Klammern zu setzen)
let accessAllowed = Alter > 18? wahr: falsch;

Da Klammern den Code jedoch besser lesbar machen, empfehlen wir deren Verwendung.

Bitte beachten Sie:

Im obigen Beispiel können Sie die Verwendung des Fragezeichenoperators vermeiden, da der Vergleich selbst true/false zurückgibt:

 // das gleiche
let accessAllowed = Alter > 18;

Mehrere „?“

Eine Folge von Fragezeichenoperatoren ? kann einen Wert zurückgeben, der von mehr als einer Bedingung abhängt.

Zum Beispiel:

 let age = prompt('age?', 18);

let message = (Alter < 3) ? „Hallo, Baby!“ :
  (Alter < 18)? 'Hallo!' :
  (Alter < 100)? 'Grüße!' :
  „Was für ein ungewöhnliches Alter!“;

Warnung( Nachricht);

Es kann zunächst schwierig sein, zu begreifen, was vor sich geht. Aber bei genauerem Hinsehen erkennen wir, dass es sich nur um eine gewöhnliche Testsequenz handelt:

1. Das erste Fragezeichen prüft, ob age < 3 ist.

2. Wenn dies zutrifft, wird 'Hi, baby!' zurückgegeben. . Andernfalls wird mit dem Ausdruck nach dem Doppelpunkt „:“ fortgefahren und geprüft, age < 18 .

3. Wenn das wahr ist, wird 'Hello!' zurückgegeben. . Andernfalls wird mit dem Ausdruck nach dem nächsten Doppelpunkt „:“ fortgefahren und geprüft, age < 100 .

4. Wenn das stimmt, wird 'Greetings!' zurückgegeben. . Andernfalls wird mit dem Ausdruck nach dem letzten Doppelpunkt „:“ fortgefahren und 'What an unusual age!' zurückgegeben. .

So sieht das mit if..else aus:

 if (Alter < 3) {
  message = 'Hallo, Baby!';
} else if (Alter < 18) {
  message = 'Hallo!';
} else if (Alter < 100) {
  message = 'Grüße!';
} anders {
  message = 'Was für ein ungewöhnliches Alter!';
}

Nicht-traditionelle Verwendung von „?“

Manchmal ist das Fragezeichen ? wird als Ersatz für if verwendet:

 let company = prompt('Welche Firma hat JavaScript erstellt?', '');

(Firma == 'Netscape')?
   alarm('Richtig!') : alarm('Falsch.');

Abhängig von der Bedingung company == 'Netscape' wird entweder der erste oder der zweite Ausdruck nach dem ? wird ausgeführt und zeigt eine Warnung an.

Wir weisen hier kein Ergebnis einer Variablen zu. Stattdessen führen wir je nach Bedingung unterschiedlichen Code aus.

Es wird nicht empfohlen, den Fragezeichenoperator auf diese Weise zu verwenden.

Die Notation ist kürzer als die entsprechende if Anweisung, was einige Programmierer anspricht. Aber es ist weniger lesbar.

Hier ist derselbe Code, if zum Vergleich verwendet:

 let company = prompt('Welche Firma hat JavaScript erstellt?', '');

if (company == 'Netscape') {
  alarm('Richtig!');
} anders {
  alarm('Falsch.');
}

Unsere Augen scannen den Code vertikal. Codeblöcke, die sich über mehrere Zeilen erstrecken, sind leichter zu verstehen als ein langer, horizontaler Befehlssatz.

Der Zweck des Fragezeichenoperators ? besteht darin, je nach Zustand den einen oder anderen Wert zurückzugeben. Bitte verwenden Sie es genau dafür. Verwenden Sie if Sie verschiedene Codezweige ausführen müssen.

Aufgaben

if (eine Zeichenfolge mit Null)

Wichtigkeit: 5

Wird alert angezeigt?

 if ("0") {
  alarm( 'Hallo' );
}

Lösung

Ja, das wird es.

Jede Zeichenfolge außer einer leeren (und "0" ist nicht leer) wird im logischen Kontext true .

Wir können Folgendes ausführen und überprüfen:

 if ("0") {
  alarm( 'Hallo' );
}

Der Name von JavaScript

Wichtigkeit: 2

Schreiben Sie mit dem if..else Konstrukt den Code, der fragt: „Wie lautet der „offizielle“ Name von JavaScript?“

Wenn der Besucher „ECMAScript“ eingibt, dann „Richtig!“ ausgeben, andernfalls – Ausgabe: „Du weißt es nicht?“ ECMAScript!“

Demo in neuem Fenster

Lösung

 <!DOCTYPE html>
<html>

<Körper>
  <Skript>
    'strikt verwenden';

    let value = prompt('Wie lautet der „offizielle“ Name von JavaScript?', '');

    if (value == 'ECMAScript') {
      alarm('Richtig!');
    } anders {
      alarm("Sie wissen es nicht? ECMAScript!");
    }
  </script>


</body>

</html>

Zeigen Sie das Zeichen

Wichtigkeit: 2

Schreiben Sie mit if..else den Code, der per prompt eine Nummer erhält und dann in alert angezeigt wird:

• 1 , wenn der Wert größer als Null ist,

• -1 , wenn kleiner als Null,

• 0 , wenn gleich Null.

In dieser Aufgabe gehen wir davon aus, dass die Eingabe immer eine Zahl ist.

Demo in neuem Fenster

Lösung

 let value = prompt('Geben Sie eine Zahl ein', 0);

if (Wert > 0) {
  alarm( 1 );
} sonst wenn (Wert < 0) {
  alarm( -1 );
} anders {
  alarm( 0 );
}

Schreiben Sie „if“ in „?“ um.

Wichtigkeit: 5

Schreiben Sie dies um, if Sie den bedingten Operator '?' verwenden. :

 Ergebnis lassen;

wenn (a + b < 4) {
  result = 'Unten';
} anders {
  result = 'Over';
}

Lösung

 sei Ergebnis = (a + b < 4) ? 'Unten': 'Über';

„if..else“ in „?“ umschreiben

Wichtigkeit: 5

Schreiben Sie if..else mit mehreren ternären Operatoren '?' um. .

Aus Gründen der Lesbarkeit wird empfohlen, den Code in mehrere Zeilen aufzuteilen.

 Nachricht hinterlassen;

if (login == 'Mitarbeiter') {
  message = 'Hallo';
} else if (login == 'Director') {
  message = 'Grüße';
} else if (login == '') {
  message = 'Kein Login';
} anders {
  Nachricht = '';
}

Lösung

 let message = (login == 'Employee') ? 'Hallo' :
  (login == 'Direktor') ? 'Grüße' :
  (Anmelden == '') ? 'Kein Login':
  '';