函数可以在没有花括号的情况下工作，并且不能与它们一起工作，为什么？答案

【问题标题】：Function works withouth curly braces and doesn't work with them, why?函数可以在没有花括号的情况下工作，并且不能与它们一起工作，为什么？
【发布时间】：2020-08-18 05:54:08
【问题描述】：

我正在做 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);

在很多函数中正常使用的典型大括号，它不起作用。为什么？

【问题讨论】：

标签： javascript math functional-programming brackets curly-braces

【解决方案1】：

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

args => expression

或

args => function_body

因此，它们“跨越了界线”，介于必须具有函数体的老式 Javascript 闭包 (function (arglist...) {...}) 和更纯粹的函数式语言中的 lambda 之间，它们总是采用表达式。

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

args => {return expression}

请注意，如果您想要一个箭头函数，其expression 应该是一个对象字面量，那么这种语法歧义也会导致问题；在那种情况下你不得不说

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

（注意额外的 () 会阻止编译器认为您正在提供函数体）。

【讨论】：

【解决方案2】：

一个是一组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 docs

【讨论】：

【解决方案3】：

没有大括号，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);

会正常工作。

【讨论】：