箭头函数

箭头函数

1、最简单的，只有一个入参，返回语句也只有一句的，可以这么写。

     可以理解为 入参 => 出参

    let f1 = v => v;
    console.log(f1(3));   //3

    //等同于
    let f2 = function(v) {
        return v;
    };

    console.log(f2(2));   //2

    箭头函数将重点放在输入和输出的关系，省去其他代码

 

 

2、如果没有参数，或者多个参数，需要写()

 let f1 = () => 5;
console.log(f1());   //5

let sum = (num1 = 1, num2 = 2) => num1 + num2;
console.log(sum(4));   //6

   上段代码融合了箭头函数+解构赋值

 

 

3、如果箭头函数不只有return，那么就要用{}包起来

    let sum = (num1=3, num2=100) => {
        console.log(num1 + num2);
        return num1 + num2;
    };

 

 

4、由于箭头函数箭头所指的部分是函数代码，那么返回对象的时候，再用{}就会歧义。所以我们返回对象时，要用()把对象包起来。

    let getTempItem = id => ({ id: id, name: "Temp" });

    let ob = getTempItem(3);
    console.log(ob.id);
    console.log(ob.name);

 

 

5、箭头函数与解构赋值结合使用

    const full = ({ first, last }) => first + ' ' + last;

    let person = {
      first : 'zhang',
      last : 'mengh'
    };

    console.log(full(person));   //zhang mh

 

 

6、箭头函数让函数变得十分简洁

    const isEven = n => n % 2 == 0;

    console.log(isEven(3))  //false

 

 

7、在使用回调函数时

     这里要补充一个知识点，就是js的map()方法。

     map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

    let b = [1,2,3].map(function (x) { return x * 2; })
    console.log(b);    // 2, 4, 6

那么上段代码使用回调函数可以简化为

    let b = [1,2,3].map(x => x * 2);
    console.log(b);    // 2, 4, 6

 

 

8、rest参数、拓展运算符、箭头函数的混

    let fn1 = (...paramInt) => paramInt[0] * paramInt[1] * paramInt[2];
    console.log(fn1(2,2,3))    //12

    const numbers = (...nums) => nums;
    let result = numbers(1, 2, 3, 4, 5);
    console.log(result); // [1,2,3,4,5]


    result = numbers(2,...[6, 7, 8, 9, 0]);
    console.log(result); // [2,6, 7, 8, 9, 0]

    const headAndTail = (head, ...tail) => [head, tail];
    result = headAndTail(1, 2, 3, 4, 5);
    console.log(result);

 

注意

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。

  解释 (1) ，普通函数中this的指向是可变的，但是在箭头函数中，他是固定的。

    var id = 21;

    function fn01() {
        setTimeout(function () { console.log("-- fn01 id-- : ", this.id); }, 100);
    }

    fn01.call({id: 42});

   上段代码的输出毫无疑问，应该是21。此时this指的是全局对象window。

    var id = 21;

    function fn02() {
        setTimeout(() => { console.log("-- fn02 id-- : ", this.id);
        }, 100); }

    fn02.call({id: 42});

   上段代码中，当setTimeout()的回调函数是一个箭头函数时，会导致this总是指向函数定义时生效的对象。（本例是id:42），所以是42。