JavaScript中带大括号与小括号的箭头函数差异解析

嘿，这个问题戳中了箭头函数的一个常见迷惑点，我来给你拆解清楚～

核心差异：大括号是函数体，小括号对应隐式返回 #

箭头函数有两种常见的语法形式，本质区别在于是否需要显式写return，以及能容纳的代码量：

1. 带大括号{}的写法（比如你的Test1） #

const Test1 = () => { console.log('test1') }

这是完整的函数体形式，和普通function定义的函数体完全一样：

• 大括号里可以写任意多条语句，比如声明变量、循环、条件判断都没问题；
• 如果需要函数返回某个值，必须手动写return关键字，不然函数默认返回undefined；
• 你的Test1调用后会执行console.log('test1')，但因为没写return，所以函数本身返回undefined。

等价的普通函数写法是：

const Test1 = function() {
  console.log('test1');
};

2. 带小括号()的写法（比如你的Test2） #

const Test2 = () => ( console.log('test2') )

这是隐式返回的简写形式，这里的小括号是用来包裹单个表达式的：

• 箭头函数会自动返回这个表达式的执行结果；
• 你这里的console.log('test2')本身是一个“无有效返回值”的表达式（它执行后返回undefined），所以Test2()调用时会打印'test2'，函数返回值也是undefined；
• 其实这种写法可以省略小括号，直接写成const Test2 = () => console.log('test2')，效果完全一样——小括号在这里只是起了分组的作用，让代码看起来更清晰而已。

如果是有返回值的表达式，比如：

const add = (a, b) => (a + b)

就等价于：

const add = (a, b) => { return a + b; }

这时候小括号的作用就是让箭头函数隐式返回a + b的结果，不用写return。

一句话总结 #

• 用{}：写多行代码，需要返回值就加return；
• 用()（或直接写表达式）：单个表达式，自动返回表达式结果；如果是像console.log这种无返回的操作，两种写法执行效果一致，只是语法风格不同。

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