ES6 箭头函数 - JavaScript 中新的简洁语法

箭头函数是 ES6 中用于编写 JavaScript 函数的新语法。它们将为开发人员节省时间和简化函数作用域。调查显示它们是最受欢迎的 ES6 特性。

好消息是，许多主流现代浏览器 支持使用箭头函数。

本文将详细介绍箭头函数，特别是如何使用它们、常见的语法、常见用例以及需要注意的事项/陷阱。

什么是箭头函数？

箭头函数，也称为“胖箭头”函数，源自 CoffeeScript（一种被编译的语言），是编写函数表达式的一种更简洁的语法。它们使用一个新标记 =>，看起来像一个胖箭头。箭头函数是匿名的，并且会改变 this 在函数中的绑定方式。

箭头函数使我们的代码更简洁，并简化了函数作用域和 this 关键字。它们是单行的小型函数，其工作方式与 C# 或 Python 等其他语言中的 Lambda 表达式 类似。（另请参阅 JavaScript 中的 Lambda 表达式）。通过使用箭头函数，我们可以避免输入 function 关键字、return 关键字（在箭头函数中是隐式的）以及大括号。

使用箭头函数

箭头函数提供了多种语法。 EcmaScript.org 提供了语法的完整列表，MDN 也有。我们将在此介绍常见的用法，帮助您入门。

让我们比较一下 ES5 中使用函数表达式的代码现在如何使用箭头函数在 ES6 中编写。

带有多个参数的基本语法（来自 MDN）

上面的箭头函数示例允许开发人员用更少的代码行和大约一半的输入量实现相同的结果。

如果只有一个表达式，则不需要大括号。前面的示例也可以这样写：

var multiply = (x, y) => x * y;

带有一个参数的基本语法

当只有一个参数时，括号是可选的。

http://codepen.io/DevelopIntelligenceBoulder/pen/PZmOWQ?editors=101

无参数

当没有参数时，必须使用括号。

对象字面量语法

箭头函数，与函数表达式一样，可以用于返回对象字面量表达式。唯一的注意事项是，需要将函数体括在括号中，以便区分块和对象（它们都使用大括号）。

箭头函数的用例

现在我们已经介绍了基本语法，让我们来看看箭头函数是如何使用的。

箭头函数的一个常见用例是数组操作等。通常需要映射或归约数组。以这个简单的对象数组为例：

var smartPhones = [
    { name: 'iphone', price: 649 },
    { name: 'Galaxy S6', price: 576 },
    { name: 'Galaxy Note 5', price: 489 }
];

在 ES5 中，我们可以创建一个只包含名称或价格的对象数组，如下所示：

// ES5
console.log(smartPhones.map(function(smartPhone) {
  return smartPhone.price;
})); // [649, 576, 489]

箭头函数更简洁易读。

// ES6
console.log(smartPhones.map(smartPhone => smartPhone.price)); // [649, 576, 489]

 

这是使用 数组 filter 方法 的另一个示例：

Promises 和 Callbacks

使用异步回调或 Promise 的代码通常包含大量的 function 和 return 关键字。在使用 Promise 时，这些函数表达式将用于链式调用。这是一个来自 MSDN 文档的 链式 Promise 的简单示例：

// ES5
aAsync().then(function() {
  return bAsync();
}).then(function() {
  return cAsync();
}).done(function() {
  finish();
});

使用箭头函数，这段代码可以简化，并且可以说更容易阅读。

// ES6
aAsync().then(() => bAsync())).then(() => cAsync())).done(() => finish);

箭头函数也应该可以简化充满回调的 NodeJS 代码。

this 的含义是什么？！

使用箭头函数与 Promise/回调的另一个好处是它减少了围绕 this 关键字的混淆。在具有多个嵌套函数的代码中，很难跟踪和记住绑定正确的 this 上下文。在 ES5 中，您可以使用 .bind 方法（效率较低）或通过创建闭包 var self = this; 来解决。

由于箭头函数允许您在函数内部保留调用者的作用域，因此您无需创建 self=this 闭包或使用 bind。

开发者 Jack Franklin 提供了一个出色的 使用箭头函数词法 this 简化 Promise 的实际示例。

没有箭头函数，Promise 代码需要这样写：

// ES5
API.prototype.get = function(resource) {
    var self = this;
    return new Promise(function(resolve, reject) {
      http.get(self.uri + resource, function(data) {
        resolve(data);
      });
    });

使用箭头函数，可以更简洁清晰地实现相同的结果。

// ES6
 API.prototype.get = function(resource) {
   return new Promise((resolve, reject) => {
     http.get(this.uri + resource, function(data) {
       resolve(data);
     });
   });
 };

如果您需要动态 this，可以使用函数表达式；如果您需要词法 this，可以使用箭头函数。

箭头函数的陷阱和注意事项

新的箭头函数为 ECMAScript 带来了一个有用的函数语法，但与任何新功能一样，它们也有自己的陷阱和注意事项。

JavaScript 开发者兼作家 Kyle Simpson 认为箭头函数有足够的陷阱，足以写出这个流程图来决定是否使用它们。他认为箭头函数存在太多令人困惑的规则/语法。其他人则认为使用箭头函数可以节省输入，但最终会使代码更难阅读。所有那些 function 和 return 语句可能使阅读多个嵌套函数或一般函数表达式变得更容易。

关于箭头函数的开发者意见不一。为了简洁起见，这里有几点您在使用箭头函数时需要注意。

更多关于 this

如前所述，this 关键字在箭头函数中的工作方式不同。call()、apply() 和 bind() 方法不会改变箭头函数中 this 的值。（实际上，函数内部的 this 的值根本无法更改——它将与调用函数时相同。）如果您需要绑定到不同的值，则需要使用函数表达式。

构造函数

箭头函数不能用作 构造函数，而其他函数可以。不要使用它们来创建与使用其他函数创建的对象类似的对象。如果您尝试使用 new 关键字与箭头函数，它将抛出错误。箭头函数，就像 内置函数（又名方法）一样，没有原型属性或其他内部方法。由于构造函数通常用于在 JavaScript 中创建类对象，因此您应该改用新的 ES6 类。

生成器

箭头函数设计为轻量级的，不能用作 生成器。在 ES6 中使用 yield 关键字将抛出错误。请改用 ES6 生成器。

arguments 对象

与其他函数一样，箭头函数没有局部变量 arguments。arguments 对象是一个类数组对象，它允许开发人员动态地发现和访问函数的参数。这很有用，因为 JavaScript 函数可以接受无限数量的参数。箭头函数没有这个对象。

箭头函数有多大用处？

箭头函数已被 誉为 ES6 最快的“收益”之一。开发者 Lars Schöning 阐述了他的团队如何决定 在哪里使用箭头函数：

• 在全局作用域和 Object.prototype 属性中使用 function。
• 为对象构造函数使用 class。
• 在其他所有地方使用 =>。

箭头函数，就像 let 和 const 一样，很可能成为默认函数，除非需要函数表达式或声明。为了了解箭头函数的使用程度，Kevin Smith 计算了各种流行库/框架中的函数表达式，并发现大约 55% 的函数表达式 可以用箭头函数替代。

箭头函数已经到来（快来吧，Safari！），它们功能强大、简洁，而且开发人员喜欢它们。也许是时候开始使用它们了！

本文是 Microsoft 技术布道师和工程师的 Web 开发系列文章的一部分，该系列文章涵盖了实用的 JavaScript 学习、开源项目以及互操作性最佳实践，包括 Microsoft Edge 浏览器。

我们鼓励您在包括 Windows 10 默认浏览器 Microsoft Edge 在内的各种浏览器和设备上进行测试，请通过 dev.microsoftedge.com 上的免费工具进行测试，其中包括用于测试 Microsoft Edge 和 IE6 到 IE11 版本的 虚拟机。此外，请访问 Edge 博客，随时了解 Microsoft 开发人员和专家的最新信息。