本文例項講述了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,3].map(x => x * x)

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

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

numbers(1,3,4,5)

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

headAndTail(1,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就會動態指向被點選的按鈕物件。

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容可檢視本站專題：《JavaScript常用函式技巧彙總》、《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。