JavaScript中的箭头函数

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', '2024') )

// output: The Bridgerton series was released in 2024

复制代码

如果只有一个参数，你可以省略圆括号（你不必如此，但你可以这么做）：

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)

复制代码

隐式返回

在函数体内只有一个表达式时，你可以让ES6的箭头语法更加简洁。你可以把所有内容放在一行，去掉大括号，并移除return关键字。

你已经在上面的示例中看到了这些漂亮的一行代码是如何工作的。下面的orderByLikes()函数返回奈飞剧集对象的数组，按照最高点赞数排序：

// 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 orderByLikes = netflixSeries.sort((a, b) => b.likes - a.likes)

// call the function 

// output:the titles and the n. of likes in descending order

console.log(orderByLikes)

复制代码

这种写法很酷，但是要注意代码的可读性。特别是在使用单行和无括号的ES6箭头语法对一堆箭头函数进行排序时。就像这个例子：

const greeter = greeting => name => `${greeting}, ${name}!`

复制代码

那里发生了什么？尝试使用常规的函数语法：

function greeter(greeting) {

  return function(name) {

    return `${greeting}, ${name}!` 

  }

}

复制代码

现在，你可以快速看到外部函数greeter如何具有参数greeting，并返回一个匿名函数。这个内部函数又有一个叫做name的参数，并使用greeting和name的值返回一个字符串。下面是调用函数的方式：

const myGreet = greeter('Good morning')

console.log( myGreet('Mary') )   

// output: 

"Good morning, Mary!"

复制代码

注意隐式返回错误

当你的JavaScript箭头函数包含不止一个语句，你需要在大括号内包裹所有语句，并使用return关键字。

在下面的代码中，该函数建立了一个包含几个Netflix剧集的标题和摘要的对象：

const seriesList = netflixSeries.map( series => {

  const container = {}

  container.title = series.name 

  container.summary = series.summary

  // explicit return

  return container

} )

复制代码

.map()函数中的箭头函数在一系列的语句中展开，在语句的最后返回一个对象。这使得在函数主体周围使用大括号是不可避免的。

另外，由于正在使用花括号，隐式返回便不是一个选项。你必须显式使用return关键字。

如果你的函数使用隐式返回来返回一个对象字面量，你需要使用圆括号来包裹该对象字面量。不这样做将导致错误，因为JavaScript引擎将对象字面量的大括号错误地解析为函数的大括号。正如你刚才注意到的，当你在一个箭头函数中使用大括号时，你不能省略return关键字。

前面代码的较短版本演示了这种语法：

// Uncaught SyntaxError: unexpected token: ':'

const seriesList = netflixSeries.map(series => { title: series.name });

// Works fine

const seriesList = netflixSeries.map(series => ({ title: series.name }));

复制代码

无法命名箭头函数

在function关键字和参数列表之间没有名称标识的函数被称为匿名函数。下面是常规匿名函数表达式的样子：

const anonymous = function() {

  return 'You can\'t identify me!' 

}

复制代码

箭头函数都是匿名函数：

const anonymousArrowFunc = () => 'You can\'t identify me!'

复制代码

从ES6开始，变量和方法可以通过匿名函数的语法位置，使用name属性来推断其名称。这使得在检查函数值或报告错误时有可能识别该函数。

使用anonymousArrowFunc检查一下：

console.log(anonymousArrowFunc.name)

// output: "anonymousArrowFunc"

复制代码

需要注意的是，只有当匿名函数被分配给一个变量时，这个可以推断的name属性才会存在，正如上面的例子。如果你使用匿名函数作为回调函数，你就会失去这个有用的功能。在下面的演示中，.setInterval()方法中的匿名函数无法利用name属性：

let counter = 5

let countDown = setInterval(() => {

  console.log(counter)

  counter--

  if (counter === 0) {

    console.log("I have no name!!")

    clearInterval(countDown)

  }

}, 1000)

复制代码

这还不是全部。这个推断的name属性仍然不能作为一个适当的标识符，你可以用它来指代函数本身--比如递归、解除绑定事件等。