如何使用es6函數(shù)中的箭頭函數(shù)

這篇文章主要講解了如何使用es6函數(shù)中的箭頭函數(shù)，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

es6允許使用“箭頭”(=>)定義函數(shù)。

var f = v => v
// 等同于
var f = function(v) {
 return v
}

如果箭頭函數(shù)不需要參數(shù)或需要多個(gè)參數(shù)，就使用一個(gè)圓括號代表參數(shù)部分。

var f = () => 5
// 等同于
var f = function() {
 return 5
}

var sum = (num1, num2) => num1 + num2
// 等同于
var sum = function(num1, num2) {
 return num1 + num2
}

如果箭頭函數(shù)的代碼塊部分多于一條語句，就要使用大括號將它們括起來，并且使用return語句返回。

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

由于大括號被解釋為代碼塊，所以如果箭頭函數(shù)直接返回一個(gè)對象，必須在對象外面加上括號，否則會報(bào)錯(cuò)。

// 報(bào)錯(cuò)
let getTempItem = id => {id: id, name: "Temp"}
// 不報(bào)錯(cuò)
let getTempItem = id => ({id: id, name: "Temp"})

下面是一種特殊情況，雖然可以運(yùn)行，但會得到錯(cuò)誤的結(jié)果。

let foo = () => {a: 1}

上面代碼中，原始意圖是返回一個(gè)對象{a: 1}，但是由于引擎認(rèn)為大括號是代碼塊，所以執(zhí)行了一行語句a: 1，這時(shí)，a可以理解為語句的標(biāo)簽，因此實(shí)際執(zhí)行了語句是1,然后函數(shù)就結(jié)束了，沒有返回值。

如果箭頭函數(shù)只有一行語句，且不需要返回值，可以采用下面的寫法，就不用寫大括號了。

let fn = () => void doesNotReturn()

箭頭函數(shù)可以與變量解構(gòu)結(jié)合使用。

const full = ({first, last}) => first + ' ' + last
// 等同于
function full(person) {
 return person.first + ' ' + person.last
}

箭頭函數(shù)使用表達(dá)更簡潔。

const isEven = n => n % 2 === 0
const square = n => n * n

箭頭函數(shù)的一個(gè)用處是簡化回調(diào)函數(shù)。

// 正常函數(shù)寫法
[1, 2, 3].map(function(x) {
 return x * x
})
// 箭頭函數(shù)寫法
[1, 2, 3].map(x => x * x)

下面是rest參數(shù)與箭頭函數(shù)結(jié)合的例子。

const numbers = (...nums) => nums

numbers(1, 2, 3, 4, 5)

const headAndTail = (head, ...tail) => [head, tail]

headAndTail(1, 2, 3, 4, 5)

使用注意點(diǎn)

1）函數(shù)體內(nèi)的this對象，就是定義所在的對象，而不是使用時(shí)所在的對象。
2)不可以當(dāng)作構(gòu)造函數(shù)，也就是說，不可以使用new命令，否則會拋出一個(gè)錯(cuò)誤。
3）不可以使用arguments對象，該對象在函數(shù)體內(nèi)不存在，如果要用，可以用rest參數(shù)代替。
4）不可以使用yield命令，因此箭頭函數(shù)不能用作Generator函數(shù)。

function foo () {
 setTimeout(() => {
 console.log('id: ', this.id)
 }, 100)
}

var id = 21

foo.call({id: 42})

上面代碼中，setTimeout的參數(shù)是一個(gè)箭頭函數(shù)，這個(gè)箭頭函數(shù)的定義生效是在foo函數(shù)生成時(shí)，而它的真正執(zhí)行要等到100ms后。如果是普通函數(shù)，執(zhí)行時(shí)this應(yīng)該指向全局對象window,這時(shí)應(yīng)該輸出21。但是，箭頭函數(shù)導(dǎo)致this總是指向函數(shù)定義生效時(shí)所在的對象，所在輸出的是42.

箭頭函數(shù)根本沒有自己的this，導(dǎo)致內(nèi)部的this就是外層代碼塊的this,正是因?yàn)樗鼪]有this,所以也就不能用作構(gòu)造函數(shù)。

除了this,以下三個(gè)變量在箭頭函數(shù)之中也是不存在的：

arguments, super, new.target

別外，由于箭頭函數(shù)沒有自己的this,所以當(dāng)然也就不能用call(),apply(),bind()這些方法去改變this的指向。

(function() {
 return [
 (() => this.x).bind({x: 'inner'})()
 ]
}).call({x: 'outer'})

不適用場合

由于箭頭函數(shù)使得this從“動態(tài)”變成“靜態(tài)”，下面兩個(gè)場合不應(yīng)該使用箭頭函數(shù)。

第一個(gè)場合是定義函數(shù)的方法，且該方法內(nèi)部包括this.

window.lives = 100
var cat = {
 lives: 9,
 jumps: () => { this.lives--; console.log(this.lives)}
}

// 99

上面代碼中，cat.jumps()方法是一個(gè)箭頭函數(shù)，這是錯(cuò)誤的。調(diào)用cat.jumps()時(shí)，如果是普通函數(shù)，該方法內(nèi)部的this指向cat；如果寫成上面那樣的箭頭函數(shù)，使得this指向全局對象，因些不會得到預(yù)期結(jié)果。

第二個(gè)場合是需要動態(tài)this（事件監(jiān)聽）的時(shí)候，也不應(yīng)該使用箭頭函數(shù)。

var button = document.getElementById('press');
button.addEventListener('click', () => {
 this.classList.toggle('on');
});

上面代碼運(yùn)行時(shí)，點(diǎn)擊按鈕會報(bào)錯(cuò)，因?yàn)閎utton的監(jiān)聽函數(shù)是一個(gè)箭頭函數(shù)，導(dǎo)致里面的this就是全局對象。如果改成普通函數(shù)，this就會動態(tài)指向被點(diǎn)擊的按鈕對象。

看完上述內(nèi)容，是不是對如何使用es6函數(shù)中的箭頭函數(shù)有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。