箭头功能（也称为“胖箭头功能”）无疑是ES6最受欢迎的功能之一。他们介绍了一种编写简洁功能的新方法。
这是一个用ES5语法编写的函数：
function timesTwo（params）{ return params * 2
}
timesTwo（4）; // 8现在，这里的函数表示为箭头函数：
var timesTwo = params => params * 2
timesTwo（4）; // 8它短得多！由于隐式返回，我们可以省略花括号和return语句（但是只有在没有块的情况下 - 以下更多内容）。
与常规ES5函数相比，了解箭头函数的行为方式非常重要。
变化
变化是生活的调味品
您将很快注意到的一件事是箭头函数中可用的各种语法。让我们来看看一些常见的：
1.没有参数
如果没有参数，您可以在之前放置一个空括号=>。
（）=> 42
事实上，你甚至不需要括号！
_ => 422.单个参数
使用这些函数，括号是可选的：
x => 42 || （x）=> 423.多个参数
这些功能需要括号：
（x，y）=> 424.陈述（与表达相对）
在最基本的形式中，函数表达式产生一个值，而一个函数语句执行一个动作。
使用箭头功能，重要的是要记住语句需要花括号。一旦花括号出现，你总是需要写。 return
以下是与if语句一起使用的箭头函数的示例：
var feedTheCat =（cat）=> { if（cat ==='hungry'）{ return'feed the cat'; } else { return'不喂猫'; }
}5.“块体”
如果您的函数在块中，则还必须使用显式return语句：
var addValues =（x，y）=> { return x + y
}6.对象文字
如果要返回对象文字，则需要将其括在括号中。这会强制解释器评估括号内的内容，并返回对象文字。
x =>（{y：x}）语法上是匿名的
重要的是要注意箭头函数是匿名的，这意味着它们没有被命名。
这种匿名性会产生一些问题：
- 更难调试
当您收到错误时，您将无法跟踪函数的名称或它出现的确切行号。
2.没有自我参照
如果你的函数需要在任何时候都有自引用（例如递归，需要取消绑定的事件处理程序），它将无法工作。
主要好处：没有绑定'这个'
照片来自Davide ragusa在 Unsplash上
在经典函数表达式中，this关键字根据调用它的上下文绑定到不同的值。但是，对于箭头函数，它this是词法绑定的。这意味着它使用this包含箭头功能的代码。
例如，看看setTimeout下面的函数：
// ES5
var obj = { id：42，counter：function counter（）{ setTimeout（function（）{ console.log（this.id）; } .bind（this），1000）; }
};在ES5示例中， .bind(this)需要帮助将this上下文传递给函数。否则，默认情况下this将是未定义的。
// ES6
var obj = { id：42，counter：function counter（）{ setTimeout（（）=> { console.log（this.id）; }，1000）; }
};ES6箭头函数不能绑定到this关键字，因此它将在词法上向上移动范围，并使用this其定义范围中的值。
不应使用箭头功能时
在学习了更多关于箭头函数的知识之后，我希望您理解它们不会取代常规函数。
以下是您可能不想使用它们的一些情况：
- 对象方法
当你打电话时cat.jumps，生命的数量不会减少。这是因为this没有绑定任何东西，并且将继承this其父范围的值。
var cat = { lives：9，jumps :(）=> { this.lives--; }
}2.具有动态上下文的回调函数
如果您需要上下文是动态的，箭头函数不是正确的选择。看看下面的这个事件处理程序：
var button = document.getElementById（'press'）;
button.addEventListener（'click'，（）=> { this.classList.toggle（'on'）;
}）;如果我们单击按钮，我们会得到一个TypeError。这是因为this没有绑定到按钮，而是绑定到其父范围。
3.当它使你的代码可读性降低时
值得考虑我们之前介绍的各种语法。通过常规功能，人们知道会发生什么。使用箭头功能，可能很难直接解读您所看到的内容。
什么时候应该使用它们
箭头函数最适合需要this绑定到上下文的任何内容，而不是函数本身。
尽管他们是匿名的，我也喜欢用他们的方法，如map和reduce，因为我觉得它使我的代码更易读。对我来说，优点胜过缺点。
翻译自:https://medium.freecodecamp.org/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26