箭头函数：演练和陷阱

在这篇博文中，我将展示如何将传统函数转换为所谓的“箭头函数”。我先从带两个参数的函数开始讲解，然后是无参数函数，最后是带一个参数的函数。
注意：我最初计划也讲解一下这些陷阱，但后来意识到这样会让这篇博文“面面俱到，又空口无凭”。在我再写一篇关于这些陷阱的博文之前，请先阅读博文的最后一部分，了解一下这两个主要陷阱。此外，我刚刚创建了一个小测验，其中包含函数转换的提示——读完这篇博文后，记得看看哦 :)

两个论点

1. 这是我们想要转换的功能：

   function sum(num1, num2){
       return num1 + num2
   }
   

2. 箭头函数是匿名的，因此为了保留名称，我们需要一个变量：

   const sum
   

3. 现在，=在名称和参数之间放置一个，=>在参数和花括号之间 放置一个

   const sum = (num1, num2) => {
     return num1 + num2
   }
   

4. 这已经可以正常工作了！但是，由于函数体只有一行，我们可以这样写：

   const sum = (num1, num2) => { return num1 + num2 }
   

5. 现在，由于这只是一行，我们可以简化它：

   const sum = (num1, num2) => num1 + num2
   

   什么？！没有返回值？！是的。简而言之，return只要{}图中有代码，你就需要一个语句——而且{}只要函数体超过一行，你就需要一个语句。
   

注意：DarkWiiPlayer提供了更详细的解释，我认为这符合本博客的目的：

{}当函数体不仅仅是一个表达式时，也就是需要在返回值之前添加额外的语句时，你就需要这样做了。你可以很容易地写出类似这样的代码：


const sum = (array) => array
   .reduce( (a,b) => a+b)

但你不能这样做


const sumPlusOne = (a, b) => a+=1; a+b

---

没有争论

如果你没有参数，可以按照以下方法操作。这是我们想要转换的函数：


function helloWorld(){
 console.log("Hi")
}

你可以把它变成：


const helloWorld = () => console.log("Hi") 

或者：


const helloWorld = _ => console.log("Hi")  

注意：区别在于，它(_)向你的开发人员同事表明可能存在一些默认参数，并且()不会出现你关心的默认参数——但这只是一个小众功能，几乎没有人会使用它。更多信息，请查看Kyle Roach 的这条评论。

---

一个论点

当只涉及一个论点时：


function myName(name){
 console.log(`Hi, my name is ${name}`)
}

可以是：


const myName = name => console.log(`Hi, my name is ${name}`)

因为它只是一个参数，所以不需要括号。

---

陷阱

说到箭头函数，现在可以说主要有两个问题：

1. 保存到变量的箭头函数是函数表达式，因此不能被提升；
2. 箭头函数没有自己的绑定，this并且this表示箭头函数在其中定义它的对象。

---

我刚刚创建了一个小测验，你可以从中获得有关转换函数的提示——阅读完这篇博客后，可以查看一下 :)

---

封面图片来自Pexels