為什麼 JavaScript 函數在 Return 語句和回傳物件之間出現換行時會回傳 Undefined？

當Return 語句與物件之間發生換行時，JavaScript 函數傳回未定義

在JavaScript 中，函數應在下列情況下回傳物件： return 語句後面直接跟有物件定義，如下例所示：

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

console.log(JSON.stringify(foo1())); // Output: { msg: "hello1" }
但是，如果return 語句與物件定義之間以換行符號分隔，則函數傳回undefined，如下所示：

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

console.log (JSON.stringify(foo2())) ; // 輸出：undefined

此行為是由於JavaScript 中的自動分號插入(ASI) 機製造成的。 ASI 在某些上下文中採用分號來確保程式碼的正確執行和解釋。對於 foo2()，換行符號被解釋為分號，它終止 return 語句並在物件定義之前引入一個空語句。

解決方案

要解決此問題，您可以使用分組運算子來確保將 return 語句和物件定義作為單一表達式進行計算。這可以防止 ASI 介入：

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

美觀考慮

雖然避免 ASI 問題很重要，但您在編寫程式碼時可能需要考慮美觀因素。為了清晰起見或強調程式碼的結構，一些開發人員更喜歡將表達式分組。例如：

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

或

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

在這些範例中，分組運算子用於保持表達式的組織性並提高可讀性。

以上是為什麼 JavaScript 函數在 Return 語句和回傳物件之間出現換行時會回傳 Undefined？的詳細內容。更多資訊請關注PHP中文網其他相關文章！