首页 > 语言 > JavaScript > 正文

JavaScript ES6箭头函数使用指南

2024-05-06 15:43:39
字体:
来源:转载
供稿:网友

胖箭头函数(Fat arrow functions),又称箭头函数,是一个来自ECMAScript 2015(又称ES6)的全新特性。有传闻说,箭头函数的语法=>,是受到了CoffeeScript 的影响,并且它与CoffeeScript中的=>语法一样,共享this上下文。

箭头函数的产生,主要由两个目的:更简洁的语法和与父作用域共享关键字this。接下来,让我们来看几个详细的例子。

新的函数语法

传统的JavaScript函数语法并没有提供任何的灵活性,每一次你需要定义一个函数时,你都必须输入function () {}。
CoffeeScript如今之所以那么火,有一个不可忽略的原因就是它有更简洁的函数语法。更简洁的函数语法在有大量回调函数的场景下好处特别明显,让我们从一个Promise链的例子看起:

function getVerifiedToken(selector) { return getUsers(selector)  .then(function (users) { return users[0]; })  .then(verifyUser)  .then(function (user, verifiedToken) { return verifiedToken; })  .catch(function (err) { log(err.stack); });}

以下是使用新的箭头函数语法进行重构后的代码:

function getVerifiedToken(selector) { return getUsers(selector)  .then(users => users[0])  .then(verifyUser)  .then((user, verifiedToken) => verifiedToken)  .catch(err => log(err.stack));}

以下是值得注意的几个要点:

function和{}都消失了,所有的回调函数都只出现在了一行里。
当只有一个参数时,()也消失了(rest参数是一个例外,如(...args) => ...)。
当{}消失后,return关键字也跟着消失了。单行的箭头函数会提供一个隐式的return(这样的函数在其他编程语言中常被成为lamda函数)。
这里再着重强调一下上述的最后一个要求。仅仅当箭头函数为单行的形式时,才会出现隐式的return。当箭头函数伴随着{}被声明,那么即使它是单行的,它也不会有隐式return:

const getVerifiedToken = selector => { return getUsers()  .then(users => users[0])  .then(verifyUser)  .then((user, verifiedToken) => verifiedToken)  .catch(err => log(err.stack));}

如果我们的函数内只有一条声明(statement),我们可以不写{},这样看上去会和CoffeeScript中的函数非常相似:

const getVerifiedToken = selector => getUsers()  .then(users => users[0])  .then(verifyUser)  .then((user, verifiedToken) => verifiedToken)  .catch(err => log(err.stack));

你没有看错,以上的例子是完全合法的ES6语法。当我们谈论只包含一条声明(statement)的箭头函数时,这并不意味着这条声明不能够分成多行写。

这里有一个坑,当忽略了{}后,我们该怎么返回空对象({})呢?

const emptyObject = () => {};emptyObject(); // ?            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选