👨🏻‍💻 🔺 👨🏼‍🎤 什么时候以及为什么值得使用ES6箭头功能，何时不值得 💵 ☁️ 👨🏿‍⚖️

哈Ha！我向您介绍辛西娅·李（Cynthia Lee ）的文章“ 何时（为什么）应该使用ES6箭头功能-何时不应该使用ES6箭头功能 ”。

箭头功能是最受欢迎的ES6功能。这是一种新的，简洁的函数编写方式。

function timesTwo(params) { return params * 2 } timesTwo(4); // 8

现在与箭头功能相同。

 var timesTwo = params => params * 2 timesTwo(4); // 8

短很多！我们可以省略花括号和return语句（如果没有块，则稍后再介绍）。

让我们弄清楚新方法与通常的方法有何不同。

句法

您很快会注意到的第一件事是各种语法变化。让我们看一下主要的：

1.无参数

如果该函数没有参数，则只需在=>之前写一个空括号即可。

 () => 42

实际上，您完全不需要括号！

 _ => 42

1.一个参数

括号也是可选的

 x => 42 || (x) => 42

3.几个参数

在这里我们需要括号

 (x, y) => 42

4.指示

通常，函数表达式返回值，而指令负责操作。

必须记住，对于箭头函数，如果我们有一组动作/指令，则必须使用花括号和return语句。
这是与if语句一起使用的箭头函数示例：

 var feedTheCat = (cat) => { if (cat === 'hungry') { return 'Feed the cat'; } else { return 'Do not feed the cat'; } }

5.身体的真菌阻滞

即使您的函数仅返回值，但其主体位于大括号中，也需要return语句。

 var addValues = (x, y) => { return x + y }

6.对象文字

如果函数返回对象文字，则必须将其括在括号中。

 x =>({ y: x })

箭头功能-匿名

请注意，箭头函数是匿名的；它们没有名称。

这带来了一些困难：

难以贬低

发生这种情况时，您将无法跟踪函数的名称和发生错误的行号。
无法分配给变量

如果您需要函数内部到自身的链接以进行某些操作（递归，需要撤消的事件处理程序），则没有任何效果

主要优点：不可以

在常规函数中，这表示调用此函数的上下文。 arrow功能的this与声明arrow功能的环境的this相同。

例如，查看下面的setTimeout函数：

 // ES5 var obj = { id: 42, counter: function counter() { setTimeout(function() { console.log(this.id); }.bind(this), 1000); } };

在上面的示例中，您需要使用.bind（this）将上下文传递给函数。否则，这将是不确定的。

 // ES6 var obj = { id: 42, counter: function counter() { setTimeout(() => { console.log(this.id); }, 1000); } };

本示例不需要对此进行绑定。箭头函数将从封闭符中获取此信息。

何时使用箭头功能

现在，我认为，很明显，箭头功能不能代替普通功能。

以下是一些您不太可能要使用它们的示例。

1.对象方法

当您呼叫cat.jumps时，生命不会减少。这是因为这不受任何约束，并且从闭包继承值。

 var cat = { lives: 9, jumps: () => { this.lives--; } }

2.具有动态上下文的回调函数

如果您需要动态上下文，则箭头功能是一个不好的选择。

 var button = document.getElementById('press'); button.addEventListener('click', () => { this.classList.toggle('on'); });

如果单击按钮，则会收到TypeError。这是因为这并不绑定到按钮。

3.代码可读性下降时

使用通常的功能，您始终可以清楚地说出什么。使用箭头，给定各种语法选项，某些事情变得不太明显。

何时才值得使用箭头功能

箭头函数非常适用于不需要自己的函数上下文的情况。

我也非常喜欢在各种map使用箭头功能并进行reduce -代码以这种方式更好地读取。

什么时候以及为什么值得使用ES6箭头功能，何时不值得

句法