文章引用：https://es6.ruanyifeng.com/#docs/function#箭頭函式

箭頭函式

基本用法

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 };
foo() // undefined

上面程式碼中，原始意圖是返回一個物件{ 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);

另一個例子是

// 正常函式寫法
var result = values.sort(function (a, b) {
  return a - b;
});

// 箭頭函式寫法
var result = values.sort((a, b) => a - b);

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

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

numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]

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

headAndTail(1, 2, 3, 4, 5)
// [1,[2,3,4,5]]

使用注意點

箭頭函式有幾個使用注意點。

（1）函式體內的this物件，就是定義時所在的物件，而不是使用時所在的物件。

（2）不可以當作建構函式，也就是說，不可以使用new命令，否則會丟擲一個錯誤。

（3）不可以使用arguments物件，該物件在函式體內不存在。如果要用，可以用 rest 引數代替。

（4）不可以使用yield命令，因此箭頭函式不能用作 Generator 函式。

上面四點中，第一點尤其值得注意。this物件的指向是可變的，但是在箭頭函式中，它是固定的。

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

var id = 21;

foo.call({ id: 42 });
// id: 42

上面程式碼中，setTimeout的引數是一個箭頭函式，這個箭頭函式的定義生效是在foo函式生成時，而它的真正執行要等到 100 毫秒後。如果是普通函式，執行時this應該指向全域性物件window，這時應該輸出21。但是，箭頭函式導致this總是指向函式定義生效時所在的物件（本例是{id: 42}），所以輸出的是42。