李厚春吧 关注:3贴子:238
  • 13回复贴,共1

【箭头函数】=> 语法说明

只看楼主收藏回复

es6 允许使用箭头来定义函数


IP属地:河南1楼2017-05-19 14:14回复
    基本用法
    ES6允许使用“箭头”(=>)定义函数。
    var f = v => v;
    上面的箭头函数等同于:
    var f = function(v) {
    return v;
    };
    如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
    var f = () => 5;
    // 等同于
    var f = function () { return 5 };
    var sum = (num1, num2) => num1 + num2;
    // 等同于
    var sum = function(num1, num2) {
    return num1 + num2;
    };
    如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
    var sum = (num1, num2) => { return num1 + num2; }
    由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。
    var getTempItem = id => ({ id: id, name: "Temp" });


    IP属地:河南2楼2017-05-19 14:14
    回复
      箭头函数可以和变量解构综合应用
      const fn = ({first, last}) => first + '' + last;
      // 等同于
      function full(person) {
      return person.first + ' ' + person.last;
      }


      IP属地:河南3楼2017-05-19 14:15
      回复
        箭头函数可以简化回调函数:
        正常的写法是:
        [1, 2, 3].map(function(x) {return x*x})
        用箭头函数这样写:
        [1, 2, 3].map(x => x*x)
        另外一个例子:
        // 正常函数写法
        var result = values.sort(function (a, b) {
        return a - b;
        });
        用箭头函数这样写:
        var result = values.sort((a, b) => a-b);


        IP属地:河南4楼2017-05-19 14:22
        回复
          我们还可以将rest参数与箭头函数结合使用:
          const num = (...sums) => sums;
          num(1,2,3,4)
          // [1,2,3,4]
          const headAndTail = (head, ...tail) => [head, tail];
          headAndTail(1, 2, 3, 4, 5)
          // [1,[2,3,4,5]]


          IP属地:河南5楼2017-05-19 14:28
          回复
            箭头函数可以让setTImeout里面的this,绑定定义时候的作用域,而不是指向运行时的作用域。下面是另外一个例子:
            function Timer() {
            this.s1 = 0;
            this.s2 = 0;
            // 箭头函数
            setInterval(() => this.s1++, 1000);
            // 普通函数
            setInterval(function () {
            this.s2++;
            }, 1000);
            }
            上面代码中,Timer函数内部设置了两个定时器,分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域(即Timer函数),后者的this指向运行时所在的作用域(即全局对象)。所以,3100毫秒之后,timer.s1被更新了3次,而timer.s2一次都没更新。
            var timer = new Timer();
            setTimeout(() => console.log('s1: ', timer.s1), 3100);
            setTimeout(() => console.log('s2: ', timer.s2), 3100);
            // s1: 3
            // s2: 0


            IP属地:河南7楼2017-05-19 14:45
            回复
              箭头函数可以让this指向固定化,这种特性很有利于封装回调函数。下面是一个例子,DOM事件的回调函数封装在一个对象里面。
              var handler = {
              id: '123456',
              init: function() {
              document.addEventListener('click',
              event => this.doSomething(event.type), false);
              },
              doSomething: function(type) {
              console.log('Handling ' + type + ' for ' + this.id);
              }
              };
              上面代码的init方法中,使用了箭头函数,这导致这个箭头函数里面的this,总是指向handler对象。否则,回调函数运行时,this.doSomething这一行会报错,因为此时this指向document对象。
              this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数。
              所以,箭头函数转成ES5的代码如下。
              // ES6
              function foo() {
              setTimeout(() => {
              console.log('id:', this.id);
              }, 100);
              }
              // ES5
              function foo() {
              var _this = this;
              setTimeout(function () {
              console.log('id:', _this.id);
              }, 100);
              }
              上面代码中,转换后的ES5版本清楚地说明了,箭头函数里面根本没有自己的this,而是引用外层的this。


              IP属地:河南8楼2017-05-19 14:56
              回复
                箭头函数的嵌套:
                箭头函数内部,还可以再使用箭头函数。下面是一个ES5语法的多重嵌套函数。
                function insert(value) {
                return {into: function (array) {
                return {after: function (afterValue) {
                array.splice(array.indexOf(afterValue) + 1, 0, value);
                return array;
                }};
                }};
                }
                insert(2).into([1, 3]).after(1); //[1, 2, 3]
                上面这个函数,可以使用箭头函数改写。
                let insert = (value) => ({into: (array) => ({after: (afterValue) => {
                array.splice(array.indexOf(afterValue) + 1, 0, value);
                return array;
                }})});
                insert(2).into([1, 3]).after(1); //[1, 2, 3]
                下面是一个部署管道机制(pipeline)的例子,即前一个函数的输出是后一个函数的输入。
                const pipeline = (...funcs) =>
                val => funcs.reduce((a, b) => b(a), val);
                const plus1 = a => a + 1;
                const mult2 = a => a * 2;
                const addThenMult = pipeline(plus1, mult2);
                addThenMult(5)
                // 12
                如果觉得上面的写法可读性比较差,也可以采用下面的写法。
                const plus1 = a => a + 1;
                const mult2 = a => a * 2;
                mult2(plus1(5))
                // 12


                IP属地:河南10楼2017-05-19 15:40
                回复
                  绑定 this
                  箭头函数可以绑定this对象,大大减少了显式绑定this对象的写法(call、apply、bind)。但是,箭头函数并不适用于所有场合,所以ES7提出了“函数绑定”(function bind)运算符,用来取代call、apply、bind调用。虽然该语法还是ES7的一个提案,但是Babel转码器已经支持。
                  函数绑定运算符是并排的两个双冒号(::),双冒号左边是一个对象,右边是一个函数。该运算符会自动将左边的对象,作为上下文环境(即this对象),绑定到右边的函数上面。
                  foo::bar;
                  // 等同于
                  bar.bind(foo);
                  foo::bar(...arguments);
                  // 等同于
                  bar.apply(foo, arguments);
                  const hasOwnProperty = Object.prototype.hasOwnProperty;
                  function hasOwn(obj, key) {
                  return obj::hasOwnProperty(key);
                  }
                  如果双冒号左边为空,右边是一个对象的方法,则等于将该方法绑定在该对象上面。
                  var method = obj::obj.foo;
                  // 等同于
                  var method = ::obj.foo;
                  let log = ::console.log;
                  // 等同于
                  var log = console.log.bind(console);
                  由于双冒号运算符返回的还是原对象,因此可以采用链式写法。
                  // 例一
                  import { map, takeWhile, forEach } from "iterlib";
                  getPlayers()
                  ::map(x => x.character())
                  ::takeWhile(x => x.strength > 100)
                  ::forEach(x => console.log(x));
                  // 例二
                  let { find, html } = jake;
                  document.querySelectorAll("div.myClass")
                  ::find("p")
                  ::html("hahaha");


                  IP属地:河南11楼2017-05-19 15:42
                  回复
                    什么是尾调用?
                    尾调用(Tail Call)是函数式编程的一个重要概念,本身非常简单,一句话就能说清楚,就是指某个函数的最后一步是调用另一个函数。
                    function f(x){
                    return g(x);
                    }
                    上面代码中,函数f的最后一步是调用函数g,这就叫尾调用。
                    以下三种情况,都不属于尾调用。
                    // 情况一
                    function f(x){
                    let y = g(x);
                    return y;
                    }
                    // 情况二
                    function f(x){
                    return g(x) + 1;
                    }
                    // 情况三
                    function f(x){
                    g(x);
                    }
                    上面代码中,情况一是调用函数g之后,还有赋值操作,所以不属于尾调用,即使语义完全一样。情况二也属于调用后还有操作,即使写在一行内。情况三等同于下面的代码。
                    function f(x){
                    g(x);
                    return undefined;
                    }
                    尾调用不一定出现在函数尾部,只要是最后一步操作即可。
                    function f(x) {
                    if (x > 0) {
                    return m(x)
                    }
                    return n(x);
                    }
                    上面代码中,函数m和n都属于尾调用,因为它们都是函数f的最后一步操作。


                    IP属地:河南12楼2017-05-19 15:47
                    回复
                      尾调用优化
                      尾调用之所以与其他调用不同,就在于它的特殊的调用位置。
                      我们知道,函数调用会在内存形成一个“调用记录”,又称“调用帧”(call frame),保存调用位置和内部变量等信息。如果在函数A的内部调用函数B,那么在A的调用帧上方,还会形成一个B的调用帧。等到B运行结束,将结果返回到A,B的调用帧才会消失。如果函数B内部还调用函数C,那就还有一个C的调用帧,以此类推。所有的调用帧,就形成一个“调用栈”(call stack)。
                      尾调用由于是函数的最后一步操作,所以不需要保留外层函数的调用帧,因为调用位置、内部变量等信息都不会再用到了,只要直接用内层函数的调用帧,取代外层函数的调用帧就可以了。
                      function f() {
                      let m = 1;
                      let n = 2;
                      return g(m + n);
                      }
                      f();
                      // 等同于
                      function f() {
                      return g(3);
                      }
                      f();
                      // 等同于
                      g(3);
                      上面代码中,如果函数g不是尾调用,函数f就需要保存内部变量m和n的值、g的调用位置等信息。但由于调用g之后,函数f就结束了,所以执行到最后一步,完全可以删除f(x)的调用帧,只保留g(3)的调用帧。
                      这就叫做“尾调用优化”(Tail call optimization),即只保留内层函数的调用帧。如果所有函数都是尾调用,那么完全可以做到每次执行时,调用帧只有一项,这将大大节省内存。这就是“尾调用优化”的意义。
                      注意,只有不再用到外层函数的内部变量,内层函数的调用帧才会取代外层函数的调用帧,否则就无法进行“尾调用优化”。
                      function addOne(a){
                      var one = 1;
                      function inner(b){
                      return b + one;
                      }
                      return inner(a);
                      }
                      上面的函数不会进行尾调用优化,因为内层函数inner用到了外层函数addOne的内部变量one。


                      IP属地:河南13楼2017-05-19 15:52
                      回复
                        尾递归
                        函数调用自身,称为递归。如果尾调用自身,就称为尾递归。
                        递归非常耗费内存,因为需要同时保存成千上百个调用帧,很容易发生“栈溢出”错误(stack overflow)。但对于尾递归来说,由于只存在一个调用帧,所以永远不会发生“栈溢出”错误。
                        function factorial(n) {
                        if (n === 1) return 1;
                        return n * factorial(n - 1);
                        }
                        factorial(5) // 120
                        上面代码是一个阶乘函数,计算n的阶乘,最多需要保存n个调用记录,复杂度 O(n) 。
                        如果改写成尾递归,只保留一个调用记录,复杂度 O(1) 。
                        function factorial(n, total) {
                        if (n === 1) return total;
                        return factorial(n - 1, n * total);
                        }
                        factorial(5, 1) // 120
                        还有一个比较著名的例子,就是计算 Fibonacci 数列,也能充分说明尾递归优化的重要性。
                        非尾递归的 Fibonacci 数列实现如下。
                        function Fibonacci (n) {
                        if ( n <= 1 ) {return 1};
                        return Fibonacci(n - 1) + Fibonacci(n - 2);
                        }
                        Fibonacci(10) // 89
                        Fibonacci(100) // 堆栈溢出
                        Fibonacci(500) // 堆栈溢出
                        尾递归优化过的 Fibonacci 数列实现如下。
                        function Fibonacci2 (n , ac1 = 1 , ac2 = 1) {
                        if( n <= 1 ) {return ac2};
                        return Fibonacci2 (n - 1, ac2, ac1 + ac2);
                        }
                        Fibonacci2(100) // 573147844013817200000
                        Fibonacci2(1000) // 7.0330367711422765e+208
                        Fibonacci2(10000) // Infinity
                        由此可见,“尾调用优化”对递归操作意义重大,所以一些函数式编程语言将其写入了语言规格。ES6 是如此,第一次明确规定,所有 ECMAScript 的实现,都必须部署“尾调用优化”。这就是说,ES6 中只要使用尾递归,就不会发生栈溢出,相对节省内存。


                        IP属地:河南14楼2017-05-19 16:06
                        回复
                          递归函数的改写
                          尾递归的实现,往往需要改写递归函数,确保最后一步只调用自身。做到这一点的方法,就是把所有用到的内部变量改写成函数的参数。比如上面的例子,阶乘函数 factorial 需要用到一个中间变量total,那就把这个中间变量改写成函数的参数。这样做的缺点就是不太直观,第一眼很难看出来,为什么计算5的阶乘,需要传入两个参数5和1?
                          两个方法可以解决这个问题。方法一是在尾递归函数之外,再提供一个正常形式的函数。
                          function tailFactorial(n, total) {
                          if (n === 1) return total;
                          return tailFactorial(n - 1, n * total);
                          }
                          function factorial(n) {
                          return tailFactorial(n, 1);
                          }
                          factorial(5) // 120
                          上面代码通过一个正常形式的阶乘函数factorial,调用尾递归函数tailFactorial,看起来就正常多了。
                          函数式编程有一个概念,叫做柯里化(currying),意思是将多参数的函数转换成单参数的形式。这里也可以使用柯里化。
                          function currying(fn, n) {
                          return function (m) {
                          return fn.call(this, m, n);
                          };
                          }
                          function tailFactorial(n, total) {
                          if (n === 1) return total;
                          return tailFactorial(n - 1, n * total);
                          }
                          const factorial = currying(tailFactorial, 1);
                          factorial(5) // 120
                          上面代码通过柯里化,将尾递归函数tailFactorial变为只接受一个参数的factorial。
                          第二种方法就简单多了,就是采用 ES6 的函数默认值。
                          function factorial(n, total = 1) {
                          if (n === 1) return total;
                          return factorial(n - 1, n * total);
                          }
                          factorial(5) // 120
                          上面代码中,参数total有默认值1,所以调用时不用提供这个值。
                          总结一下,递归本质上是一种循环操作。纯粹的函数式编程语言没有循环操作命令,所有的循环都用递归实现,这就是为什么尾递归对这些语言极其重要。对于其他支持“尾调用优化”的语言(比如Lua,ES6),只需要知道循环可以用递归代替,而一旦使用递归,就最好使用尾递归。


                          IP属地:河南15楼2017-05-19 16:13
                          回复