ES6 Arrow函数：JavaScript中的简洁语法

最新推荐文章于 2023-11-30 12:39:41 发布

dingshi7798

最新推荐文章于 2023-11-30 12:39:41 发布

阅读量113

点赞数

文章标签： c# python 后端

本文在我们的《 实用ES6》 一书中有介绍 。 深入了解ES6中引入的新语言功能。

ES6引入了Arrow函数，作为编写JavaScript函数的新语法。 它们为开发人员节省了时间并简化了功能范围。 调查显示它们是最受欢迎的ES6功能：

箭头功能：Axel Rauschmayer对最喜欢的ES6功能的调查

来源： Axel Rauschmayer对最喜欢的ES6功能的调查

箭头功能：Ponyfoo对最常用的ES6功能的调查

资料来源： Ponyfoo对最常用的ES6功能的调查

好消息是，许多主要的现代浏览器都支持使用箭头功能。

这篇文章将涵盖箭头函数的详细信息-如何使用它们，常见语法，常见用例以及陷阱/陷阱。

什么是箭头功能？

箭头函数（又称CoffeeScript（转编译语言）中的“胖箭头”函数）是用于编写函数表达式的更简洁的语法。他们利用了一个新的令牌=> ，看起来像一个粗箭头。箭头功能是匿名的，改变方式this函数绑定。

箭头函数使我们的代码更简洁，并简化了函数作用域和this关键字。它们是单行微型函数，其工作方式与Lambdas的其他语言（如C＃或Python）非常相似。（另请参见JavaScript中的lambdas ）。通过使用箭头函数，我们不必键入function关键字， return关键字（在箭头函数中隐含）和大括号。

使用箭头功能

箭头功能中有多种语法，其中MDN具有完整的列表。我们将在这里介绍一些常见的知识，以帮助您入门。让我们比较一下现在如何使用箭头函数在ES6中编写带有函数表达式的ES5代码。

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

// (param1, param2, paramN) => expression

// ES5
var multiplyES5 = function(x, y) {
  return x * y;
};

// ES6
const multiplyES6 = (x, y) => { return x * y };

JSBin的代码示例。

上面的箭头功能示例使开发人员可以用更少的代码行和大约一半的输入量来完成相同的结果。

如果仅存在一个表达式，则不需要花括号。前面的示例也可以写成：

const multiplyES6 = (x, y) => x * y;

一个参数的基本语法

仅存在一个参数时，括号是可选的

//ES5
var phraseSplitterEs5 = function phraseSplitter(phrase) {
  return phrase.split(' ');
};

//ES6
const phraseSplitterEs6 = phrase => phrase.split(" ");

console.log(phraseSplitterEs6("ES6 Awesomeness"));  // ["ES6", "Awesomeness"]

JSBin的代码示例。

没有参数

如果没有参数，则需要括号。

//ES5
var docLogEs5 = function docLog() {
    console.log(document);
};

//ES6
var docLogEs6 = () => { console.log(document); };
docLogEs6(); // #document... <html> ….

JSBin的代码示例。

对象文字语法

箭头函数（如函数表达式）可用于返回对象文字表达式。唯一需要注意的是，主体需要用括号括起来，以区分块和对象（两者都使用大括号）。

//ES5
var setNameIdsEs5 = function setNameIds(id, name) {
  return {
    id: id,
    name: name
  };
};

// ES6
var setNameIdsEs6 = (id, name) => ({ id: id, name: name });

console.log(setNameIdsEs6 (4, "Kyle"));   // Object {id: 4, name: "Kyle"}

JSBin的代码示例。

箭头功能的用例

既然我们已经介绍了基本语法，那么让我们开始研究如何使用箭头函数。

箭头功能的一种常见用例是数组操纵等。通常需要映射或缩小数组。拿这个简单的对象数组：

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

我们可以通过在ES5中执行以下操作来创建仅包含名称或价格的对象数组：

// ES5
var prices = smartPhones.map(function(smartPhone) {
  return smartPhone.price;
});

console.log(prices); // [649, 576, 489]

箭头功能更简洁，更易于阅读：

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

JSBin的代码示例。

这是另一个使用数组过滤器方法的示例：

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

// ES5
var divisibleByThrreeES5 = array.filter(function (v){
  return v % 3 === 0;
});

// ES6
const divisibleByThrreeES6 = array.filter(v => v % 3 === 0);

console.log(divisibleByThrreeES6); // [3, 6, 9, 12, 15]

JSBin的代码示例。

承诺和回调

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

// ES5
aAsync().then(function() {
  returnbAsync();
}).then(function() {
  returncAsync();
}).done(function() {
  finish();
});

这段代码经过简化，可以说使用箭头功能更容易阅读：

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

箭头函数应类似地简化负载回调的NodeJS代码。

这个东西的意思是什么？！

结合使用带有promise / callbacks的箭头功能的另一个好处是，它减少了围绕this关键字的混淆。在具有多个嵌套函数的代码中，可能很难跟踪并记住正确地绑定this上下文。在ES5中，可以使用诸如.bind方法（这种方法很慢）之类的变通方法，也可以使用var self = this;创建闭包var self = this; 。

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

显影剂杰克富兰克林提供了极好的使用词汇箭头函数的实际例子this简化一个承诺：

没有箭头功能，则应将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感到，使用Arrow函数有很多陷阱，可以在决定使用它们时保证使用此流程图。他认为，带有箭头功能的规则/语法太多了。其他人则建议使用箭头功能可以节省键入内容，但最终会使代码更难阅读。所有这些function和return语句可能使读取多个嵌套函数或仅读取函数表达式变得更容易。

开发人员的观点在几乎所有方面都各不相同，包括箭头功能。为了简洁起见，使用箭头功能时需要注意以下几点。

有关此的更多信息

如前所述， this关键字在箭头功能中的工作方式有所不同。方法call（），apply（）和bind（）不会更改箭头函数中this的值。（事实上，该值this函数内部根本无法改变，这将是相同的值，当函数被调用。）如果你需要绑定到不同的值，你需要使用的功能表达。

建设者

箭头函数不能像其他函数一样用作构造函数。不要像使用其他功能那样使用它们来创建类似的对象。如果尝试将new与箭头功能一起使用，则会引发错误。箭头函数（如内置函数（即方法））没有原型属性或其他内部方法。由于通常使用构造函数在JavaScript中创建类类对象，因此应改用新的ES6类。

发电机

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

参数对象

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

箭头功能有多少用处？

箭头功能被称为 ES6 最快的胜利之一。开发人员LarsSchöning阐述了他的团队如何决定在哪里使用箭头功能：

在全局范围内和Object.prototype属性中使用function 。
将class用于对象构造函数。
在其他任何地方都使用=> 。

箭头函数，如let和const ，很可能会成为默认函数，除非需要函数表达式或声明。为了了解可以使用多少个箭头函数， Kevin Smith计算了各种流行的库/框架中的函数表达式，发现大约55％的函数表达式可以用作箭头函数。

箭头功能在这里：它们功能强大，简洁，开发人员喜欢它们。也许是时候开始使用它们了！

Web开发更多动手

本文是Microsoft和DevelopIntelligence的Web开发系列的一部分，内容涉及实用的JavaScript学习，开源项目以及互操作性最佳实践，包括Microsoft Edge浏览器和新的EdgeHTML呈现引擎。 DevelopIntelligence为技术团队和组织提供讲师指导的JavaScript培训， AngularJS培训和其他Web开发培训。

我们鼓励您使用dev.microsoftedge.com上的免费工具跨浏览器和设备进行测试，包括Microsoft Edge（Windows 10的默认浏览器）：

向我们的工程师和福音传教士进行更深入的学习：

互操作性最佳实践 （系列）
GitHub上的编码实验室：跨浏览器测试和最佳实践
哇，我可以在Mac和Linux上测试Edge和IE！（来自Rey Bango）
在不中断网络的情况下推进JavaScript （摘自Christian Heilmann）
使用WebGL释放3D渲染（来自David Catuhe）
托管的Web应用程序和Web平台创新（来自Kiril Seksenov）

我们的社区开源项目：

vorlon.JS （跨设备远程JavaScript测试）
INITIJS （部署跨平台托管的Web应用程序）
babylonJS （简化 3D图形）

更多免费工具和后端Web开发人员资料：

Visual Studio代码（适用于Mac，Linux或Windows的轻型代码编辑器）
Visual Studio Dev Essentials （免费的，基于订阅的培训和云优势）
在Azure Cloud上使用node.JS进行试用

本文是Microsoft的Web开发系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

From: https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 Arrow函数：JavaScript中的简洁语法

这篇文章是在我们的书，功能实用ES6 。获取的ES6引入的新的语言特性的深刻理解。箭功能用ES6引入作为编写JavaScript函数一种新的语法。他们节省开发时间，简化的功能范围。调查显示，他们是最流行的ES6特点：来源：上最爱ES6功能阿克塞尔Rauschmayer先生调查来源： Ponyfoo对最常用的功能ES6调查好消息是，许多主要的现代浏览器支持使用箭头功能。...
复制链接

扫一扫