如何在JAVASCRIPT中使用ES6箭头函数

箭头函数是用JavaScript编写函数表达式的一种相对较新的方法。它们由

ECMAScript 6规范

引入，从那时起成为最受欢迎的ES6功能。箭头函数容许您使用粗箭头语法快速定义带或不带参数的JavaScript函数。它的最大优势是，在建立新的JavaScript函数时，您能够省略大括号和该函数，并返回关键字。

语法一开始可能看起来很奇怪，可是值得熟悉。箭头功能不只能够节省时间，并且还能够产生更具可读性的代码。许多JavaScript开发人员已经天天都在使用它们。

Mozilla开发人员网络就是这样定义

基本语法的

：

（param1，param2，...，paramN）=> {语句}
复制代码

在本教程中，咱们将研究一些实例，以了解如何在不一样的场景中建立箭头函数。

咱们还将使用较早的ECMAScript 5标记向您显示相同的代码，以便您能够看到两种语法之间的比较。

没有参数

最简单的箭头函数语法是该函数没有任何参数时。在下面的示例中，ECMAScript 5语法声明了一个函数表达式并将其分配给Birthday变量。它向控制台输出一个简单的文本字符串，说“生日快乐！”。

//没有参数的ES5语法
var Birthday = function（） {
    return “生日快乐！” ;
}

控制台 .log（Birthday（））;
// 生日快乐！复制代码

在箭头函数语法中，大括号以及function和return关键字消失。如今，整个功能仅需一行。空括号表示函数没有任何参数，而且粗箭头将函数主体绑定到（当前不存在的）参数。

//没有参数的ES6语法
var Birthday = （） =>  “生日快乐！” ;

console.log（Birthday（））;
// 生日快乐！复制代码

一个参数

让咱们用一个参数（特别是name）扩展前面的示例。旧的ES5语法采用一个参数，并将其值附加到要返回的字符串中：

//具备一个参数的ES5语法
var Birthday = function（name） {
    return “生日快乐，“ + name + “！” ;
}

console.log（Birthday（“约翰”））;//生日快乐，约翰！
复制代码

箭头函数的语法本质上是相同的。您须要将参数名称放在粗箭头以前的括号内，并在功能块中省略return关键字：

//具备一个参数的ES6语法
var Birthday = （name）=>  “生日快乐，” + name + “！” ;

console.log（Birthday（“简”））;//生日快乐，简！
复制代码

两个参数

您能够根据须要使用带有多个参数的箭头功能。例如，这是具备两个参数age和name的同一示例。如今，Birthday（）函数须要两个输入来返回字符串。

首先，让咱们使用ECMAScript 5：

//具备两个参数的ES5语法
var Birthday = function（age，name） {
    return  age + “岁生日快乐，” + name + “！” ;
}复制代码

console.log（Birthday（30，“ John”））;
// 30岁生日快乐，约翰！复制代码

并且，这是带有新ES6表示法的相同代码：

//具备两个参数的ES6语法
var Birthday = （age，name）=>  age + “岁生日快乐，” + name + “！” ;
console.log（Birthday（32，“简”））;// 32岁生日快乐，简！复制代码

若是函数声明太长或占用多行，您也能够将其括在大括号内，以下所示。可是，这样作时，也 老是必须将return关键字添加到功能块中。

//封装在功能块中的相同ES6功能
var Birthday = （age，name）=> {
    return age + “岁生日快乐，” + name + “！” ;
};

console.log（Birthday（34，“ James”））;
// 34岁生日快乐，詹姆斯！复制代码

条件语句

当您要在功能块中使用条件语句时，箭头函数也是一个很好的选择。如下脚本定义了一个简单的切换器，其中状态参数指示切换器是打开仍是关闭。

//使用ES5语法的条件语句
var switcher = function（state） {
    if（state == “ on”）{
       return “打开！” ;
   } else  if（state == “ off”）{
       return “关闭！” ;
   } else {
       return “切换台不起做用！” ;
   }
}

console.log（switcher（“ on”））;
// 打开！
复制代码

因为if-else块占用多行，所以须要在块的每一个部份内使用return关键字。除此以外，您可使用与之前相同的方式编写箭头函数：

//使用ES6语法的条件语句
var switcher = （state）=> {
    if（state == “ on”）{
       return “打开！” ;   } else  if（state == “ off”）{
       return “关闭！” ;
   } else {
       return “切换台不起做用！” ;
   }
}

console.log（switcher（“ off”））;
//关闭！
复制代码

对象文字

您还可使用箭头函数语法来声明setter函数，这些函数使用户能够设置

对象文字

的值。下面的setBirthday（）函数容许用户设置有生日的人的姓名和年龄：

//使用ES5语法的对象文字设置器
var setBirthday = function（name，age） {
    return {
       name：name，
       age：age
   }
}

console.log（setBirthday（“约翰”，30））;
//{name：“约翰”，age：30}
复制代码

经过使用箭头功能符号，只需一行就能够定义相同的setter函数：

//使用ES6语法的对象文字设置器
var setBirthday = （name，age）=>（{{ name：name，age：age}）;

console.log（setBirthday（“简”，32））;
//{name：“简”，age：32}
复制代码

阵列操做

您还可使用箭头函数来操纵JavaScript数组。例如，让咱们看一下包含三个对象的persons数组，每一个对象文字都具备ame和age属性：

var person= [
   { name：“约翰”，age：30 }，
   { name：“简”，age：32 }，
   { name：“詹姆斯”，age：34 }
];
复制代码

JavaScript的内置

map（）

方法使您能够在数组的每一个元素上调用相同的函数。使用传统的ES5表示法，您能够经过如下方式返回每一个人的name属性：

//使用ES5语法进行数组操做
var haveBirthday = person.map（function（person） {
    return person.name;
}）;

console.log（haveBirthday）;
// Array（3）[“约翰”，“简”，“詹姆斯”]
复制代码

使用箭头功能符号，您能够在一行中执行相同的任务：

//使用ES6语法进行数组操做
var haveBirthday = person.map（person => person.name）;

console.log（haveBirthday）;
// Array（3）[“约翰”，“简”，“詹姆斯”]
复制代码

什么时候不使用箭头功能

尽管箭头功能有许多用例，但它们也有一些限制。在某些状况下，您不能或不该该使用箭头函数语法。

最重要的是，您不能使用箭头函数建立构造函数。若是将new关键字与粗箭头语法一块儿使用，则控制台将引起错误。发生这种状况是由于JavaScript与对象方法对待箭头功能的方式相同。结果，它们不能拥有本身的方法，这将是JavaScript对象的基本特征。

此外，您不能使用ES6语法来声明对象文字和包含使用this关键字的方法的回调函数，由于箭头函数以不一样的方式对待它。

总结

箭头函数为开发人员提供了有用的快捷方式，能够用JavaScript编写函数表达式。箭头语法有不少用例，所以已迅速成为JavaScript社区最喜欢的ES6功能。若是一导致用，新的方法能够节省大量时间和带宽，并提升代码的可读性。

要了解有关JavaScript开发的更多信息，还能够关注如下公众号：