无大括号箭头函数中多表达式的使用实践及常见问题解析

作为一个喜欢深挖JavaScript边界用法的开发者，我之前也好奇过：箭头函数能不能靠最后一个表达式实现隐式返回？答案是肯定的，但这里有个很容易踩的坑——如果直接在箭头函数的作用域里定义变量，会抛出未识别标识符（指向doubleSum）的错误。

举个例子，如果你尝试这么写：

// 错误写法，会触发标识符未定义报错
const calculate = element => 
  const sum = element + 10;
  const doubleSum = sum * 2;
  sum + sum + element;

这时候JavaScript引擎会把第一行的const sum...当成箭头函数的隐式返回内容，但变量声明语句本身不能作为合法的返回值，后续的doubleSum也会因为作用域解析问题被判定为未定义。

解决办法其实很简单：把多个表达式用括号包裹起来，用逗号分隔，这样不需要大括号也能让函数依次执行多个步骤，最后自动返回最后一个表达式的结果：

// 正确写法
const calculate = element => (
  const sum = element + 10,
  const doubleSum = sum * 2,
  sum + sum + element // 这一行就是隐式返回的最终结果
);

如果追求极致简洁，也可以去掉换行（不过可读性会打折扣）：

const calculate = element => (sum = element + 10, doubleSum = sum * 2, sum + sum + element);

得承认，这确实不是箭头函数的理想使用场景——当逻辑超过一步时，带大括号的显式返回写法可读性要好得多，毕竟代码最终是写给人看的。但如果是简单的多步骤计算，这种写法确实能帮你利用箭头函数的隐式返回特性。

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