如何正確從 ES6 箭頭函數傳回物件？

從ECMAScript 6 中的箭頭函數傳回物件

在ECMAScript 6 (ES6) 中，箭頭函數為定義函數提供了簡潔的文法.但是，當從箭頭函數傳回物件時，由於語法歧義，會出現常見的混亂。

以下程式碼片段將導致意外的行為：

p => {foo: "bar"}

此表達式將傳回未定義而不是預期的物件。為了解決這個問題，需要一組額外的花括號和 return 關鍵字：

p => { return {foo: "bar"}; }

這種方法確保花括號被解釋為物件文字，而不是函數的主體。

但是，這個額外的語法可能很麻煩。幸運的是，有一個更簡單的解決方案。透過將物件字面量括在括號中，可以解決歧義：

p => ({ foo: 'bar' })

透過此修改，大括號清楚地表示物件字面量，並且不需要 return 關鍵字。該技術可以應用於箭頭函數傳回的任何其他表達式，從而無需額外的語法開銷：

p => 10
p => 'foo'
p => true
p => [1,2,3]
p => null
p => /^foo$/

透過理解語法歧義並使用括號包裝技術，開發人員可以有效地傳回物件來自ECMAScript 6 中的箭頭函數。

以上是如何正確從 ES6 箭頭函數傳回物件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！