1. 程式人生 > >ECMAScript 6 學習系列課程 (ES6 箭頭函式的使用)

ECMAScript 6 學習系列課程 (ES6 箭頭函式的使用)

這裡寫圖片描述

在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箭頭函式,不僅簡要,而且特別實用吧!