ES6 箭头函数的 return 语句中括号周围的括号有什么作用？答案

【问题标题】：What do parenthesis surrounding brackets in the return statement of an ES6 arrow function do?ES6 箭头函数的 return 语句中括号周围的括号有什么作用？
【发布时间】：2019-10-11 03:51:54
【问题描述】：

例如在 redux 操作中，我在某人的代码中看到过：

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

和：

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

它似乎起到暗示return 的作用，但我认为这已经暗示在粗箭头后面的箭头函数括号中。

括号({...}) 是做什么的？他们有必要吗？有没有其他方法可以完成同样的事情？

【问题讨论】：

这是在箭头函数中以简洁的主体返回对象的方式 - 请参阅 docs 查找 返回对象文字

标签： javascript ecmascript-6 arrow-functions

【解决方案1】：

当你写myFunction = value => ({prop: value}) 它返回对象{prop: value}，在这种情况下{} 是对象分隔符而不是“函数分隔符”

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

另一个例子：

当你想将数组的每个元素乘以 2 时，你可以这样写：

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

或

array.map(elem => elem * 2) //同样的结果

如果你想要一个带有() 的例如包装一个对象的文字：

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

console.log(output);

【讨论】：

【解决方案2】：

如果你用括号括起来，你会让你的函数返回一个对象字面量（因此你不需要 return 关键字）。如果不使用括号，则必须使用 return 关键字。

【讨论】：

【解决方案3】：

根据arrow function docs，

// 给函数体加上括号以返回一个对象字面量表达式：

参数 => ({foo: bar})

这意味着如果你想隐式返回一个对象，你必须把它用括号括起来。

如果没有这个，大括号内的代码将被视为函数体而不是对象（如您所愿）

以下是等价的：

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

【讨论】：

【解决方案4】：

在第一个示例中，{} 用于标识多行代码，这就是为什么需要返回才能获得 undefined 以外的内容。

在第二个示例中，{} 用于创建对象。

【讨论】：