箭头函数()=＞是什么，有什么用？_()=>

箭头函数就是采用箭头=>来定义函数，省去关键字function。
函数的参数放在=>前面的括号中，函数体跟在=>后的花括号中。

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

// 等同于
let fn = function (name) {
    // 函数体
    return `Hello ${name} !`;
};
1
2
3
4
5
6
7
8
9
10
11

注意点：

1、形参个数如果为1个，可以省略小括号不写;

//只有一个参数，可以省去参数括号
    let fn = name => {
        console.log(`hello ${name}!`)
    };
1
2
3
4

2、如果函数体里面只有一个语句，可以省略大括号不写, 并且他会默认返回 => 符号后面的数据。

//返回某个简单变量val
let f = val => val;
// 等同于
let f = function (val) { return val };


//返回一个简单的js表达式num1+num2
let sum = (num1, num2) => num1 + num2;
// 等同于
let sum = function(num1, num2) {
  return num1 + num2;
};


1
2
3
4
5
6
7
8
9
10
11
12
13
14

3、如果函数体有多个语句，则不能省略大括号。

let fn = (val1, val2, val3, val4) => {
    return [val1, val2, val3, val4];
}
1
2
3

4、如果函数体只有一个语句，且返回一个对象，建议是，不要写简写的方式。

//错误写法—花括号会被解释为函数体，如果箭头函数的函数体只有一句代码，返回的不是变量和简单的js表达式，而是一个对象。
    let getItem = id => {
        id: id,
        name: 'gaby'
    };
//正确写法
    let getItem = id => ({
        id: id,
        name: 'gaby'
    });
1
2
3
4
5
6
7
8
9
10

箭头函数没有自己的作用域，即箭头函数 this 指向其外层作用域。