箭头函数体中大括号、直接表达式与圆括号的区别及特殊用法

三种箭头函数写法的核心区别 #

先明确箭头函数的两种基础函数体形式：

• 简洁体（无大括号）：() => 表达式，自动返回表达式结果，无需写return
• 块体（有大括号）：() => { 语句 }，必须显式写return才会返回值，否则默认返回undefined

逐个拆解你提到的写法：

1. let a = () => console.log("a"); #

属于简洁体写法，箭头后直接跟函数调用表达式console.log("a")。因为console.log本身返回undefined，所以调用a()时会输出日志，函数最终返回undefined。

2. let b = () => { console.log("b"); } #

属于块体写法，大括号包裹的是函数体语句。这里只执行console.log("b")，没有显式return，所以调用b()时同样输出日志，函数返回值也是undefined。

3. let c = () => (console.log("c")); #

这里的(...)是表达式分组运算符，作用是将内部内容作为一个整体表达式处理，本质和第一种写法完全等价。也就是说() => (表达式) 和 () => 表达式 没有逻辑区别，都是简洁体写法，自动返回表达式结果。

加括号的场景通常是为了代码清晰，或者避免返回对象字面量时的歧义（比如() => ({ key: value })，不加括号会被解析成块体），但在这个例子里，括号只是可选的分组写法，不改变执行逻辑。

特殊写法的核心：逗号运算符 #

你后面遇到的两种写法，本质都是利用了JavaScript的逗号运算符（,），规则非常明确：

• 从左到右依次执行每个操作数
• 最终返回最后一个操作数的结果

示例1：let c = () => (console.log("c1"), console.log("c2")); #

括号内是一个完整的逗号表达式：

1. 先执行console.log("c1")，输出第一条日志
2. 再执行console.log("c2")，输出第二条日志
3. 最后返回第二个console.log的结果undefined

这里的括号是必须的——如果去掉括号，箭头的优先级比逗号高，代码会被解析成(() => console.log("c1")), console.log("c2")，这就不是一个完整的箭头函数了。

示例2：let c = () => (1, 2, 3, 4 ,5); let x = c(); // 5 #

同样是逗号表达式：

1. 依次求值1、2、3、4（这些无副作用，仅完成求值）
2. 最后返回5，所以x的值为5

总结 #

• () => 表达式 和 () => (表达式) 是等价的简洁体写法，括号仅用于表达式分组
• () => { 语句 } 是块体写法，需显式return才会返回值
• 逗号运算符可依次执行多个操作数并返回最后一个的结果，常用于箭头函数简洁体中实现多语句执行+指定返回值

内容的提问来源于stack exchange，提问作者MrFrenzoid