Warum gibt eine JavaScript-Funktion „Undefiniert' zurück, wenn zwischen der Return-Anweisung und dem zurückgegebenen Objekt ein Zeilenumbruch auftritt?

JavaScript-Funktion gibt undefiniert zurück, wenn ein Zeilenumbruch zwischen Return-Anweisung und Objekt auftritt

In JavaScript wird von einer Funktion erwartet, dass sie ein Objekt zurückgibt, wenn Auf die Return-Anweisung folgt direkt die Objektdefinition, wie im folgenden Beispiel zu sehen ist:

<code class="javascript">function foo1() {
  return { msg: "hello1" };
}</code>

console.log(JSON.stringify(foo1())); // Ausgabe: { msg: "hello1" }
Wenn jedoch ein Zeilenumbruch die Return-Anweisung von der Objektdefinition trennt, gibt die Funktion undefiniert zurück, wie unten gezeigt:

<code class="javascript">function foo2() {
 return
 { msg: "hello2" };
}</code>

console.log (JSON.stringify(foo2())); // Ausgabe: undefiniert

Dieses Verhalten tritt aufgrund des ASI-Mechanismus (Automatic Semicolon Insertion) in JavaScript auf. ASI geht in bestimmten Kontexten von Semikolons aus, um die ordnungsgemäße Ausführung und Interpretation des Codes sicherzustellen. Im Fall von foo2() wird der Zeilenumbruch als Semikolon interpretiert, das die Return-Anweisung beendet und eine leere Anweisung vor der Objektdefinition einleitet.

Lösung

Um dieses Problem zu beheben, können Sie einen Gruppierungsoperator verwenden, um sicherzustellen, dass die Rückgabeanweisung und die Objektdefinition als ein einziger Ausdruck ausgewertet werden. Dies verhindert, dass ASI eingreift:

<code class="javascript">function foo2() {
  return ({ msg: "hello2" });
}</code>

Ästhetische Überlegungen

Obwohl es wichtig ist, ASI-Probleme zu vermeiden, sollten Sie beim Schreiben Ihres Codes möglicherweise ästhetische Faktoren berücksichtigen. Einige Entwickler bevorzugen es, Ausdrücke aus Gründen der Übersichtlichkeit zu gruppieren oder die Struktur ihres Codes hervorzuheben. Zum Beispiel:

<code class="javascript">return ([
  "ul",
  ["li",
    ["span", {class: "name"}, this.name],
    ["span", {id: "x"}, "x"]
  ]
]);</code>

oder

<code class="javascript">function() {
  return (
    doSideEffects(),
    console.log("this is the second side effect"),
    1 + 1
  );
}</code>

In diesen Beispielen wird der Gruppierungsoperator verwendet, um die Ausdrücke organisiert zu halten und die Lesbarkeit zu verbessern.

Das obige ist der detaillierte Inhalt vonWarum gibt eine JavaScript-Funktion „Undefiniert' zurück, wenn zwischen der Return-Anweisung und dem zurückgegebenen Objekt ein Zeilenumbruch auftritt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!