JavaScript箭头函数与普通函数的区别

一、什么是箭头函数？

箭头函数用更简洁的方式，来完成普通函数的功能，但是不具备普通函数拥有的属性：this、 arguments、 super、 new.target，有两种表达形式：

1、(…args) => expression

args表示参数有0个、1个、多个；expression表示一个js表达式，只有一行代码。

2、 (…args) => { body }

args表示参数有0、1、多个；body表示有多行代码，最后一行必须是 return语句。

二、不同表达形式：

1、参数不同，写法不同

// 1、没有参数
let test = () => alert("Hello!");

// 2、只有一个参数：() 可以省略
let test = n => n * 2;
let test = (n) => n * 2;

// 等价于下面普通函数
let test = function (n) {
    return expression;
};

2、表达式不同，写法不同

// 1、只有一行 return 表达式，可省略 return 和 {}
let func = (arg1, arg2, ...argN) => {
  return expression;
}
// 等价于下面箭头函数
let func = (arg1, arg2, ...argN) => expression

// 等价于下面普通函数。
let func = function (arg1, arg2, ...argN) {
    return expression;
};

3、用于条件运算符

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
    () => alert('Hello') :
    () => alert("Greetings!");

welcome();

4、用于数组遍历

var elements = [
    'Hydrogen',
    'Helium',
    'Lithium',
    'Beryllium'
];

// 1、普通函数写法：
elements.map(function (element) {
    return element.length;
});

// 2、箭头函数写法：
elements.map((element) => {
    return element.length;
});

// 3、只有一个参数，可省略()
elements.map(element => {
    return element.length;
});

// 4、表达式只有一行return语句，可省略  return  和 {}
elements.map(element => element.length);

// 5、参数解构方式
// elements数组中每一项都有length属性，可以通过参数解构获得结果，方法如下：
// 注意：lengthFooBArX只是一个变量，可以替换成任意合法变量名
elements.map(({ "length": lengthFooBArX }) => lengthFooBArX);

// 以上输出结果都为: [8, 6, 7, 9]

5、用于递归

var fact = (x) => (x == 0 ? 1 : x * fact(x - 1));
fact(5);

// 输出：120

6、使用闭包

// 1、箭头函数体的闭包（ i=0 是默认参数）
var Add = (i = 0) => {
    return (() => (++i))
};
var v = Add();
v();           //1
v();           //2

// 因为仅有一个返回，return 及括号（）也可以省略
var Add = (i = 0) => () => (++i);