在箭头函数中的箭头之后使用 () 或 {} 有什么区别？答案

【问题标题】：What is the difference between using () or {} after the arrow in an arrow function?在箭头函数中的箭头之后使用 () 或 {} 有什么区别？
【发布时间】：2020-12-25 16:52:51
【问题描述】：

我通常总是写一个箭头函数，当我需要它是多行的时，我会写“{}”。但是，我正在看一个教程，其中，他正在编写这个 useEffect 函数：

  useEffect(() => {
    if (chatId) {
      db.collection("chats")
        .doc(chatId)
        .collection("messages")
        .orderBy("timestamp", "desc")
        .onSnapshot(snapshot => (
          setMessages(snapshot.docs.map(doc=>({
            id:doc.id,
            data:doc.data()
          })))
        ));
    }
  }, []);

注意“快照”之后他有“=>（”而不是“=> {”还有snapshot.docs.map（doc=>（{其中有一个“（{”而不仅仅是一个“{”）。有人帮助我了解我在这里缺少什么？

【问题讨论】：

当你的箭头函数返回一个对象字面量时，你需要将它用括号括起来，以便编译器可以将它与函数区分开来。
在documentation 中解释，这通常是最好的起点

标签： javascript reactjs syntax arrow-functions

【解决方案1】：

括号和大括号的每次使用都会根据用途产生不同的结果。单独使用大括号不会返回结果，这可能是您想要的，或者您可以使用return 来返回结果。

useEffect(() => {
  // If I want to return a result, I need to use the return keyword
})

如果要立即从函数返回结果，可以将返回的结果直接放在=> 之后或用括号括起来。

// These are equivalent
snapshot => setMessages()
snapshot => (setMessages())

最后，如果你想从函数中返回一个对象，你可以用圆括号将大括号括起来。这表明您希望返回一个值，而不是像第一个示例那样返回任何内容。

doc => ({
  id:doc.id,
  data:doc.data()
})

【讨论】：

【解决方案2】：

当您在回调函数中运行多个命令时，您需要使用 {}。

其实snapshot => (setMessages(...))等价于snapshot => {return setMessages(...)}

【讨论】：

【解决方案3】：

传统函数

function (a) {
    return a + 100;
}

删除“函数”一词，并在参数和左方括号之间放置箭头

(a) => {
    return a + 100;
}

删除正文括号和单词“return” - 隐含返回。

(a) => a + 100;

删除参数括号

a => a + 100;

【讨论】：

【解决方案4】：

箭头函数的语法允许使用块{ } 或表达式。由于对象文字（表达式）也是{ }，因此块和对象文字之间存在歧义。所以标准规定{ } 在这种情况下始终是一个块。

使用({ }) 允许您使用括号表达式包装对象文字表达式，该括号表达式仅计算为对象文字。换句话说，一种绕过歧义限制的便捷方法。

当然，它首先允许块 ({ }) 的原因是为其表达式对应物提供不同的语义。块意味着您正在编写函数体，例如可以使用多个语句，就像使用 return 语句一样。它的表达式对应物只允许一个表达式。

【讨论】：