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 主體）。