Function 可以在没有花括号的情况下使用，并且不能与它们一起使用，为什么？

Question

我正在做 FreeCode 训练营的练习，这让我很困惑：

const squareList = arr =>
  arr
    .filter(num => num > 0 && num % parseInt(num) === 0)
    .map(num => Math.pow(num, 2));

const squaredIntegers = squareList([4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2]);

console.log(squaredIntegers);

这可以正常工作，但是如果我输入：

 const squareList = arr => {
      arr
        .filter(num => num > 0 && num % parseInt(num) === 0)
        .map(num => Math.pow(num, 2));
    }
    const squaredIntegers = squareList([4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2]);

    console.log(squaredIntegers);

在许多功能中通常使用的典型大括号，它不起作用。 为什么？

Answer 1

一个是一组statements （带花括号），另一个是expression

(param1, param2, …, paramN) => { statements } // needs to return something
(param1, param2, …, paramN) => expression
// equivalent to: => { return expression; }

所以当你使用第一种形式时，你需要从中return一些东西

所以在你的非工作情况下，它应该是一个return声明

const squareList = arr => {
     return arr
        .filter(num => num > 0 && num % parseInt(num) === 0)
        .map(num => Math.pow(num, 2));
    }

任何可以计算为值的代码单元都是一个表达式。

语句是执行特定操作的指令或指令集

更详细的解释在Mozilla 文档中

Answer 2

如果没有大括号，则会为您添加return 。

使用大括号，您需要自己添加。

---

const squareList = arr => {
    return arr
        .filter(num => num > 0 && num % parseInt(num) === 0)
        .map(num => Math.pow(num, 2));
}
const squaredIntegers = squareList([4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2]);

console.log(squaredIntegers);

将正常工作。

Answer 3

无论好坏，javascript 允许箭头函数为以下任一形式

args => expression

或者

args => function_body

因此，他们在老式 Javascript 闭包（ function (arglist...) {...} ）之间“跨越界限”，它们必须具有 ZC1C425268E68385D1AB5074C17A94F14 的主体，并且总是采用更多的纯函数式语言表达。

您拥有的工作示例的形式为args => expression ，但如果您在表达式周围加上花括号，它将被解释为args => function_body 。 但是没有 return 语句的 function 主体返回undefined 。 这很容易通过添加return关键字来解决，因为args => expression实际上是 function 的简写，它返回表达式的计算结果。

args => {return expression}

请注意，如果您想要一个箭头 function 的expression应该是 object 文字，那么这种语法歧义也会导致问题； 在那种情况下，你必须说

args => ({
    // object key/value pairs
})

（注意额外的 () 会阻止编译器认为您提供的是 function 主体）。