ES6 箭頭 function 的 return 語句中括號周圍的括號有什么作用？

Question

例如在 redux 動作中，我在某人的代碼中看到：

export const updateMessage = text => {
   return (dispatch) => {
     dispatch(updateChatMessage(text))
   }
}

和：

const updateChatMessage = text => ({
   type: types.someActionType,
   text
})

function 似乎暗示return ，但我認為這已經暗示在粗箭頭后面的箭頭函數括號中。

括號({...})有什么作用？ 他們有必要嗎？ 有沒有替代方法來完成同樣的事情？

Answer 1

當你寫myFunction = value => ({prop: value})它返回 object {prop: value} ，在這種情況下{}是 object 分隔符而不是“函數分隔符”

const updateChatMessage = text => ({
   type: types.someActionType,
   text
})

另一個例如：

當您想將數組的每個元素乘以 2 時，您可以編寫：

array.map(elem => {return elem * 2})

或者

array.map(elem => elem * 2) //同樣的結果

如果你想要一個帶有()的例如包裝 object 文字：

 let array = [{val: 2}, {val: 4}, {val: 8}, {val: 16}]; let output = array.map( ({val}) => ({val: val*2}) ); console.log(output);

Answer 2

如果你用括號括起來，你會讓你的 function 返回一個 object 文字（因此你不需要 return 關鍵字）。 如果不使用括號，則必須使用 return 關鍵字。

Answer 3

根據箭頭 function 文檔，

// 將 function 的主體用括號括起來以返回 object 文字表達式：

參數 => ({foo: bar})

這意味着如果您想隱式返回 object，則必須將其括在括號中。

沒有這個，大括號內的代碼將被視為 function 主體而不是 object （如您所願）

以下是等效的：

params => { return {foo: bar}} // Explicitly return an object (from function body)
params => ({foo: bar}) // Implicitly return an object by wrapping it with parentheses

Answer 4

在第一個示例中， {}用於標識多行代碼，這就是為什么需要 return 才能獲得undefined以外的內容。

在第二個示例中， {}用於創建 object。