(x,y){
+ y;
// 函数表达式
= (x,y){
+ y;
现在，如果我们想要将函数表达式改为一个箭头函数，我们可以这样做：
//常用函数表达式
= (x,y){
+ y;
//箭头函数
= (x,y) => {
+ y;
使用箭头函数最难的是习惯它的语法形式，一旦你适应了并坚持下去，相信你将会深入的理解并掌握它。
现在，你可能想知道使用箭头函数带来的所有好处。其实，上面的例子并没有充分显示出箭头函数的优势，我发现当使用匿名函数时，箭头函数的优势发挥的最为明显。通过查看另一个使用.map 的基本例子，可以让我们对箭头函数的语法更为熟悉。
users.map((){
})
users.map(() => {
})
好了，熟悉的差不多了，接下来让我们进行深入的学习。
假设我们有一个函数：，该函数接收用户 id 作为入参，通过访问一个简单的 API 接口后，返回所有星数和转发次数超过 50 的 用户。
使用 构造函数定义，这个函数看起来是这样的：
10
11
12
13
(uid){
('' + uid)
.then((){
.json()
})
.then((){
.data
}).then((){
.((tweet){
.stars > 50
})
}).then((){
.((tweet){
.rts > 50
})
})
是的，功能虽然实现了，但是这个函数还不是最完美的。尽管具体的实现步骤是紧凑的，但是想法有点过于平常了。根据上述对箭头函数的理解，我们来看一下可以怎样改进函数。
10
11
12
13
(uid){
('' + uid)
.then(() => {
.json()
})
.then(() => {
.data
}).then(() => {
.((tweet) => {
.stars > 50
})
}).then(() => {
.((tweet) => {
.rts > 50
})
})
好的，酷极了。但是除了不需要写之外，和上面的写法几乎是一致的。虽然这种写法是有益的，却没有什么值得炫耀的。还是让我们来看一下使用箭头函数带来的下一个优点：“隐式返回”。
使用箭头函数时，如果你的函数是一个“简单的函数体”（对于单行函数的称呼）js箭头函数，那么你可以省略“”关键字，该值会自动（隐式）返回。
所以，前面的add示例修改后如下：
//普通函数表达式
= (x,y){
+ y;
//使用箭头函数的隐式返回
= (x,y) => x + y;
更重要的是，修改后的函数示例如下：
(uid){
('' + uid)
.then(() => .json())
.then(() => .data)
.then(() => .((tweet) => tweet.stars > 50))
.then(() => .((tweet) => tweet.rts > 50))
该代码不仅容易编写，更重要的是，它更容易阅读。
如果箭头函数只有一个入参，那么我们可以做的进一步的修改是省略该参数周围的()。考虑到这一点，函数可以这样写：
(uid){
('' + uid)
.then( => .json())
.then( => .data)
.then( => .(tweet => tweet.stars > 50))
.then( => .(tweet => tweet.rts > 50))
总的来说，我认为上面做的每一种改变都是巨大的进步。
箭头函数的另一个优点就是如何管理“this”关键字。如果你对“this ”关键字不熟悉，我推荐看一下WTF is this。
让我们看下使用 ES5 语法编写的典型 React 代码。
10
11
12
13
14
15
16
17
.{
(props){
super();
this.state = {
repos: null,
};
this. = this..bind(this);
(){
this.('')
(lang){
api.(lang)
.then((repos){
this.((){
{
repos: repos
});
});
(){
// Stuff
当组件加载时，它会向 API （ API ）发出请求来获取当下 最流行的库。当组件获得库的数据时，它将会接受并更新其本地状态，至少我们希望它能这样做。很遗憾，实际上它并没有这样做。相反，我们会得到一个错误，你能指出上面代码中的 bug 吗？
上面代码将会抛出的错误是“无法读取未定义的 ”。讨论为什么出现这个错误已经在本篇文章讨论范围之外了（如果你需要请看WTF is this）。另外， ES5 中典型的解决方法是使用了.bind来绑定 this ，具体内容如下：
10
11
12
13
14
15
16
17
.{
(props){
super();
this.state = {
repos: null,
};
this. = this..bind(this);
(){
this.('')
(lang){
api.(lang)
.then((repos){
this.((){
{
repos: repos
});
}.bind(this));
(){
// Stuff
至于箭头函数为什么这么受欢迎的第二个主要的优点是它不会创建自己的上下文环境。这意味着“this”关键字在特定函数中使用时无需考虑上下文环境，也不用担心被修改。所以在方法中使用箭头函数时我们不需要再担心this，意味着不必再使用.bind绑定它了。
(lang){
api.(lang)
.then((repos) => {
this.(() => {
{
repos: repos
});
});
引申阅读
至此，我们的讨论已经覆盖了箭头函数中“必须掌握”的所有知识点。然而，有两点你可能想知道的内容，我认为值得一提。
回过头看一下方法，如果我们想在 的回调函数中隐式返回对象，该如何做呢？你最先想到的会是删除 语句，然后返回一个对象。
api.(lang)
.then((repos) => {
this.(() => {
repos: repos
});
});
正如你可能猜到的那样，这样做的问题是该语法与创建函数的语法完全相同。 无法神奇地分辨出你是想创建一个函数还是想返回一个对象，因此它会抛出一个错误。为了解决这个问题，我们可以将对象包裹在()中。
api.(lang)
.then((repos) => {
this.(() => ({
repos: repos
}));
});
使用这个方法，现在我们可以使用箭头函数隐式的返回一个对象。
接下来，比如我们想在 内部通过记录状态值来检查组件之前的状态。如果让你写这个 函数，你将如何来记录值呢？
this.(() => ({
repos: repos
}));
最显而易见的做法是将代码中的隐式返回改为显式返回，创建一个函数，然后在这个函数体内记录。
this.(() => {
.log()
{
repos: repos
});
这种写法有点糟糕。还有个更好的方法js箭头函数，使用||操作符，为了维持你的代码整洁，你可以这样写：
this.(() => .log() || ({
repos: repos
}));
最初我将这篇文章放到了网站上，作为我“ ”课程的一部分。
你可以通过 联系我： @ 。