JavaScript 中的箭头函数：如何使用 Fat & Concise 语法香草

了解有关 JavaScript 箭头函数的所有信息。我们将向您展示如何使用 ES6 箭头语法，以及在代码中使用箭头函数时需要注意的一些常见错误。你会看到很多例子来说明它们是如何工作的。

JavaScript 箭头函数随着 ECMAScript 2015（也称为 ES6）的发布而出现。由于其简洁的语法和对this关键字的处理，箭头函数很快成为开发人员最喜欢的功能。

箭头函数语法：重写常规函数

函数就像食谱一样，您可以在其中存储有用的指令来完成您需要在程序中发生的事情，例如执行操作或返回值。通过调用您的函数，您可以执行配方中包含的步骤。每次调用该函数时都可以这样做，而无需一次又一次地重写配方。

这是声明函数然后在 JavaScript 重新调用它的标准方法：

// function declaration
function sayHiStranger() {
  return 'Hi, stranger!'
}

// call the function
sayHiStranger()

您还可以编写与函数表达式相同的函数，如下所示：

const sayHiStranger = function () {
  return 'Hi, stranger!'
}

JavaScript 箭头函数始终是表达式。以下是使用粗箭头符号重写上述函数的方法：

const sayHiStranger = () => 'Hi, stranger'

这样做的好处包括：

• 只有一行代码
• 没有function关键字
• 没有return关键字
• 并且没有画括号 {}

在 JavaScript 中，函数是“一等公民”。您可以将函数存储在变量中，将它们作为参数传递给其他函数，并将它们作为值从其他函数返回。您可以使用 JavaScript 箭头函数完成所有这些操作。

无括号语法

在上面的例子中，函数没有参数。()在这种情况下，您必须在粗箭头 ( =>) 符号之前添加一组空括号。当您有多个参数时也是如此：

const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// call the function
console.log(getNetflixSeries('Bridgerton', '2020') )
// output: The Bridgerton series was released in 2020

但是，只需一个参数，您就可以继续省略括号（您不必这样做，但可以）：

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// call the function
console.log(favoriteSeries("Bridgerton"))
// output: "Let's watch it"

不过要小心。例如，如果您决定使用默认参数，则必须将其包装在括号内：

// with parentheses: correct
const bestNetflixSeries = (seriesName = "Bridgerton") => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log(bestNetflixSeries())

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)

仅仅因为你可以，并不意味着你应该。Kyle Simpson（以You Don't Know JS成名）夹杂着一点轻松、善意的讽刺，将他对省略括号的想法写进了这个流程图。

隐式返回

当函数体中只有一个表达式时，就可以使用 ES6 箭头的语法更加简洁。您可以将所有内容保持在一行，删除花括号，并取消return关键字。

您刚刚在上面的示例中看到了这些漂亮的单行代码是如何工作的。这里还有一个例子，只是为了很好的衡量。该orderByLikes()函数执行它在罐头上所说的：也就是说，它返回一个按最高点赞数排序的 Netflix 系列对象数组：

// using the JS sort() function to sort the titles in descending order 
// according to the number of likes (more likes at the top, fewer at the bottom
const