javascript函数中的()和有啥区别？ [复制]

Posted 2023-02-21

【中文标题】javascript函数中的()和有啥区别？ [复制]

【英文标题】：What's the difference between () and in javascript functions? [duplicate]javascript函数中的()和有什么区别？ [复制]

【发布时间】：2019-01-17 07:14:28

【问题描述】：

这些函数似乎在 React 教程中可以互换使用，但无法弄清楚区别......或者何时使用哪个？

const SomeVal = () => 
    ...


const SomeVal = () => (
    ...
)

【问题讨论】：

第一个替换 ... 为您的函数应该运行的代码。

我假设您指的是箭头函数（() => 或 () => ()）。前者创建了一个块，因此箭头函数可以有多个语句。后者是包含在分组运算符中的表达式的隐式返回。

这是一个我想知道答案的问题。

@Li357 你应该把它作为答案，因为它就是答案。

【参考方案1】：

这些是根本不同的。以前的箭头函数语法 () => 允许您在箭头函数的主体内拥有多个语句，即：

() => 
  console.log('Hello!');
  return 'World!';

// When called, this logs Hello! and returns World!

但后者() => () 是一个箭头函数隐式返回括在括号中的表达式（称为分组运算符）。它没有明确允许多个语句：

() => (
  'World' // only one expression that is implicitly returned
  // Would work fine without parentheses (unless you want to return an object!)
)
// When called, this function returns 'World'

当然，您也可以创建一个不可读的箭头函数，使用逗号运算符执行多个操作：

() => (console.log('Hello!'), 'World!')

反应

我假设你在 React 无状态组件中看到了这一点：

const Comp = () => (
  <div>Hello World!</div>
);

此函数（组件只是函数）隐式返回<div> 元素。但是，使用，您可以进行一些中间计算，而不是立即返回：

const Comp = () => 
  const msg = 'Hello World!';
  return ( // Need to explicitly return here
    <div>msg</div>
  );

【讨论】：

具有格式的 IMO 的可读性并没有那么低，特别是如果它只有几条语句。我同意在生产代码中可能不实用，但对打高尔夫球/娱乐很有用

【参考方案2】：

arrow function 和 const fn = () => ... 创建一个代码块，您可以在其中包含多行代码。但是对于这种情况，您需要有一个 return 声明。

带有const fn = () => ( ... ); 的箭头函数支持单行代码并且return 语句是隐式的。函数周围的括号是可选的，因此您的函数可能看起来像

const sum = (a, b) => a + b;
const sum2 = (a, b) => (a + b);

const sumBlock = (a, b) =>  return a + b; 

本质上，两者都做同样的事情。但是，如果您只需要一条语句，后一种编写箭头函数的方式可以让您的代码稍微简洁一些。

【讨论】：

请注意，使用() 时也可以有多行，逗号分隔，最后一项是返回的内容（没有return 语句）。见developer.mozilla.org/en-US/docs/Web/javascript/Reference/…