企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

ES6箭头函数:JavaScript中丰富而简洁的语法

JavaScript笔记 码云 106℃ 0评论
目录
[隐藏]

箭头函数是在ES6中引入的,作为编写JavaScript函数的一种新语法。它们节省了开发人员的时间并简化了功能范围。调查显示,它们是最受欢迎的ES6功能:

资料来源:Axel Rauschmayer关于最喜欢的ES6功能的调查

本文将介绍箭头函数的细节——如何使用它们、常见语法、常见用例和陷阱。

什么是箭头函数?

箭头函数——也称为“胖箭头”函数,来自CoffeeScript(一种经过编译的语言)——是编写函数表达式的更简洁的语法。他们用了一个新的符号,= >,看起来像个大箭头。箭头函数是匿名的,它改变了绑定函数的方式。

箭头函数使我们的代码更简洁,并简化了函数范围和这个关键字。它们是单行迷你函数,工作原理与c#或Python等其他语言中的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 };

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

如果只有一个表达式,则不需要花括号。前面的例子也可以写成:

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"]

没有参数

没有参数时需要括号。

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

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

对象字面语法

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

//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"}

箭头函数的用例

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

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

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]

下面是另一个使用数组过滤器方法的例子:

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]

promises 和 Callbacks

使用异步Callback或Promises的代码通常包含大量函数和返回关键字。当使用Promises时,这些函数表达式将用于链接。下面是一个链接来自MSDN文档的Promises的简单示例:

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

这段代码被简化了,并且可以证明使用箭头函数更容易阅读:

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

箭头函数同样可以简化带有回调的NodeJS代码。

this代表什么意思

使用带promises/callbacks的箭头函数的另一个好处是,它减少了围绕这个关键字的混乱。在具有多个嵌套函数的代码中,很难跟踪并记住绑定正确的上下文。在ES5中,您可以使用变通方法,如.bind方法(它比较慢)或使用var self = this;创建闭包。

因为箭头函数允许您在函数中保留调用方的范围,所以您不需要创建self =this闭包或使用bind。

这里为大家提供了一个使用箭头函数简化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)认为,在决定使用箭头函数时,箭头函数有足够的缺陷来保证这个流程图。他认为箭头函数有太多令人困惑的规则/语法。其他人建议使用箭头函数可以节省输入,但最终会增加代码的可读性。所有这些函数和返回语句可能更容易读取多个嵌套函数或只是一般的函数表达式。

开发人员对几乎所有事情的看法都不同,包括箭头函数。为了简洁起见,在使用箭头函数时需要注意以下几点。

关于this

正如前面提到的,this关键字在箭头函数中工作方式不同。方法call()、apply()和bind()不会改变箭头函数中的值。(事实上,函数内部的this值是不能更改的;它将与调用函数时的值相同)。如果需要绑定到不同的值,则需要使用函数表达式。

构造函数

箭头函数不能像其他函数那样用作构造函数。不要像创建其他函数那样使用它们来创建类似的对象。如果尝试使用new和一个箭头函数,它将抛出一个错误。箭头函数与内置函数(又名方法)一样,没有原型属性或其他内部方法。因为构造函数通常用于在JavaScript中创建类对象,所以应该使用新的ES6类。

生成器

箭头函数是轻量级的,不能用作生成器。在ES6中使用yield关键字(类似 return 的语法)会抛出一个错误。使用ES6生成器代替。

参数对象

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

箭头函数有多大用处?

箭头函数被称为ES6中最快的胜利之一。开发人员Lars Schoning展示了他的团队决定如何使用以及在哪里使用箭头函数:

  • 在全局范围和对象中使用函数。原型属性。
  • 对象构造函数使用class。
  • 其他地方使用=>。

除非需要函数表达式或声明,否则像let和const这样的箭头函数很可能成为默认函数。为了了解可以使用多少箭头函数,Kevin Smith统计了各种流行库/框架中的函数表达式,发现大约55%的函数表达式是箭头函数的候选项。

箭头函数凭借它们强大、简洁的优点,使开发人员非常喜欢。你是时候开始使用它们了!

转载请注明:码云笔记 » ES6箭头函数:JavaScript中丰富而简洁的语法

喜欢 (3)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址