您的位置:首页 > 其它

ECMAScript 6 学习系列课程 (ES6 箭头函数的使用)

2016-07-12 14:46 211 查看


在ES6语法中,简化了对函数的书写,其实,最初并不适应这样的写法,感觉很奇怪,但是永久了,发现这种方式更加直观,如果有了解swift语法的一定对箭头函数不陌生。

下面我们来看一下这个箭头函数在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; });


上面ES6语法中v,i 即为返回的参数,可能有些同学已经发现了有时候我们会在=>后面加上{}, 但是有的确没有加,区别在哪里呢?

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

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

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

再看一个foreach的用法:

nums.forEach(v => {
if (v % 5 === 0)
fives.push(v)
})


在箭头函数中,我们同样可以使用this语法,关于this相信大家都有一定了解,不做过多介绍了。

看一下ES6语法使用:

this.nums.forEach((v) => {
if (v % 5 === 0)
this.fives.push(v)
})


如果长书写ES5语法的同学发现,这种写法如果在ES5中会报错的,this. 不能被找到, 如果想用this,需要用bind 函数,或者定义self = this 例如:

//  variant 1
var self = this;
this.nums.forEach(function (v) {
if (v % 5 === 0)
self.fives.push(v);
});

//  variant 2 (since ECMAScript 5.1 only)
this.nums.forEach(function (v) {
if (v % 5 === 0)
this.fives.push(v);
}.bind(this));


怎么ES6箭头函数,不仅简要,而且特别实用吧!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ES6 函数