Geben Sie mehrere Bedingungen innerhalb der if-Anweisung in JavaScript

Setzen Sie in JavaScript jede Bedingung in die Klammern einer if-Anweisung. Verknüpfen Sie Bedingungen mit &&, wenn alle erfüllt sein müssen, oder mit ||, wenn mindestens eine erfüllt sein darf. Klammern machen gemischte logische Ausdrücke übersichtlicher. Eine if...else if-Kette eignet sich, wenn unterschiedliche Treffer unterschiedliche Aktionen auslösen sollen.

Bedingungen mit && und || in einer JavaScript-if-Anweisung verknüpfen

In einer if-Bedingung verlangt &&, dass beide Operanden wahrheitswertig sind; bei || muss mindestens einer wahrheitswertig sein. Die logischen Operatoren in JavaScript geben einen ihrer Operanden zurück, der nicht unbedingt ein boolescher Wert ist. Anschließend prüft die if-Anweisung, ob das Ergebnis wahrheitswertig ist. Zum Beispiel lässt age >= 18 && hasTicket eine Aktion nur dann zu, wenn eine Person volljährig ist und eine Eintrittskarte hat. Ist eine der beiden Bedingungen falsch, ist auch die kombinierte Bedingung falsch.

Zum Beispiel lässt isAdmin || isOwner eine Aktion zu, wenn der Benutzer Administrator ist oder der Eigentümer des Elements. Wählen Sie den Operator passend zu Ihrer Regel: „alle diese Bedingungen“ bedeutet &&, „mindestens eine davon“ bedeutet ||.

Im folgenden Beispiel akzeptiert die erste Prüfung nur eine volljährige Person mit Eintrittskarte. Die zweite Prüfung akzeptiert einen Benutzer, der entweder Administrator oder Eigentümer des Elements ist.

Führen Sie dieses Beispiel aus:

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

const visitors = [
  { name: "Ava", age: 20, hasTicket: true, isAdmin: false, isOwner: false },
  { name: "Ben", age: 16, hasTicket: true, isAdmin: false, isOwner: true },
  { name: "Cy", age: 30, hasTicket: false, isAdmin: true, isOwner: false }
];

for (const visitor of visitors) {
  if (visitor.age >= 18 && visitor.hasTicket) {
    console.log(`${visitor.name}: entry allowed`);
  }

  if (visitor.isAdmin || visitor.isOwner) {
    console.log(`${visitor.name}: can manage the item`);
  }
}

Ava: entry allowed
Ben: can manage the item
Cy: can manage the item

Die Bedingungen verwenden boolesche Eigenschaften und einen numerischen Vergleich. So lässt sich jeder Teil einzeln betrachten, bevor der Operator die Ergebnisse verknüpft. Ersetzen Sie in einem echten Programm die Beispielwerte durch Werte aus Ihrer Anwendung.

&& und || mit Gruppierung und Vorrang sicher kombinieren

Sie können beide Operatoren in einer Bedingung kombinieren. JavaScript wertet && vor || aus. Daher bedeutet isMember || hasCoupon && cartTotal >= 50 dasselbe wie isMember || (hasCoupon && cartTotal >= 50). Die Bedingung ist erfüllt, wenn jemand Mitglied ist oder kein Mitglied ist, aber einen Gutschein hat und der Warenkorbwert mindestens 50 beträgt.

Setzen Sie Klammern, wenn die Regel anders gruppiert werden soll oder dadurch leichter verständlich wird. Beispielsweise verlangt (isMember || hasCoupon) && cartTotal >= 50 den Mindestwert sowohl für Mitglieder als auch für Personen mit Gutschein. Diese beiden Ausdrücke sind nicht gleichbedeutend. Die MDN-Referenz zur Operatorrangfolge beschreibt den Vorrang von JavaScript-Operatoren.

Verwenden Sie einen strikten Gleichheitsvergleich wie status === "ready", wenn Sie einen Wert mit einer bestimmten Zahl oder Zeichenfolge vergleichen. So vermeiden Sie die Typumwandlung, die bei einem nicht strikten Vergleich (==) erfolgt. Logische Operatoren werten außerdem bedingt aus: && wertet den rechten Operanden nicht aus, wenn der linke falsch ist, und || überspringt den rechten Operanden, wenn der linke wahr ist. Das ist bei abgesicherten Prüfungen nützlich, etwa bei user !== null && user !== undefined && user.active.

if...else if verwenden, wenn Bedingungen unterschiedliche Aktionen erfordern

Eine einzelne if-Bedingung verknüpft Prüfungen für eine Aktion. Soll ein Wert zwischen mehreren unterschiedlichen Aktionen auswählen, schreiben Sie eine if...else if...else-Kette. JavaScript prüft die Zweige der Reihe nach, führt den ersten Zweig mit einer erfüllten Bedingung aus und überspringt die übrigen Zweige dieser Kette. Der abschließende else-Zweig ist optional und behandelt Werte, auf die keine vorherige Bedingung zutraf.

Ein Punktestand lässt sich beispielsweise anhand von Bedingungen wie score >= 90, score >= 70 und score >= 50 in Stufen einteilen. Prüfen Sie die höchste Stufe zuerst: Bei einem Punktestand von 95 sind zwar alle drei Vergleiche erfüllt, aber die Kette führt nur den ersten passenden Zweig aus. Das folgende Beispiel weist jeder Stufe eine andere Aktionsbezeichnung zu:

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

const score = 95;
let action;

if (score >= 90) {
  action = "excellent";
} else if (score >= 70) {
  action = "pass";
} else if (score >= 50) {
  action = "review";
} else {
  action = "retry";
}

Bei einem Wert von 95 für score erhält action den Wert "excellent". Obwohl der Punktestand auch die niedrigeren Schwellenwerte erreicht, überspringt JavaScript nach dem ersten Treffer die übrigen Zweige. Bei mehreren separaten if-Anweisungen könnten für denselben Punktestand mehrere Aktionen ausgeführt werden.

Stimmen Sie die Bedingung jedes Zweigs auf die zugehörige Aktion ab. Der Zweig score >= 70 gilt beispielsweise für Punktestände ab 70 und unter 90, weil zuerst die höhere Stufe geprüft wird. Für genaue Werte verwenden Sie ===; für einen direkt geprüften Wertebereich verknüpfen Sie Vergleiche mit &&, etwa mit score >= 70 && score < 90.