Javascript 不带花括号的箭头函数

我对ES6和React都是新手，我一直看到arrow函数。为什么有些箭头函数在胖箭头后使用大括号，有些函数使用括号？ 例如：

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

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

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

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

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

---

括号返回单个值，大括号执行多行代码

您的示例看起来很混乱，因为它使用的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

---

还可以使用大括号防止单行箭头函数返回值，或者让下一个开发人员清楚地看到，在这种情况下，单行箭头函数不应该返回任何值

例如：

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

---

在第一个示例中，arrow函数的右侧显示由分组运算符括起的单个表达式：

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

因此，使用语句是一个很好的开始，因为其中包含多行代码，如果函数打算返回值，则需要使用“return”：

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

如果要以最短的形式返回空对象：

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

---

实际上，在公文包中，当有人在arrow函数声明中使用大括号时，它等于：

const arrow = number => number + 1;

|||

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

|||    

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

|||

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

---

圆括号在箭头函数中用于返回对象

（）=>（{name:'YourName'}）//这将返回一个对象

这相当于

（）=>{
返回{name:'YourName'}
}

回答重复的帖子（），仅供他人参考：

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

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

供参考：

另请注意：

---

如果要将对象文字作为fat arrow函数的结果返回，则必须将对象括在括号中，例如，

myFunc=（）=>（{data:“hello”}）

。如果省略括号，则会收到错误，因为生成工具将假定对象文字的大括号是函数体的开始和结束。

括号有一个隐式返回语句，而大括号如果在箭头后使用大括号定义函数体，则需要显式返回语句。

函数体，必须使用“return”关键字才能返回某些内容

例如：

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

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

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

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

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

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

例如：

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

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

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

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

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

---

太棒了，谢谢你。这也有助于我理解其他一些错误。一旦我能接受，我会认为这是正确的。谢天谢地，davidOne还可以使用大括号来防止arrow函数返回值，或者使单行arrow函数不应该返回任何值。请查看我的答案，看一个例子（不能很好地将其格式化为注释）。我得到了GrayedFox的想法，然而，为什么有人甚至实现了这一点？对我来说似乎有点棘手，因为可能在一个特殊情况下，你不确定它应该是（）还是{}，所以我只能用大括号而不是括号来使用“return”？如果是，为什么？所以我只能用大括号而不是圆括号来表示“return”？如果是，为什么会这样？@vikramvi，请看，这只是一个简单的语法，当您的函数在执行上下文中没有任何内容时，只需使用较少的代码使其变得简单，

=>

不带花括号意味着

返回

，易于阅读，易于理解，包大小较小。看，这是纯粹的美。谢谢你的信息，我明白了；但我的问题是,；也可以将“return”与（）一起使用？@vikramvi，显然不是。