[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/de/docs/Web/JavaScript/Guide/Control_flow_and_error_handling [Back]  [Original]

Kontrollfluss und Fehlerbehandlung - JavaScript | MDN

Dieser Inhalt wurde automatisch aus dem Englischen bersetzt, und kann Fehler enthalten. Erfahre mehr ber dieses Experiment.

View in English Always switch to English

Kontrollfluss und Fehlerbehandlung

JavaScript untersttzt einen kompakten Satz von Anweisungen, insbesondere Kontrollflussanweisungen, die Sie verwenden knnen, um eine groe Menge an Interaktivitt in Ihrer Anwendung zu integrieren. Dieses Kapitel bietet einen berblick ber diese Anweisungen.

Die JavaScript-Referenz enthlt umfassende Informationen ber die Anweisungen in diesem Kapitel. Das Semikolon (;) wird verwendet, um Anweisungen im JavaScript-Code zu trennen.

Jeder JavaScript-Ausdruck ist auch eine Anweisung. Siehe Ausdrcke und Operatoren fr vollstndige Informationen ber Ausdrcke.

In diesem Artikel

Block-Anweisung

Die grundlegendste Anweisung ist eine Block-Anweisung, die dazu verwendet wird, Anweisungen zu gruppieren. Der Block wird durch ein Paar geschweifter Klammern begrenzt:

js
{
  statement1;
  statement2;
  // 
  statementN;
}

Beispiel

Block-Anweisungen werden hufig mit Kontrollflussanweisungen (if, for, while) verwendet.

js
while (x < 10) {
  x++;
}

Hier ist { x++; } die Block-Anweisung.

Hinweis: var-Deklarierte Variablen sind nicht block-bergreifend, sondern gelten fr die umgebende Funktion oder das Skript, und ihre Auswirkungen bestehen ber den Block hinaus. Zum Beispiel:

js
var x = 1;
{
  var x = 2;
}
console.log(x); // 2

Dies gibt 2 aus, da die var x-Anweisung innerhalb des Blocks im gleichen Gltigkeitsbereich wie die var x-Anweisung vor dem Block liegt. (In C oder Java htte der quivalente Code 1 ausgegeben.)

Dieser Geltungsbereichseffekt kann durch die Verwendung von let oder const gemildert werden.

Bedingte Anweisungen

Eine bedingte Anweisung ist eine Reihe von Befehlen, die ausgefhrt werden, wenn eine festgelegte Bedingung zutrifft. JavaScript untersttzt zwei bedingte Anweisungen: if...else und switch.

if...else-Anweisung

Verwenden Sie die if-Anweisung, um eine Anweisung auszufhren, wenn eine logische Bedingung true ist. Verwenden Sie die optionale else-Klausel, um eine Anweisung auszufhren, wenn die Bedingung false ist.

Eine if-Anweisung sieht so aus:

js
if (condition) {
  statement1;
} else {
  statement2;
}

Hier kann die condition jeder Ausdruck sein, der zu true oder false ausgewertet wird. (Siehe Boolean fr eine Erklrung, was zu true und false ausgewertet wird.)

Wenn condition zu true ausgewertet wird, wird statement1 ausgefhrt. Andernfalls wird statement2 ausgefhrt. statement1 und statement2 knnen jede Anweisung sein, einschlielich weiterer geschachtelter if-Anweisungen.

Sie knnen die Anweisungen auch mit else if kombinieren, um mehrere Bedingungen in Folge zu testen, wie folgt:

js
if (condition1) {
  statement1;
} else if (condition2) {
  statement2;
} else if (conditionN) {
  statementN;
} else {
  statementLast;
}

Bei mehreren Bedingungen wird nur die erste logische Bedingung ausgefhrt, die zu true ausgewertet wird. Um mehrere Anweisungen auszufhren, gruppieren Sie sie in einer Block-Anweisung ({ /* */ }).

Beste Praxis

Im Allgemeinen ist es eine gute Praxis, immer Block-Anweisungen zu verwenden, insbesondere wenn if-Anweisungen geschachtelt werden:

js
if (condition) {
  // Statements for when condition is true
  // 
} else {
  // Statements for when condition is false
  // 
}

Im Allgemeinen ist es eine gute Praxis, kein if...else mit einer Zuweisung wie x = y als Bedingung zu haben:

js
if (x = y) {
  // statements here
}

In dem seltenen Fall, dass Sie etwas Derartiges tun mchten, hat die while-Dokumentation einen Abschnitt Verwendung einer Zuweisung als Bedingung mit Anleitungen zu einer allgemeinen Best-Practice-Syntax, die Sie kennen und befolgen sollten.

Falsy-Werte

Die folgenden Werte werden zu false ausgewertet (auch bekannt als Falsy Werte):

  • false
  • undefined
  • null
  • 0
  • NaN
  • der leere String ("")

Alle anderen Werteeinschlielich aller Objektewerden zu true ausgewertet, wenn sie an eine bedingte Anweisung bergeben werden.

Hinweis: Verwechseln Sie nicht die primitiven booleschen Werte true und false mit den wahrheitsgemen und falschen Werten des Boolean-Objekts!

Zum Beispiel:

js
const b = new Boolean(false);
if (b) {
  // diese Bedingung wird zu true ausgewertet
}
if (b == true) {
  // diese Bedingung wird zu false ausgewertet
}

Beispiel

Im folgenden Beispiel gibt die Funktion checkData true zurck, wenn die Anzahl der Zeichen in einem Text-Objekt drei betrgt. Andernfalls wird eine Meldung angezeigt und es wird false zurckgegeben.

js
function checkData() {
  if (document.form1.threeChar.value.length === 3) {
    return true;
  }
  alert(
    `Enter exactly three characters. ${document.form1.threeChar.value} is not valid.`,
  );
  return false;
}

switch-Anweisung

Eine switch-Anweisung ermglicht es einem Programm, einen Ausdruck zu evaluieren und zu versuchen, den Wert des Ausdrucks mit einem case-Label abzugleichen. Wenn eine bereinstimmung gefunden wird, fhrt das Programm die zugehrige Anweisung aus.

Eine switch-Anweisung sieht so aus:

js
switch (expression) {
  case label1:
    statements1;
    break;
  case label2:
    statements2;
    break;
  // 
  default:
    statementsDefault;
}

JavaScript wertet die obige switch-Anweisung wie folgt aus:

  • Das Programm sucht zuerst nach einer case-Klausel mit einem Label, das mit dem Wert von expression bereinstimmt, und bertrgt dann die Kontrolle auf diese Klausel, wobei die zugehrigen Anweisungen ausgefhrt werden.
  • Wenn kein bereinstimmendes Label gefunden wird, sucht das Programm nach der optionalen default-Klausel:
    • Wenn eine default-Klausel gefunden wird, bertrgt das Programm die Kontrolle auf diese Klausel und fhrt die zugehrigen Anweisungen aus.
    • Wenn keine default-Klausel gefunden wird, setzt das Programm die Ausfhrung bei der Anweisung nach dem Ende von switch fort.
    • (Konventionell wird die default-Klausel als letzte Klausel geschrieben, sie muss jedoch nicht so sein.)

break-Anweisungen

Die optionale break-Anweisung, die jeder case-Klausel zugeordnet ist, stellt sicher, dass das Programm aus switch ausschert, sobald die bereinstimmende Anweisung ausgefhrt wurde, und dann die Ausfhrung bei der Anweisung nach switch fortsetzt. Wenn break weggelassen wird, setzt das Programm die Ausfhrung innerhalb der switch-Anweisung fort (und wird die Anweisungen unter dem nchsten case und so weiter ausfhren).

Beispiel

Im folgenden Beispiel, wenn fruitType mit "Bananas" bereinstimmt, wird das Programm den Wert mit case "Bananas" abgleichen und die zugehrige Anweisung ausfhren. Wenn break angetroffen wird, verlsst das Programm die switch und setzt die Ausfhrung ab der Anweisung nach switch fort. Wenn break weggelassen wrde, wrde die Anweisung fr case "Cherries" ebenfalls ausgefhrt.

js
switch (fruitType) {
  case "Oranges":
    console.log("Oranges are $0.59 a pound.");
    break;
  case "Apples":
    console.log("Apples are $0.32 a pound.");
    break;
  case "Bananas":
    console.log("Bananas are $0.48 a pound.");
    break;
  case "Cherries":
    console.log("Cherries are $3.00 a pound.");
    break;
  case "Mangoes":
    console.log("Mangoes are $0.56 a pound.");
    break;
  case "Papayas":
    console.log("Papayas are $2.79 a pound.");
    break;
  default:
    console.log(`Sorry, we are out of ${fruitType}.`);
}
console.log("Is there anything else you'd like?");

Anweisungen zur Ausnahmebehandlung

Sie knnen Ausnahmen mit der throw-Anweisung auslsen und sie mit den try...catch-Anweisungen behandeln.

Ausnahmetypen

Fast jedes Objekt kann in JavaScript geworfen werden. Dennoch sind nicht alle geworfenen Objekte gleich. Whrend es blich ist, Zahlen oder Zeichenfolgen als Fehler zu werfen, ist es hufig effektiver, eine der speziell fr diesen Zweck erstellten Ausnahmetypen zu verwenden:

throw-Anweisung

Verwenden Sie die throw-Anweisung, um eine Ausnahme auszulsen. Eine throw-Anweisung gibt den zu werfenden Wert an:

js
throw expression;

Sie knnen jeden Ausdruck werfen, nicht nur Ausdrcke eines bestimmten Typs. Der folgende Code wirft mehrere Ausnahmen verschiedener Typen:

js
throw "Error2"; // String type
throw 42; // Number type
throw true; // Boolean type
throw {
  toString() {
    return "I'm an object!";
  },
};

try...catch-Anweisung

Die try...catch-Anweisung markiert einen Block von Anweisungen zum Ausprobieren und gibt eine oder mehrere Antworten an, falls eine Ausnahme ausgelst wird. Wenn eine Ausnahme ausgelst wird, fngt die try...catch-Anweisung sie ab.

Die try...catch-Anweisung besteht aus einem try-Block, der eine oder mehrere Anweisungen enthlt, sowie einem catch-Block, der Anweisungen enthlt, die angeben, was zu tun ist, wenn im try-Block eine Ausnahme ausgelst wird.

Mit anderen Worten, Sie mchten, dass der try-Block erfolgreich istwenn er jedoch nicht erfolgreich ist, mchten Sie, dass die Kontrolle auf den catch-Block bergeht. Wenn im try-Block (oder in einer Funktion, die aus dem try-Block aufgerufen wird) eine Ausnahme ausgelst wird, wechselt die Kontrolle sofort in den catch-Block. Wenn im try-Block keine Ausnahme ausgelst wird, wird der catch-Block bersprungen. Der finally-Block wird nach den try- und catch-Blcken, jedoch vor den Anweisungen nach der try...catch-Anweisung ausgefhrt.

Das folgende Beispiel verwendet eine try...catch-Anweisung. Das Beispiel ruft eine Funktion auf, die einen Monatsnamen aus einem Array basierend auf dem bergebenen Wert abruft. Wenn der Wert keiner Monatsnummer (1 12) entspricht, wird eine Ausnahme mit dem Wert 'Ungltiger Monatscode' ausgelst, und die Anweisungen im catch-Block setzen die monthName-Variable auf 'unbekannt'.

js
function getMonthName(mo) {
  mo--; // Adjust month number for array index (so that 0 = Jan, 11 = Dec)
  // prettier-ignore
  const months = [
    "Jan", "Feb", "Mar", "Apr", "May", "Jun",
    "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
  ];
  if (!months[mo]) {
    throw new Error("Invalid month code"); // throw keyword is used here
  }
  return months[mo];
}

try {
  // statements to try
  monthName = getMonthName(myMonth); // function could throw exception
} catch (e) {
  monthName = "unknown";
  logMyErrors(e); // pass exception object to error handler (i.e. your own function)
}

Der catch-Block

Sie knnen einen catch-Block verwenden, um alle Ausnahmen zu behandeln, die mglicherweise im try-Block generiert werden.

js
catch (exception) {
  statements
}

Der catch-Block gibt einen Bezeichner an (exception im vorhergehenden Beispiel), der den vom throw-Statement angegebenen Wert hlt. Sie knnen diesen Bezeichner verwenden, um Informationen ber die geworfene Ausnahme zu erhalten.

JavaScript erstellt diesen Bezeichner, wenn der catch-Block betreten wird. Der Bezeichner existiert nur fr die Dauer des catch-Blocks. Wenn der catch-Block die Ausfhrung beendet hat, existiert der Bezeichner nicht mehr.

Zum Beispiel wirft der folgende Code eine Ausnahme. Wenn die Ausnahme auftritt, wechselt die Kontrolle in den catch-Block.

js
try {
  throw "myException"; // generates an exception
} catch (err) {
  // statements to handle any exceptions
  logMyErrors(err); // pass exception object to error handler
}

Hinweis: Beim Protokollieren von Fehlern in die Konsole innerhalb eines catch-Blocks wird empfohlen, console.error() statt console.log() zu verwenden. Es formatiert die Nachricht als Fehler und fgt sie der Liste von Fehlermeldungen hinzu, die von der Seite generiert werden.

Der finally-Block

Der finally-Block enthlt Anweisungen, die nach den try- und catch-Blcken ausgefhrt werden. Zustzlich wird der finally-Block vor dem Code ausgefhrt, der der try...catch...finally-Anweisung folgt.

Es ist auch wichtig zu beachten, dass der finally-Block unabhngig davon, ob eine Ausnahme ausgelst wird, ausgefhrt wird. Wenn eine Ausnahme ausgelst wird, werden die Anweisungen im finally-Block dennoch ausgefhrt, selbst wenn kein catch-Block die ausgelste Ausnahme behandelt.

Sie knnen den finally-Block verwenden, um Ihr Skript bei Auftreten einer Ausnahme sanft fehlschlagen zu lassen. Beispielsweise mssen Sie mglicherweise eine Ressource freigeben, die Ihr Skript gebunden hat.

Im folgenden Beispiel wird eine Datei geffnet und dann werden Anweisungen ausgefhrt, die die Datei verwenden. (Serverseitiges JavaScript erlaubt Ihnen den Zugriff auf Dateien.) Wenn whrend der Datei geffnet ist, eine Ausnahme ausgelst wird, schliet der finally-Block die Datei, bevor das Skript fehlschlgt. Die Verwendung von finally stellt hier sicher, dass die Datei niemals offen bleibt, selbst wenn ein Fehler auftritt.

js
openMyFile();
try {
  writeMyFile(theData); // This may throw an error
} catch (e) {
  handleError(e); // If an error occurred, handle it
} finally {
  closeMyFile(); // Always close the resource
}

Wenn der finally-Block einen Wert zurckgibt, wird dieser Wert zum Rckgabewert der gesamten try...catch...finally-Produktion, unabhngig von return-Anweisungen in den try- und catch-Blcken:

js
function f() {
  try {
    console.log(0);
    throw "bogus";
  } catch (e) {
    console.log(1);
    // This return statement is suspended
    // until finally block has completed
    return true;
    console.log(2); // not reachable
  } finally {
    console.log(3);
    return false; // overwrites the previous "return"
    // `f` exits here
    console.log(4); // not reachable
  }
  console.log(5); // not reachable
}
console.log(f()); // 0, 1, 3, false

Das berschreiben von Rckgabewerten durch den finally-Block gilt auch fr Ausnahmen, die im catch-Block ausgelst oder erneut ausgelst werden:

js
function f() {
  try {
    throw "bogus";
  } catch (e) {
    console.log('caught inner "bogus"');
    // This throw statement is suspended until
    // finally block has completed
    throw e;
  } finally {
    return false; // overwrites the previous "throw"
    // `f` exits here
  }
}

try {
  console.log(f());
} catch (e) {
  // this is never reached!
  // while f() executes, the `finally` block returns false,
  // which overwrites the `throw` inside the above `catch`
  console.log('caught outer "bogus"');
}

// Logs:
// caught inner "bogus"
// false

Verschachtelung von try...catch-Anweisungen

Sie knnen eine oder mehrere try...catch-Anweisungen verschachteln.

Wenn ein innerer try-Block keinen entsprechenden catch-Block hat:

  1. muss er einen finally-Block enthalten, und
  2. der catch-Block der umgebenden try...catch-Anweisung wird auf eine bereinstimmung geprft.

Fr weitere Informationen siehe verschachtelte try-Blcke auf der try...catch-Referenzseite.

Nutzung von Error-Objekten

Abhngig von der Art des Fehlers knnen Sie mglicherweise die name- und message-Eigenschaften verwenden, um eine genauere Nachricht zu erhalten.

Die name-Eigenschaft gibt die allgemeine Klasse des Error an (wie DOMException oder Error), whrend message normalerweise eine krzere Nachricht bietet als die, die man erhlt, indem man das Error-Objekt in einen String konvertiert.

Wenn Sie Ihre eigenen Ausnahmen werfen, um diese Eigenschaften zu nutzen (zum Beispiel, wenn Ihr catch-Block nicht zwischen Ihren eigenen Ausnahmen und Systemausnahmen unterscheidet), knnen Sie den Error-Konstruktor verwenden.

Zum Beispiel:

js
function doSomethingErrorProne() {
  if (ourCodeMakesAMistake()) {
    throw new Error("The message");
  }
  doSomethingToGetAJavaScriptError();
}

try {
  doSomethingErrorProne();
} catch (e) {
  // Now, we actually use `console.error()`
  console.error(e.name); // 'Error'
  console.error(e.message); // 'The message', or a JavaScript error message
}

Web Proxy Viewer  |  New URL  |  Original Page