如何使用es6函數中的箭頭函數

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

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}

由于大括號被解釋為代碼塊，所以如果箭頭函數直接返回一個對象，必須在對象外面加上括號，否則會報錯。

// 報錯
let getTempItem = id => {id: id, name: "Temp"}
// 不報錯
let getTempItem = id => ({id: id, name: "Temp"})

下面是一種特殊情況，雖然可以運行，但會得到錯誤的結果。

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

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

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

let fn = () => void doesNotReturn()

箭頭函數可以與變量解構結合使用。

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

箭頭函數使用表達更簡潔。

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

箭頭函數的一個用處是簡化回調函數。

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

下面是rest參數與箭頭函數結合的例子。

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

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

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

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

使用注意點

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

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

var id = 21

foo.call({id: 42})

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

箭頭函數根本沒有自己的this，導致內部的this就是外層代碼塊的this,正是因為它沒有this,所以也就不能用作構造函數。

除了this,以下三個變量在箭頭函數之中也是不存在的：

arguments, super, new.target

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

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

不適用場合

由于箭頭函數使得this從“動態”變成“靜態”，下面兩個場合不應該使用箭頭函數。

第一個場合是定義函數的方法，且該方法內部包括this.

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

// 99

上面代碼中，cat.jumps()方法是一個箭頭函數，這是錯誤的。調用cat.jumps()時，如果是普通函數，該方法內部的this指向cat；如果寫成上面那樣的箭頭函數，使得this指向全局對象，因些不會得到預期結果。

第二個場合是需要動態this（事件監聽）的時候，也不應該使用箭頭函數。

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

上面代碼運行時，點擊按鈕會報錯，因為button的監聽函數是一個箭頭函數，導致里面的this就是全局對象。如果改成普通函數，this就會動態指向被點擊的按鈕對象。

看完上述內容，是不是對如何使用es6函數中的箭頭函數有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。