在ES6/ES2015中使用Arrow 函数
在JS生态系统中，箭头函数是许多开发人员都真实喜欢的功能之一，ES6 / ES2015从语言层面对这个功能进行了支持。箭头函数不仅可以简化代码，还可以改善作用域和this的概念。这篇文章将详细介绍箭头函数的用法及其以什么方式比常规函数更好。
箭头函数的用途
箭头函数提供了一个更精简的语法，可以让你更自如地编写函数。有以下两种情况下可以考虑使用箭头函数：
- 用于返回From X的单个表达式：
既然箭头函数能够简单地和快速地编写函数，它最适合于返回一些数值的后续函数。例如，您可以编写以下代码：
const multiplyByTwo = x => x * 2; console.log(multiplyByTwo(4));`//Output: 8`
在这个例子中，我们没有用函数{ }中的显式 return 语句，因为我们正在对单个表达式进行求值。
- 用于对输入数据做出更改的较短的分析：
如果您需要使用函数来转录一些输入数据，例如来自外部 API 的数据，那么箭头函数可以为您提供更便捷的语法，代码看起来更加简洁：
const customers = [
{name :'Mehmood',age: 22},
{name :'Ali',age: 24},
{name : 'Lisa',age:30 }
];
const names = customers.map(customer => customer.name);
console.log(names); `//Output: [ 'Mehmood', 'Ali', 'Lisa' ]`在这个例子中，我们使用了箭头函数来快速推断输入数据的身份。
如何在代码中使用箭头函数
箭头函数与常规函数之间的语法差异在于它们拥有更为简单的函数体，并且没有自己的 this 值。
箭头函数可以使用（）或 {}，它们的用法的唯一区别是在于函数体的长度。如果您正在使用一个比较短的代码块，那么使用（）可简化代码：
const multiplyByTwo = (a,b) => a*b; console.log(multiplyByTwo(4,6)); `//Output:24`
您还可以使用一块代码，像这样：
const multiplyByTwo = (a,b) => {
const result = a*b;
return result;
}
console.log(multiplyByTwo(4,5)); `//Output:20`注意：您必须手动添加 return 语句和 { } 以得出正确的值。
箭头函数的Limitations
虽然箭头函数提供了一个更干净的语法，但它不会解决所有的问题。箭头函数不能用作构造函数，它们没有自己的对象，也不能用 new 关键字实例化。
您必须使用普通函数来编写构造函数：
// javascriptcn.com 代码示例
function Person() {
this.age = 0;
setInterval(() => {
this.age++;
console.log(this.age);
}, 1000);
}
const p = new Person();在这个例子中，我们将 interval 回调函数传递到 setInterval() 方法中，并且由于我们需要使用原始的 this 当前实例，因此我们需要使用常规JavaScript函数。在这种情况下，箭头函数使用 this 的值将返回到该函数所在的层级。
总结
箭头函数提供了一个更清晰，更快速并且在代码中响应式位置编写函数的方式。但是，它们只适合于特定的功能和场景，并且不能用作构造函数。在深入了解JS之后，我们了解到箭头函数与常规函数之间的差异，以及它们在代码中的应用场景。练习采用箭头函数以获得更简洁的语法和可读性有助于您在未来更好地理解基础JavaScript原理。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654a0fcb7d4982a6eb443ccd