码云前端开发 2018-11-27

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

文章目录隐藏

什么是箭头函数?
使用箭头函数
具有多个参数的基本语法(来自 MDN)
一个参数的基本语法
没有参数
对象字面语法
箭头函数的用例
promises 和 Callbacks
this 代表什么意思
箭头函数的缺陷和陷阱

关于 this
构造函数
生成器
参数对象

箭头函数有多大用处?

箭头函数是在 ES6 中引入的，作为编写 JavaScript 函数的一种新语法。它们节省了开发人员的时间并简化了功能范围。调查显示，它们是最受欢迎的 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...  ….

对象字面语法

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

//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 类。