Question

我是ES6和React的新手，我一直在看箭头功能。为什么有些箭头函数在胖箭头之后使用花括号而有些使用括号？例如：

const foo = (params) => (
    <span>
        <p>Content</p>
    </span>
);

VS

const handleBar = (e) => {
    e.preventDefault();
    dispatch('logout');
};

感谢您的帮助！

Answer 1

括号返回单个值，花括号正在执行多行代码。

你的例子看起来令人困惑，因为它使用的JSX看起来像多个“行”，但实际上只是编译成一个“元素”。

以下是一些例子，它们都做同样的事情：

const a = (who) => "hello " + who + "!";
const b = (who) => (
    "hello " + 
    who + 
    "!"
);
const c = (who) => {
  return "hello " + who + "!";
};

您还经常会看到围绕对象文字的括号，因为这是一种避免解析器将其视为代码块的方法：

const x = () => {} // Does nothing
const y = () => ({}) // returns an object

Answer 2

也可以使用花括号来防止单行箭头函数返回一个值 - 或者让下一个开发人员明白单行箭头函数不应该是，在这种情况下，返回任何东西

例如：

const myFunc = (stuff) => { someArray.push(stuff) }
const otherFunc = (stuff) => someArray.push(stuff)

console.log(myFunc())    // --> logs undefined
console.log(otherFunc()) // --> logs result of push which is new array length

Answer 3

实际上，在公文包中，当有人在箭头函数声明中使用花括号时，它等于以下内容：

const arrow = number => number + 1;

|||

const arrow = (number) => number + 1;

|||    

const arrow = (number) => ( number + 1 );

|||

const arrow = (number) => { return number + 1 };

Answer 4

在箭头函数中使用了括号来返回对象。

() => ({ name: 'YourName' })  // This will return an object

那等于

() => {
   return { name : 'YourName' }
}

Answer 5

括号中有一个隐式return语句，而花括号则需要一个显式return语句

Answer 6

如果你在箭头后面使用花括号来定义函数体，你必须使用'return'关键字来返回一些东西。

例如：

const myFun1 = (x) => {
    return x;
}; // It will return x

const myFun2 = (x) => {
    x;
}; // It will return nothing

如果使用括号，则无需提及“return”关键字。

例如：

const myFunc1 = (x) => x; // It will return x

const myFunc2 = (x) => (x); // It will also return x

Answer 7

在第一个示例中，箭头功能的右侧显示了一个由分组运算符括起来的单个表达式：

const foo = (params) => (
  <span>
    <p>Content</p>
  </span>
);

类似的情况如下：

const foo = (params) => (<span><p>Content</p></span>);

在上述情况下，使用单个表达式的区别是右侧是函数的返回值。

另一方面，如果您使用花括号，JavaScript会将其理解为声明：

const foo = (params) => {} // this is not an object being returned, it's just an empty statement

因此，using语句是您在其中包含代码（多行）的良好起点，并且如果该函数打算返回值，则需要使用“ return”：

const foo = (params) => {
    let value = 1; 
    return value;
}

如果您想以最短形式返回空对象：

const foo = (params) => ({})

See tests

Answer 8

要回答重复的帖子（question posted here），仅供其他人参考：

  var func = x => x * x;                  
    // concise body syntax, implied "return"

    var func = (x, y) => { return x + y; }; 
    // with block body, explicit "return" needed

以供参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Function_body

还请注意：如果要通过粗箭头函数返回对象文字，则必须将该对象括在括号中，例如myFunc = () => ({ data: "hello"})。如果省略括号，则会收到错误消息，因为构建工具将假定对象文字的花括号是函数主体的开头和结尾。

没有花括号的箭头功能

8 个答案: