9.9 KiB

Raw Blame History Unescape Escape

JavaScript-Grundlagen: Entscheidungen treffen

Sketchnote von Tomomi Imura

Quiz vor der Vorlesung

Entscheidungen zu treffen und die Reihenfolge zu steuern, in der dein Code ausgeführt wird, macht deinen Code wiederverwendbar und robust. In diesem Abschnitt geht es um die Syntax zur Steuerung des Datenflusses in JavaScript und deren Bedeutung im Zusammenhang mit Booleschen Datentypen.

🎥 Klicke auf das Bild oben, um ein Video über das Treffen von Entscheidungen anzusehen.

Du kannst diese Lektion auf Microsoft Learn absolvieren!

Ein kurzer Rückblick auf Boolesche Werte

Boolesche Werte können nur zwei Zustände haben: true oder false. Sie helfen dabei, Entscheidungen zu treffen, welche Codezeilen ausgeführt werden sollen, wenn bestimmte Bedingungen erfüllt sind.

Setze deinen Booleschen Wert auf true oder false wie folgt:

let myTrueBool = true
let myFalseBool = false

✅ Boolesche Werte sind benannt nach dem englischen Mathematiker, Philosophen und Logiker George Boole (1815–1864).

Vergleichsoperatoren und Boolesche Werte

Operatoren werden verwendet, um Bedingungen zu bewerten, indem sie Vergleiche anstellen, die einen Booleschen Wert erzeugen. Die folgende Liste zeigt häufig verwendete Operatoren.

Symbol	Beschreibung	Beispiel
`<`	Kleiner als: Vergleicht zwei Werte und gibt den Booleschen Wert `true` zurück, wenn der Wert auf der linken Seite kleiner als der auf der rechten Seite ist	`5 < 6 // true`
`<=`	Kleiner oder gleich: Vergleicht zwei Werte und gibt den Booleschen Wert `true` zurück, wenn der Wert auf der linken Seite kleiner oder gleich dem auf der rechten Seite ist	`5 <= 6 // true`
`>`	Größer als: Vergleicht zwei Werte und gibt den Booleschen Wert `true` zurück, wenn der Wert auf der linken Seite größer als der auf der rechten Seite ist	`5 > 6 // false`
`>=`	Größer oder gleich: Vergleicht zwei Werte und gibt den Booleschen Wert `true` zurück, wenn der Wert auf der linken Seite größer oder gleich dem auf der rechten Seite ist	`5 >= 6 // false`
`===`	Strikte Gleichheit: Vergleicht zwei Werte und gibt den Booleschen Wert `true` zurück, wenn die Werte auf der rechten und linken Seite gleich sind UND denselben Datentyp haben	`5 === 6 // false`
`!==`	Ungleichheit: Vergleicht zwei Werte und gibt den entgegengesetzten Booleschen Wert zurück, den ein strikter Gleichheitsoperator zurückgeben würde	`5 !== 6 // true`

✅ Überprüfe dein Wissen, indem du einige Vergleiche in der Konsole deines Browsers schreibst. Gibt es Ergebnisse, die dich überraschen?

If-Anweisung

Die If-Anweisung führt den Code zwischen ihren Blöcken aus, wenn die Bedingung wahr ist.

if (condition) {
  //Condition is true. Code in this block will run.
}

Logische Operatoren werden oft verwendet, um die Bedingung zu bilden.

let currentMoney;
let laptopPrice;

if (currentMoney >= laptopPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
}

If..Else-Anweisung

Die else-Anweisung führt den Code zwischen ihren Blöcken aus, wenn die Bedingung falsch ist. Sie ist optional bei einer if-Anweisung.

let currentMoney;
let laptopPrice;

if (currentMoney >= laptopPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
} else {
  //Condition is false. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
}

✅ Teste dein Verständnis dieses Codes und des folgenden Codes, indem du ihn in einer Browser-Konsole ausführst. Ändere die Werte der Variablen currentMoney und laptopPrice, um die Ausgabe von console.log() zu ändern.

Switch-Anweisung

Die switch-Anweisung wird verwendet, um verschiedene Aktionen basierend auf unterschiedlichen Bedingungen auszuführen. Verwende die switch-Anweisung, um einen von vielen Codeblöcken auszuwählen, die ausgeführt werden sollen.

switch (expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
  // code block
}

// program using switch statement
let a = 2;

switch (a) {
  case 1:
    a = "one";
    break;
  case 2:
    a = "two";
    break;
  default:
    a = "not found";
    break;
}
console.log(`The value is ${a}`);

✅ Teste dein Verständnis dieses Codes und des folgenden Codes, indem du ihn in einer Browser-Konsole ausführst. Ändere die Werte der Variablen a, um die Ausgabe von console.log() zu ändern.

Logische Operatoren und Boolesche Werte

Entscheidungen können mehr als einen Vergleich erfordern und können mit logischen Operatoren verknüpft werden, um einen Booleschen Wert zu erzeugen.

Symbol	Beschreibung	Beispiel
`&&`	Logisches UND: Vergleicht zwei Boolesche Ausdrücke. Gibt `true` nur zurück, wenn beide Seiten wahr sind	`(5 > 6) && (5 < 6 ) //Eine Seite ist falsch, die andere ist wahr. Gibt false zurück`
`\|\|`	Logisches ODER: Vergleicht zwei Boolesche Ausdrücke. Gibt `true` zurück, wenn mindestens eine Seite wahr ist	`(5 > 6) \|\| (5 < 6) //Eine Seite ist falsch, die andere ist wahr. Gibt true zurück`
`!`	Logisches NICHT: Gibt den entgegengesetzten Wert eines Booleschen Ausdrucks zurück	`!(5 > 6) // 5 ist nicht größer als 6, aber "!" gibt true zurück`

Bedingungen und Entscheidungen mit logischen Operatoren

Logische Operatoren können verwendet werden, um Bedingungen in If..Else-Anweisungen zu bilden.

let currentMoney;
let laptopPrice;
let laptopDiscountPrice = laptopPrice - laptopPrice * 0.2; //Laptop price at 20 percent off

if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
} else {
  //Condition is true. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
}

Negationsoperator

Du hast bisher gesehen, wie du eine if...else-Anweisung verwenden kannst, um bedingte Logik zu erstellen. Alles, was in ein if kommt, muss zu true oder false ausgewertet werden. Mit dem !-Operator kannst du den Ausdruck negieren. Das würde so aussehen:

if (!condition) {
  // runs if condition is false
} else {
  // runs if condition is true
}

Ternäre Ausdrücke

if...else ist nicht die einzige Möglichkeit, Entscheidungslogik auszudrücken. Du kannst auch einen sogenannten ternären Operator verwenden. Die Syntax sieht so aus:

let variable = condition ? <return this if true> : <return this if false>

Hier ist ein greifbareres Beispiel:

let firstNumber = 20;
let secondNumber = 10;
let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;

✅ Nimm dir eine Minute Zeit, um diesen Code ein paar Mal zu lesen. Verstehst du, wie diese Operatoren funktionieren?

Das obige Beispiel besagt:

Wenn firstNumber größer als secondNumber ist,
dann weise firstNumber der Variablen biggestNumber zu,
andernfalls weise secondNumber zu.

Der ternäre Ausdruck ist nur eine kompakte Art, den folgenden Code zu schreiben:

let biggestNumber;
if (firstNumber > secondNumber) {
  biggestNumber = firstNumber;
} else {
  biggestNumber = secondNumber;
}

🚀 Herausforderung

Erstelle ein Programm, das zuerst mit logischen Operatoren geschrieben wird und dann mit einem ternären Ausdruck umgeschrieben wird. Welche Syntax bevorzugst du?

Quiz nach der Vorlesung

Wiederholung & Selbststudium

Lies mehr über die vielen verfügbaren Operatoren auf MDN.

Schau dir Josh Comeaus großartige Operator-Übersicht an!

Aufgabe

Operatoren

Haftungsausschluss:
Dieses Dokument wurde mithilfe des KI-Übersetzungsdienstes Co-op Translator übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

9.9 KiB Raw Blame History Unescape Escape