ES6中箭头函数的示例

　　介绍

这篇文章主要介绍ES6中箭头函数的示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

概述

箭头函数有两个作用:

<李>

更简短的写法

<李>

不绑定这

语法一表览

()=在{} 　　()=祝辞{console.log(& # 39;箭头# 39;),返回null} 　　()=祝辞& # 39;你好# 39; 　　(num1, num2)=祝辞num1 + num2 　　num=祝辞+ + num 　　()=祝辞({name: & # 39;箭头# 39;})

写法

正规一点

让添加=(num1, num2)=祝辞{ 　　返回num1 + num2 　　} 　　添加(1、2)

声明了一个添加变量,该变量是一个加法函数,该函数有两个形参:num1, num2,返回值为这两个参数相加的结果

单参数

让增量=num=祝辞{ 　　返回num + 1 　　}

上面声明了一个增量变量,该变量是一个自增函数,该参数只有一个形参num,返回值为该参数自增1,因为只有一个参数,所以可以省略箭头函数参数列表的()

无参数

让现在=()=比;{ 　　返回Date.now () 　　} 　　让现在==在{}//未捕获SyntaxError:意想不到的令牌==

上面声明了一个现在变量,该变量是一个函数,可以获取当前时间戳,因为不需要参数,所以参数列表置空,但是这种情况下不能将()省略,否则将导致语法错误

单一返回值

让现在=()=比;Date.now ()

上面函数还可以简写为以下方式,因为函数体只有一句话,所以可以省略<代码>{}和<代码>返回代码

单一返回值:返回对象字面量
虽然箭头函数可以省略{}和回报,但是在返回一个对象字面量的时候要格外注意,如果是像下面的写法,虽然在语法检查的时候不会报的错,但是和你所期望的可能不太一样,比如这里,你希望得到的数据是{名称:& # 39;你好# 39;},但是结果却是未定义的。

让数据=https://www.yisu.com/zixun/()=>{名称:‘你好’}//不会报的错 　　console.log(数据())//未定义的

为什么呢?用巴贝尔解析一下

ES6中箭头函数的示例

可以发现,被解析成了

var=https://www.yisu.com/zixun/function数据(){ 　　名称:“您好”; 　　};

并没有<代码> 4>

ES6中箭头函数的示例

所以,其实{名称:& # 39;你好# 39;}被解析成了函数体,{}是函数的{},而不是对象的{},而名字:& # 39;你好# 39;被解析成了语句,这种语句不常用,却是满足js语法的,叫做标签,案例:

var str=?”; 　　 　　loop1: 　　(var=0;我& lt;5;我+ +){ 　　如果(我===1){ 　　继续loop1; 　　} 　　str=str + i; 　　} 　　 　　console.log (str);//0234

所以如果箭头函数需要返回单一的对象字面量,需要加对<代码>()

让数据=https://www.yisu.com/zixun/()=>({名称:'你好'})

不绑定这

看下面一种情况

函数人(){ 　　这一点。年龄=0; 　　 　　setInterval(函数成长(){ 　　console.log (this.age) 　　},1000); 　　} 　　 　　var p=新人();

通常,我们希望在setInterval的回调函数中访问人的变量,比如年龄,但是每个新定义的函数都有自己的,所以这里的这个是成长的,这并不是人的,这将导致。年龄将会得到定义,为了解决这种问题,我们通常会使用折中的解决方案:

函数人(){ 　　这一点。年龄=0; 　　var=这 　　setInterval(函数成长(){ 　　console.log (that.age) 　　},1000); 　　} 　　 　　var p=新人();

用一个临时变量,来持有这个,避免使用成长的,这个时候就轮到箭头函数上场了:

函数人(){ 　　这一点。年龄=0; 　　setInterval()=比;{ 　　console.log (this.age) 　　},1000); 　　} 　　 　　var p=新人();

在箭头函数中,是不会绑定的,也就是他没有自己的,所以这个时候,他的这个问题,就这是人的。这就是所谓的箭头函数不绑定,而在我看来,回调函数就是箭头函数最好的归宿。
巴贝尔解析之后的结果其实还是老方法:

“使用strict"; 　　 　　函数的人(){ 　　var _this=; 　　 　　这一点。年龄=0; 　　setInterval(函数(){ 　　console.log (_this.age); 　　},1000); 　　} 　　 　　var p=新人();

ES6中箭头函数的示例