html es表达式传参,深入浅出ES6新特性之函数默认参数和箭头函数

1、函数参数的默认值

ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式:

fd256180d8f73c2bb77d28c5680e9ed5.png

从上面的代码可以看出存在一个问题,当传入的参数为0或者false时,会直接取到后面的值,而不是传入的这个参数值。

那怎么解决呢?对于上图的代码,可以通过判断是否传入了num参数,没有就用默认值:

df9ed92d29eb6a0c5e9a12463ae00bb2.png

这种做法还是很麻烦的,而ES6则直接在参数定义里面设置函数参数的默认值,而且不用担心传入参数是0或者false会出错了:

2ad04c2d5ebba5c0b9eae5237dddbfcc.png

2、箭头函数

箭头函数用 => 符号来定义。

箭头函数相当于匿名函数,所以采用函数表达式的写法。

左边是传入函数的参数,右边是函数中执行的语句。

57329eb8ab478ae62a57cb0572ed1168.png

上面是完整的写法,左边小括号,右边大括号,而下面的情况可以简写:

(1)当要执行的代码块只有一条return语句时,可省略大括号和return关键字:

60c5b1b2f2f0e1e8b59ac95bc2955308.png

箭头函数在回调函数中是很简洁的,像这样:

d904e563ece8ceea42683c459fab4dea.png

需要注意的是, 箭头函数没有自己的this、arguments、super、new.target,它们分别指向外层函数的相应变量。

以前在ES5中使用this有点麻烦,这种问题很常见:

131ffae31a329a6f4823c64e46b1936d.png

但是现在有了箭头函数,不再需要使用that = this或 _this = this 这种代码啦,因为箭头函数中的this直接就是外层函数中的this,代码更简单了:

57cbe9b5403fc0613bdaff2c6bd37ddf.png

以上所述是小编给大家介绍的A深入浅出ES6新特性之函数默认参数和箭头函数,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值