箭头函数基本用法

（1）箭头函数基本用法及总结

 参数 => 函数体
 (参数) => {函数体}
 ​
        //通常情况下
         var f = function (b) {
             return b;
         }
         console.log(f(10));
 ​
         //箭头函数
         var fn = a => (a)
         console.log(fn(100));

写法注意：1、如果箭头函数不需要参数或需要多个参数，就使用一个（）代表参数部分

        //多个参数
        var fn1 = (c, d) => c + d
         console.log(fn1(2, 3));//5
         
        //不需要参数
         var fn2 = () => q + w
         console.log(fn1(5, 3));//8

写法注意：2、当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。

        //函数体内多行代码
         var fn1 = (c, d) => {
             let result = (c + d)
             return result
         }
         console.log(fn1(100, 300));//400

写法注意：3、由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

         var fn3 = (name, age) => ({ name: name, age: 19 })
         console.log(fn3('刘', 19));//{name: '刘', age: 19}

（2）箭头函数指向问题

1、对象中使用箭头函数，this表示全局Window对象

         var obj = {
             name: '刘',
             age: 20,
             say: function () {
                 console.log(this);
             },
             song: () => {
                 console.log(this);
             }
         }
         obj.say()//指向obj
         obj.song()//指向全局

注意：

• 箭头函数内没有 this、super、arguments 和 new.target

• 箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。（this对象的指向是可变的，但是在箭头函数中，它是固定的）

• 箭头函数不可以作为构造函数，也就是不能使用 new 命令，否则会报错

 var People = ()=>{
     console.log(this);
 }
 new People(); //TypeError: People is not a constructo

• 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。(...剩余运算符，表示剩下的所有参数集合在nums中，且多参数时只能放后面）

         const numbers = (...num1) => num1;
         console.log(numbers(1, 2, 3, 4, 5));
         // [1,2,3,4,5]
         const headAndTail = (one, ...tail) => [one, tail];
         console.log(headAndTail(1, 2, 3, 4, 5));
         // [1,[2,3,4,5]]

（3）箭头函数与解构赋值一起使用

1、变量为目标，返回值为数据源

 let cal = (a, b) => {
     return {
         add: a+b,
         sub: a-b,
         mul: a*b,
         div: a/b
     }; 
 }
 let {add, sub, mul, div} = cal(10, 5);

2、形参为目标，实参为数据源

 var show = ({one, two}) => {
     console.log(one + "---" + two);
 }
 show({one: "hello", two: "你好"});

（4）总结

• 要有个箭头

• 箭头的前面是小括号，放形参，只有一个形参的时候可以省略小括号；

• 箭头的后面是函数体；

• 如果函数体只有一个语句，没有{}，此时的返回值不需要return；

• 箭头函数里面的this总是指向最靠近的function 内部的this；

• 对象里面的方法，尽可能不要使用箭头函数；

• 箭头函数里面没有arguments，可以使用…reset，接收过来就是数组类型，接收的是形参之外的所有的实参；