ES6中的箭头函数基础知识

箭头函数

箭头函数ES6 中函数定义不再使用关键字function，而是利用了（）=>来进行定义。

1.箭头函数的基础语法

箭头函数是一种更简洁的函数表达式，基本语法如下：

<script>

        //箭头函数ES6中的函数定义不再使用关键字，function(),而是利用了()=>来进行定义

        //传统函数表达式

        const add = function (a, b) {

            return a + b;

        }

        //箭头函数

        const addArrow = (a, b) => {

            return a + b;

        }

        console.log(addArrow(1, 2))

    </script>

</body>

</html>

(1)标准形式：(参数1, 参数2, …, 参数N) => { 函数体 }

    var arrowFunc1 = (x, y, z) => {

      if (x > 0){

        return y + z;

      }else{

        return y -z;

      }

    }

    a = arrowFunc1(1, 2, 3);  //5

    b = arrowFunc1(-1, 2, 3);  //-1

（2）如果函数体只有一个表达式，可以写成：简写体，省略 return

(参数1, 参数2, …, 参数N) => 表达式

    var arrowFunc = (x, y) => x + y;

    a = arrowFunc(1, 2);//3

（3）如果只有一个参数，可以写成：

单一参数 => {函数体}

单一参数 => 表达式

    var arrowFunc = x => x * 2;

    a = arrowFunc(2);//4

（4）如果没有参数，应该写成一对圆括号。

() => {函数体}

() => 表达式

    var arrowFunc = () => console.log('hello world');

    arrowFunc(); //hello world

（5）支持剩余参数和默认参数

(参数1, 参数2, ...rest) => {函数体}

(参数1 = 默认值1,参数2 = 默认值2, …, 参数N = 默认值N) => {函数体}

案例：求每个元素的长度：

    var materials = [

      'Hydrogen',

      'Helium',

      'Lithium',

      'Beryllium'

    ];

    // 使用普通函数: 求每个元素的长度

    a = materials.map(function(elem){

      return elem.length;

    }); //[8, 6, 7, 9]

    // 使用箭头函数: 求每个元素的长度

    a = materials.map(elem => elem.length); //[8, 6, 7, 9]

    // 多么简洁。简洁明了，

    // 节省打字时间，节省阅读时间，节省理解时间。

1. 不绑定this

在箭头函数出现之前，每个新定义的函数都有它自己的 this 值。

this 确实会带来一些问题，比如下面的内部函数中的 this 和外面的 this 分别指向不同的对象。

    function Person() {

      // Person() 构造函数定义 `this`作为它自己的实例.

      // 也就是说，这个 this 指向 Person() 的实例。

      this.age = 10;

      console.log("this.age=", this.age); //输出 10

      setInterval(function growUp() {

        // 在非严格模式, growUp()函数定义 `this`作为全局对象,

        // 与在 Person()构造函数中定义的 `this`并不相同.

        // 也就是说，这个 this 指向全局对象而不是 Person() 的实例，所以计算结果是 NaN

        this.age++;

        console.log("this.age=", this.age);

      }, 1000);

    }

a = new Person();

1. 箭头函数不绑定 arguments 对象

也就是说，在箭头函数内调用的 arguments 对象并不是箭头函数自身的，而是外层函数的。

或者说，箭头函数没有自身的 arguments 对象。

    function foo(n) {

      //普通函数内部的箭头函数：arguments[0] 是 n

      var f = () => arguments[0] + n;

      return f();   //不是返回箭头函数 f 而是返回 f 的计算结果

    }

    console.log(foo(3));  //输出：6

    // 不在普通函数内部，箭头函数调用 arguments 对象报错

    var arr = () => arguments[0];

    arr();

如果确实需要实现箭头函数与外层函数参数对象的分离，那么最好使用剩余参数（rest parameter）。

    function foo(n) {

      // 使用剩余参数实现箭头函数与外层函数参数对象的分离

      // args[0] 是箭头函数的第一个剩余参数 2，而不是 n

      var f = (...args) => args[0] + n;

      return f(2);

    }

    console.log(foo(1));//输出：3