箭头函数和普通函数的对比

一.基本语法

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.语法更加简洁、清晰。