JS/TSES6

Arrow Functions, Rest params

  1. Extensions to Functions: Arrow Functions =>

    1
    2
    3
    let fn = function(m){return m}; //ordinary function
    let fn = (m) => {return m} //complete writing of arrow function
    let fn = m => m // shorthand arrow function

    Arrow function writing

    The complete writing of arrow function: just change the function before the parameter (m) in the ordinary function to the => after the parameter. (the first and second lines of the code)

    Arrow functions only have the declaration method of function literals, not the declaration method of function fn(){}; .

    Arrow function shorthand:

    1. If the arrow function has only one parameter, you can omit (). () cannot be omitted without arguments.

    2. If you want to return an expression (data) directly in an arrow function, you can omit {return} directly. Note that return AND {} must be omitted together. Omitting {return } is generally used when a function does not perform an operation and only wants to return a value. If there are other operations (such as conditional judgment) in {}, don’t save it.

      1
      2
      3
      4
      5
      6
      //correct way
      let fn = m => m;
      let fn = m => 100;
      let fn = m => m + 5;
      //wrong way
      let fn = m => {m + 5};

    3. If you want to return an object {}, there will be ambiguity, because the program parsing does not know whether it is the object {} or the function body {}. Therefore, when returning an object directly, you need to add a () outside, such as:

      1
      let fn = () => ({name:'Tom'})

    Arrow Function Features

    1. This pointer is static, this always points to the value of this in the scope where the function is declared.

      The this of a normal function points to the object on which the function was called. example:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      var x = 100;
      var obj = {
           x:10
           getX: function(){
               console.log(this.x)
           }
      }
      obj.getX() //10 The function called by obj, this points to obj
      a = obj.get;
      a(); //100 function called by window, this points to window

      In an arrow function, this points to the object where the function is defined, and will not change due to changes in the caller.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      var x = 100;
      var obj = {
           x:10
           getX = () => {
               console.log(this.x)
           }
      }
      obj.getX() //10 this points to obj
      a = obj.get;
      a(); //10 this points to obj

    1. Arrow functions cannot instantiate objects as constructors

      1
      2
      3
      4
      5
      6
      let Person = (name, age) => {
           this.name = name;
           this.age = age;
      }
      let me = new Person ('Tom', 30);
      console.log(me) //error

    2. Arguments variable cannot be used

      1
      2
      3
      4
      let fn = () => {
           console.log(arguments);
      }
      fn(1, 2, 3); //error. ReferenceError: arguments is not defined

  2. Arrow function concept example

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function Timer(){
         this.s1 = 0;
         this.s2 = 0;
         //arrow function
         setInterval(() => this.s1++, 1000);
         //normal function
         setInterval(function(){
             this.s2++;
         }, 1000)
    }
    var timer = new Timer()
    setTimeout(() => console.log('s1: ', timer.s1), 3100); //3
    setTimeout(() => console.log('s2: ', timer.s2), 3100); //0

    When timer = new Timer(), all the code in Timer is executed, including the timer part. Note that the timer is executed directly instead of being bound to the Timer.

    The error-prone thing is that timers are methods of the window object, not the timer object. Therefore, the timer is created by the timer object when timer = new Timer() (because the code in the constructor Timer is not executed until the Timer is called). This leads to the fact that when an arrow function is used, the this in the arrow function points to the creator timer of the function; and the caller of the timer is window. Therefore, in the case of non-arrow functions, this in the timer will point to the caller window of the timer.

    1
    2
    var fn = () => {console.log(this)};
    fn()

    The creator and caller of the arrow function in this example are both window.


  1. Rest parameter

    Used in place of arguments parameter in native JS. The rest parameter can get all the actual parameters of rest.

    arguments: The result is an object.

    1
    2
    3
    4
    function data(){
        console.log(arguments);
    }
    data('a', 'b', 'c');

    rest: result is an array

    rest is declared as …args.

    1
    2
    3
    4
    function data(...args){
        console.log(args);
    }
    data('a', 'b', 'c');

    Therefore, the rest parameters can use array methods, such as filter, some, every, map, which improves flexibility.

    The rest parameter must be placed at the end of the parameter.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function fn(a, b, ...args){
         console.log(a); //result is 1
         console.log(b); //The result is 2
         console.log(args); //results are 3, 4, 5, 6
    }
    fn(1, 2, 3, 4, 5, 6);

    //if...args put forward
    function fn(a, ...args, b){
         console.log(a);
         console.log(b);
         console.log(args);
    }
    fn(1, 2, 3, 4, 5, 6); // result error

  2. Function default parameters

    1
    2
    3
    4
    function sum(a = 1, b = 1) {
        return a + b
    }
    sum()

    When the number of parameters passed in is not enough, or when undefined is passed in, the default parameter value is used instead.


Share