箭頭函數和普通函數的對比

一.基本語法

ES6 允許使用“箭頭”（=>）定義函數

var f = v => v

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

可以看出，定義箭頭函在數語法上要比普通函數簡潔得多。箭頭函數省去了function關鍵字，採用箭頭=>來定義函數。函數的參數放在=>前面的括號中，函數體跟在=>後的花括號中。

二.箭頭函數的參數

1、如果箭頭函數沒有參數，直接寫一個空括號即可:

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

2、如果箭頭函數的參數只有一個，也可以省去包裹參數的括號:

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

3、如果箭頭函數有多個參數，將參數依次用逗號(,)分隔，包裹在括號中即可:

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

二.箭頭函數的函數體

1、如果箭頭函數的函數體只有一句代碼，就是簡單返回某個變量或者返回一個簡單的JS表達式，可以省去函數體的大括號{ }。

var f = v => v

2、如果箭頭函數的函數體只有一句代碼，就是返回一個對象，要使用（）

// 用小括號包裹要返回的對象，不報錯
let getTempItem = id => ({ id: id, name: "Temp" });

// 但絕不能這樣寫，會報錯。
// 因爲對象的大括號會被解釋爲函數體的大括號
let getTempItem = id => { id: id, name: "Temp" };

3、如果箭頭函數的函數體只有一條語句並且不需要返回值（最常見是調用一個函數），可以給這條語句前面加一個void關鍵字

let fn = () => void doesNotReturn()

三.箭頭函數實際使用場景

1、箭頭函數可以與變量解構結合使用。可以用在請求接口時，只接受的返回數據中需要的字段。

const full = ({ first, last }) => first + ' ' + last;

// 等同於
function full(person) {
  return person.first + ' ' + person.last;
}

2、箭頭函數可以簡化回調函數。

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

// 箭頭函數寫法
[1,2,3].map(x => x * x);

3、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、箭頭函數沒有原型prototype

let a = () =>{};
console.log(a.prototype); // undefined

2、箭頭函數不會創建自己的this
箭頭函數不會創建自己的this，所以它沒有自己的this，它只會從自己的作用域鏈的上一層繼承this。
3、箭頭函數沒有自己的arguments

五.總結:

箭頭函數與普通函數的區別:
1.箭頭函數沒有原型prototype。
2.箭頭函數不會創建自己的this。
3.不能修改箭頭函數的this指向。
4.箭頭函數不能作爲構造函數使用。
5.箭頭函數沒有自己的arguments。（super、new.target也沒有）。
6.箭頭函數不支持重命名函數參數,普通函數的函數參數支持重命名。
7.語法更加簡潔、清晰。