箭头函数在哪里改进你的代码（你应该在哪里使用它们） -
传统 lambda 函数以及现在 JavaScript 中的箭头函数的主要用例之一是用于一遍又一遍地应用于列表中的项目的函数。
例如，如果您想要使用映射转换一组值，那么箭头函数是理想的：
const words = ['hello', 'WORLD', 'Whatever'];
const downcasedWords = words.map(word => word.toLowerCase());
一个非常常见的例子是提取对象的特定值：
const names = objects.map(object => object.name);
类似地，当使用 forEach 将旧式 for 循环替换为现代迭代器式循环时，箭头函数可防止 this父母让他们非常直观。
this.examples.forEach(example => {
this.runExample(example);
});
Promise 和 Promise Chains - 箭头函数使代码更简洁、更直观的另一个地方是管理异步代码。
Promises 使管理异步代码变得更加容易（即使您对使用 async/await 感到兴奋，您仍然应该了解基于 async/await 构建的 Promise！）
然而，在使用 Promise 时，仍然需要定义在异步代码或调用完成后运行的函数。
这是放置箭头函数的理想位置，尤其是当您的结果函数是有状态的、引用对象中的某些内容时。示例：
this.doSomethingAsync().then((result) => {
this.storeResult(result);
});
对象转换 -
箭头函数的另一个常见且极其强大的用途是封装对象转换。
例如，在 Vue.js 中，有一种常见的模式是使用 mapState 将 Vuex 存储的片段直接包含到 Vue 组件中。
这涉及定义一组“映射器”，这些映射器将从原始完整状态对象转换为准确提取相关组件所需的内容。
这些简单的转换是使用箭头函数的理想而美丽的地方。示例：
export default {
computed: {
...mapState({
results: state => state.results,
users: state => state.users,
});
}
}
不应该使用箭头函数的地方 -
在许多情况下箭头函数不是一个好主意。它们不仅会帮助您，还会给您带来麻烦。
第一个是对象的方法。这是一个示例，其中函数上下文和 this 正是您想要的。
有一段时间的趋势是使用类属性语法和箭头函数的组合来创建“自动绑定”方法，例如事件处理程序可以使用但仍绑定到类的方法。
这看起来像：
class Counter {
counter = 0;
handleClick = () => {
this.counter++;
}
}
这样，即使handleClick 由事件处理程序调用而不是在Counter 实例的上下文中调用，它仍然可以访问实例的数据。
这种方法的缺点是多方面的，
虽然使用这种方法确实为您提供了一种符合人体工程学的快捷方式来拥有一个绑定函数，但该函数的行为方式有很多不直观，如果您尝试将此对象作为子类/将此对象用作原型。
改为使用常规函数，并在必要时将其绑定到构造函数中的实例：
class Counter {
counter = 0;
handleClick() {
this.counter++;
}
constructor() {
this.handleClick = this.handleClick.bind(this);
}
}
深度调用链 -
箭头函数可能给您带来麻烦的另一个地方是当它们将被用于许多不同的组合时，尤其是在函数调用的深层链中。
核心原因与匿名函数相同——它们给出了非常糟糕的堆栈跟踪。
如果你的函数只向下一层，比如在迭代器内部，这还不错，但是如果你将所有函数定义为箭头函数并在它们之间来回调用，你会很漂亮当您遇到错误时卡住并收到如下错误消息：
{anonymous}()
{anonymous}()
{anonymous}()
{anonymous}()
{anonymous}()
具有动态上下文的函数 -
箭头函数可能给您带来麻烦的最后一种情况是在 this 动态绑定的地方。
如果您在这些位置使用箭头函数，则该动态绑定将不起作用，您（或稍后使用您的代码的其他人）可能会对为什么事情没有按预期工作感到非常困惑。
这方面的一些关键示例：
- 调用事件处理程序时将 this 设置为事件的 currentTarget 属性。
- 如果您仍在使用 jQuery，大多数 jQuery 方法会将 this 设置为已选择的 dom 元素。
- 如果您使用的是 Vue.js，方法和计算函数通常会将 this 设置为 Vue 组件。
当然，您可以故意使用箭头函数来覆盖此行为，但尤其是在 jQuery 和 Vue 的情况下，这通常会干扰正常功能，并让您感到困惑，为什么看起来与附近其他代码相同的代码不起作用。
这段摘自here