ES6 箭头函数速查表

这里有一份备忘单，向您展示编写箭头函数的多种方法。



// Explicit Return, Multi-Line
a => {
  return a
}

// Explicit Return, Single-Line
a => { return a }

// Implicit Return, Multi-line
a => (
  a
)

// Implicit Return, Single-Line
a => a

// Multiple Parameters, Parentheses Required
(a, b) => a, b

隐性回报与显性回报

我们有几种编写箭头函数的方法。这是因为箭头函数可以具有“隐式返回”或“显式返回”关键字。

对于普通函数，如果要返回某些内容，必须使用return关键字。箭头函数也具备这一点。使用return关键字时，这被称为显式 return。然而，箭头函数更进一步，允许一种称为隐式 return的方式，此时return可以省略关键字。让我们来看一些例子🤓。

示例 A：正常函数



const sayHi = function(name) {
  return name
}

示例 B：带有显式返回值的箭头函数



// Multi-line
const sayHi = (name) => {
  return name
}

// Single-line
const sayHi = (name) => { return name }

示例 C：具有隐式返回的箭头函数



// Single-line
const sayHi = (name) => name

// Multi-line
const sayHi = (name) => (
  name
)

注意到区别了吗？当你使用花括号时{}，你需要明确声明返回值。但是，当你不使用花括号时，返回值return是隐含的，你不需要它。

这其实有个名字。像示例 b中那样使用花括号的，叫做块状代码体。而示例 c中的语法，叫做简洁代码体。

⭐️ 规则如下：

区块主体➡️return关键字是必需的
简洁的正文➡️return关键字是隐含的，不需要

括号

对于普通函数，我们总是需要使用括号。然而，对于箭头函数，如果只有一个参数，括号是可选的。

对于单个参数，括号是可选的



// Normal Function
const numbers = function(one) {}

// Arrow Function, with parentheses
const numbers = (one) => {}

// Arrow Function, without parentheses
const numbers = one => {}

多个参数需要使用括号



// Normal Function
const numbers = function(one, two) {}

// Arrow Function, with parentheses
const numbers = (one, two) => {}

⚠️ 箭头函数陷阱：返回对象

还记得我提到过不同的主体类型——简洁主体和块状主体。只是为了快速更新一下，以防你跳过了那部分（我有点难过，但并没有生气😝）。块状主体是指使用花括号并显式指定return。简洁主体是指不使用花括号，并且省略了return关键字。好了，现在你已经了解了，让我们回到正题🤯

让我们故意破坏我们的代码，这样你就可以吸取教训了哈哈



const me = () => { name: "samantha" };

me(); // undefined 😱

什么？！为什么它没有返回我的对象？别担心，我们用括号把它括起来就能解决这个问题。



const me = () => ({ name: "samantha" });

me(); // { name: "samantha" } ✅

⭐️ 规则如下：

为了简洁起见，将对象文字括在括号中

资源

MDN Web 文档 - 箭头函数

感谢阅读❤
打个招呼！Instagram | Twitter | Facebook | Medium |博客

文章来源：https://dev.to/samanthaming/es6-arrow-functions-cheatsheet-1cn