JS箭头函数回调中括号、大括号用法区别及写法正确性解析

你观察到的写法差异属于ES6箭头函数的标准语法范畴，和React本身没有绑定关系，在所有支持ES6的JS运行环境里规则都是一致的。你列出的4种写法并非全部合规，具体规则和行为如下：

各写法的合规性与运行行为 #

• Array.map(el=> return el.name);
  语法错误，代码无法运行。箭头函数省略大括号时属于简洁函数体，语法规则是直接在箭头后跟随要返回的表达式，默认隐式返回表达式结果，不能手动加return关键字——return是函数语句，只能存在于大括号包裹的块级函数体中，放在简洁体里会直接触发JS解析错误。
• Array.map((el)=> return el.name);
  语法错误，代码无法运行。单参数外层加括号本身是合法语法（TS类型标注、参数加默认值、参数解构场景下必须加括号），但错误原因和第一种完全一致：简洁函数体中错误使用了return语句，和参数是否加括号无关。
• Array.map((el)=> {return el.name});
  完全合规，运行符合预期。这是箭头函数的完整写法：参数用括号包裹，大括号包裹块级函数体，函数体内显式写return返回结果。运行时会遍历数组每一项，返回由所有元素的name属性组成的新数组。
• Array.map(el=> {return el.name});
  完全合规，运行符合预期。和第三种写法的运行逻辑完全一致，唯一区别是单参数场景下省略了参数外层的括号——JS语法允许箭头函数在参数无默认值、无解构、无类型标注且参数个数为1时省略参数括号，属于合法简写。

通用安全写法推荐 #

如果想完全规避语法记忆成本，避免各种简写带来的解析错误，优先使用参数统一加括号、大括号包裹函数体、显式写return的完整写法即可，也就是上面提到的第三种写法：

Array.map((el) => {
  // 支持写任意多行逻辑、条件判断、临时变量，不会因为逻辑扩展触发语法错
  return el.name
})

这种写法的兼容性最强：

• 不管参数是1个还是多个，不管参数需要加默认值、解构、TS类型标注，括号包裹参数的写法永远合法，不会因为参数形式变化报错
• 大括号包裹的块级函数体同时兼容单行返回和多行逻辑，不用纠结隐式返回的规则，也不会出现“想加逻辑忘了补大括号”“写了return忘了加大括号”的低级错误

补充：如果你确实想用更短的隐式返回写法，正确格式是箭头后直接跟返回表达式，不要加return，比如Array.map(el => el.name)；如果要隐式返回对象字面量，需要给对象加小括号包裹避免和块级体混淆，比如Array.map(el => ({ name: el.name }))，但这类简写对新手不友好，容易写错，熟悉语法规则前优先用完整写法更稳妥。

内容的提问来源于stack exchange，提问作者Germán