ECMAScript6中箭头函数的用法

ES6允许使用“箭头”(=>)定义函数

var f = v => v;

上面的箭头函数等同于:

var f = function(v){

       return v;

};


如果箭头函数不需要参数或者需要多个参数,就使用一个圆括号代表参数部分。

var f  = () => 5;

//等同于

var f  = function(){return 5};


var sum = (num1, num2) => num1 +num2;

//等同于

var sum = function(num1 , num2){

        return num1 + num2;

}


如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。

var sum = (num1, num2) => {return num1 + num2;}


由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。

var getTempItem = id => {{id: id,name: "Temp"}};


箭头函数可以与变量结合使用。

const full = ({ first,last }) => first +  ' ' + last;

//等同于

function full(person){

        return person.first + ' ' + person.last;

}


this 指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数。




箭头函数在ES6中的应用:

odds = evens.map( v => v+1 )

pairs = evens.map( v =>({even : v , odd : v + 1 }))

nums = evens.map((v,i) => v+i )


我们对比看一下如果用ES5改如何书写:

odds = evens.map(function(v) {return v+1;});

pairs = evens.map(function(v) {return {even :v , odd:v+1};});

nums = evens.map(function(v,i) {return v +i ;})


有的时候我们会在  => 后面加上{},但是有的却没有加,区别在哪呢?

首先,没有{},即执行完 默认返回,(return操作)。

如果有{}默认执行完是不返回的。

如果要返回一个对象,我们需要在 =>后面加上({})。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值