ES6系列之箭头函数全解析

引言

ES6中允许使用箭头=>来定义箭头函数，是ES6中较受欢迎也较常使用的新增特性。本文将从箭头函数的基本语法，与普通函数对比，箭头函数不适用场景三个方面进行梳理。

基本语法

// 箭头函数
let func = (name) => {
   
    // 函数体
    return `Hello ${
     name}`;
};

// 等同于
let func = function (name) {
   
    // 函数体
    return `Hello ${
     name}`;
};   

从上面可以看出，定义箭头函数语法上要比普通函数简洁得多。箭头函数省去了function关键字，采用箭头=>来定义函数。函数的参数放在=>前面的括号中，函数体跟在=>后的花括号中，箭头函数在参数和箭头之间不能换行。

箭头函数的参数

1. 如果箭头函数没有参数，直接写一个空括号即可。
2. 如果箭头函数的参数只有一个，可以省略包裹参数的括号。
3. 如果箭头函数有多个参数，将参数依次用逗号分隔，参数必须被包裹在括号中。

箭头函数的函数体

如果箭头函数的函数体只有一句代码，即返回某个变量或者返回一个简单的JS表达式，可以省去函数体的大括号{ }。

let func = val => val;
// 等同于
let func = function (val) {
    return val };

let sum = (num1, num2) => num1 + num2;
// 等同于
let sum = function(num1, num2) {
   
  return num1 + num2;
};

let mulFunction = (num1, num2 ,num3) => num1 * num2 * num3;
// 等同于
let mulFunction = function(num1, num2 ,num3) {
   
    return num1 * num2 * num3;
}

箭头函数返回一个对象

如果箭头函数的函数体只有一句代码且返回一个对象（对象字面量）时，直接写一个表达式是不行的。

let func = () => {
    foo: 1 }; 
console.log(func()); // 执行后返回undefined

// 如果是这样还会直接报错
let func