ECMAScript 6 學習系列課程 (ES6 箭頭函式的使用)
阿新 • • 發佈:2019-01-24
在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箭頭函式,不僅簡要,而且特別實用吧!