为什么我的箭头函数返回“未定义”？

Question

此问题旨在作为有关由于将单行/表达式箭头函数体语法与自动返回与其多行/块版本混淆而产生的问题的规范重复目标。

---

我有一个箭头函数来添加两个数字，但是当我调用它时，它返回undefined。为什么？

const add = (a, b) => {
  a + b
}

console.log(add(1, 2)) // expected: 3, actually: undefined

---

替代问题：

我的 React 组件应该使用 渲染列表项map，但列表仍为空。为什么？

<ul>
  {list.map(item => {
    <li>
      <a href="{item.url}">{item.name}</a>
    </li>
  })}
</ul>

Answer 1

箭头函数支持两种不同样式的主体：表达式和块。

如果提供的单个表达式（例如a + b）没有大括号{ }，则自动返回该表达式：

const add = (a, b) => a + b

如果提供了由 包围的块{ }，则它的工作方式类似于常规函数体，并且需要专用return语句来返回值：

const add = (a, b) => {
  return a + b
}

单表达式体通常用于以简洁的方式编写执行一个操作或条件的简单函数，如下例所示：

if (users.every(user => user.age >= 18)) { /* ... */ }

const emails = users.map(user => user.email)

const titleCased = string.replace(/\b\w/g, s => s.toUpperCase())

// in the following example, the return value is irrelevant
setTimeout(() => doStuff(1, 2, 3), 1000)

在大多数其他情况下，特别是如果您想在函数体中包含多个语句、循环或条件，则使用块。

请注意，即使没有块，如果它仍然是单个表达式，您也可以拥有跨越多行的函数体，但如果您出于可读性原因想将其转换为块，则一定不要忘记添加return（除非您的函数不是不应该返回任何东西）。

add现在，这就是函数返回的原因undefined- 它既没有单表达式主体（使其{ }成为块），也没有return主体中的任何语句。因此，发生的情况是对它a + b进行了求值，但结果不用于任何用途 - 它被丢弃并继续执行，到达函数末尾并返回，但没有任何返回值，因为没有给出任何返回值，即返回undefined。

在 React 的情况下，问题是一样的。您正在嵌入调用的返回值.map，该返回值应该是要呈现的更多内容的数组，但由于您的回调没有返回任何值，因此您将这些项目映射到多个undefined值并在最后呈现它。

不过，这里还有另一个问题：您可能经常需要从回调等函数返回的元素中包含多行map，但您会发现以下两个选项看起来都不太干净：

<ul>
  {list.map(item => <li>
    <a href="{item.url}">{item.name}</a>
  </li>)}
</ul>

<ul>
  {list.map(item => {
    return <li>
      <a href="{item.url}">{item.name}</a>
    </li>
  })}
</ul>

相反，通常所做的是将表达式括在括号中( )。最后它仍然是一个表达式，避免了额外return语句的需要，但使用起来要好得多：

<ul>
  {list.map(item => (
    <li>
      <a href="{item.url}">{item.name}</a>
    </li>
  ))}
</ul>

有关一般箭头函数的更多信息，请参阅此处。要了解箭头函数和常规函数之间的其他差异（例如 的不同行为this），请参阅此处。