JavaScript 中的箭头函数：你需要了解的一切
箭头函数是 JavaScript 中创建函数的另一种方式，它在 ES6 中引入。
它们之所以得名arrow functions，是因为它们是用箭头符号“-”创建的=>。
箭头函数的主要优点是语法简洁，这通常能提高代码的可读性。当需要快速创建一个函数并将其作为另一个函数的参数时，箭头函数非常方便。
大多数情况下，它们可以与常规函数互换使用，但需要记住一些区别。
箭头函数是匿名函数，这意味着它们不能有名称。你可以通过将它们赋值给一个变量，然后用这个变量名来调用它们，从而绕过这个限制。
让我们来看一个从普通函数到箭头函数的简单转换。
function add(x, y) {
return x + y;
}
// we assign an anonymous to a variable
const add = function(x, y) {
return x + y;
}
// we remove "function" keyword and add an arrow after arguments
const add = (x, y) => {
return x + y;
}
上面的代码示例展示了三种声明函数的方法。最后一种方法使用了 ` .`。请注意，现在声明函数=>不再需要 ` .` 关键字。此外，我们还在参数列表后添加了 `.`。function=>
箭头函数允许我们使用更简洁的语法。
// returns x + y
const add = (x, y) => (
x + y
)
// the same function in one line
const add = (x, y) => x + y
// you can skip parentheses when using only one argument
const add1 = x => x + 1
如果你的函数只包含一个元素，return你可以使用箭头函数的简写形式。
您可以省略{ }关键字return，其后的表达式=>将是此函数返回的值。
返回对象时，需要记住添加( )。
// this won't work
const createUser = (id, name) => {
id: id,
name: name
}
在这种情况下，用于创建对象的花括号会与用于创建函数体的花括号冲突。您需要添加圆括号以确保返回的是一个对象。
const createUser = (id, name) => ({
id: id,
name: name
})
使用缩写形式来提高代码可读性
让我们来看看，当从一个函数返回一个函数时，使用箭头函数的简写形式如何提高代码的可读性。
function createAddFunction(number) {
return function(x) {
return x + number
}
}
createAddFunction这是一个创建其他函数的函数。这种模式称为函数柯里化，您可以在“什么是 JavaScript 中的函数柯里化以及何时使用它”一文currying中了解更多信息。例如，您可以使用它来创建一个将数字递增 n 的函数。1
const add1 = createAddFunction(1)
add1(5) // 6
利用我们刚刚学到的箭头函数特性，可以简化的定义createAddFunction。让我们来看看如何将其简化为一行代码。
// initial version
function createAddFunction(number) {
return function(x) {
return x + number
}
}
// changing the inner function to arrow function
function createAddFunction(number){
return x => x + number
}
// changing the outer function to arrow function
const createAddFunction = number => (
x => x + number
)
// one line version
const createAddFunction = number => x => x + number
常规函数和箭头函数有什么区别？
this在箭头函数中
最重要的区别在于this这两种函数声明类型中的行为方式。
箭头函数不会创建自己的值this，而是使用定义处的值。
JavaScript 中的解释this需要单独写一篇博客文章，但我会举几个例子来说明它们之间的区别。
const logThisOutside = () => {
console.log(this)
}
function Button() {
this.name = 'My Button'
function logThis() {
console.log(this)
}
const logThisArrow = () => {
console.log(this)
}
logThis() // Window
logThisArrow() // { name: 'My Button' }
logThisOutside() // Window
}
new Button()
正如你所见logThisArrow，箭头函数会使用定义位置中的logThisOutside值。这是因为与普通函数不同，箭头函数不会创建自己的值，而是使用外部作用域中的值。thisthis
this巧妙运用箭头函数
function Button() {
this.name = 'My Button'
const that = this
document.querySelector("button").addEventListener("click", function() {
console.log('click', this); // Button DOM Element
console.log('that', that) // { name: 'My Button' }
this.name = 'Button Clicked' // won't work as expected
that.name = 'Button Clicked' // name value changed
});
document.querySelector("button").addEventListener("click", () => {
console.log("click arrow", this); // { name: 'My Button' }
this.name = 'Button Clicked' // name value changed
});
}
new Button()
我们创建了两个事件监听器。其中一个使用了普通函数，另一个使用了箭头函数。
在事件监听器中的常规函数中，点击按钮后，this其值会是被点击的 DOM 元素的值。如果我们想要改变这个值，this.name必须先创建一个变量const that = this，然后再通过修改它来实现。这是一种常见的从外部作用域that.name = 'Button Clicked'修改值的技巧。this
如前所述，箭头函数不会创建自己的变量，因此您可以安全地通过以下方式this更改值。namethis.name = 'Button Clicked
在箭头函数中访问参数
箭头函数的另一个特点是它们不会arguments在函数体内创建特殊变量。
让我们看看arguments它在正常情况下是如何工作的。
function add() {
console.log(arguments)
}
add(1, 2, 3) // console: [1, 2, 3]
普通函数可以访问一个特殊arguments变量，该变量存储调用该函数时使用的所有参数，即使这些参数没有在括号内定义。
箭头函数不会创建arguments变量，但我们可以使用其他方法来实现相同的目的——使用剩余参数。
const add = (...args) => {
console.log(args)
}
add(1, 2, 3) // console: [1, 2, 3]
概括
箭头函数提供了一种简洁的语法来创建函数。它允许省略诸如 `and` 和 `or` 之类的关键字function，return从而提高代码的可读性。但请注意，过度嵌套的箭头函数会导致代码难以阅读，因此请谨慎使用。
箭头函数不会创建自己的特殊变量，这是它this与arguments普通函数的主要区别。
如果您想了解其他差异，请查看MDN 箭头函数表达式。
我定期发布关于网站开发的文章和见解。
欢迎订阅我的电子报。
访问我的博客slawkolodziej.com，了解更多精彩内容。也欢迎在Twitter
上关注我。