ES Function

作者: 碧玉疾风丶 | 来源:发表于2017-03-01 18:17 被阅读0次

    检查本地Node版本对ES6支持情况:

    npm -g install es-checker
    es-checker

    执行结果如下图:
    node 6.10.0支持率为90%


    安装bable

    npm --save-dev install babel-cli
    npm --g install babel-cli

    至于--save-dev --g同时使用,搜了如下:


    安装完babel-cli之后,直接执行如下即可

    babel-node filename

    <br />
    <br />

    ES6中函数的拓展

    支持如下设置默认值

    function Point(x = 0, y = 0) {
      this.x = x;
      this.y = y;
    }
    var p = new Point();// { x: 0, y: 0 }
    

    <br />

    解构赋值

    function m1({x = 0, y = 0} = {}) {
      return [x, y];
    }
    
    function m2({x, y} = { x: 0, y: 0 }) {
      return [x, y];
    }
    
    // 综述,{}={},右边的值会被函数传入值所替代
    
    m1() // [0, 0]
    m2() // [0, 0]
    m1({x: 3, y: 8}) // [3, 8]
    m2({x: 3, y: 8}) // [3, 8]
    m1({x: 3}) // [3, 0]
    m2({x: 3}) // [3, undefined]
    m1({}) // [0, 0];
    m2({}) // [undefined, undefined]
    m1({z: 3}) // [0, 0]
    m2({z: 3}) // [undefined, undefined]
    

    <br />

    传入undefine会被默认值覆盖,null不会

    function foo2(x = 5, y = 6) {
      console.log(x, y);
    }
    
    foo2(undefined, null)
    // 5 null
    

    <br />

    function().length

    
    //  返回有默认值参数之前,未设默认值的参数个数
    (function (a) {}).length // 1
    (function (a = 5) {}).length // 0
    (function (a, b, c = 5) {}).length // 2
    (function (a = 0, b, c) {}).length // 0
    (function (a, b = 1, c) {}).length // 1
    
    

    <br />

    函数参数作用域

    let foo4 = 'outer';
    function bar(func = x => foo4) {    //  这里的foo指向外层的foo(outer)
      let foo4 = 'inner';
      console.log(func()); // outer
    }
    bar();
    
    var x3 = 1;
    function foo3(x, y = function() { x3 = 2; }) {
      var x3 = 3;
      y();
      console.log(x);
    }
    foo3()  // 3
    x       // 1
    

    <br />

    rest参数

    //  rest参数(...values),代替arguments对象
    //  function().length不会算入rest参数
    //  讲一串都好分隔的变量,转换成数组
    function add(...values) {
      let sum = 0;
    
      for (var val of values) {
        sum += val;
      }
    
      return sum;
    }
    
    add(2, 5, 3) // 10
    

    <br />

    ...拓展运算符

    //拓展运算符,rest逆运算,把数组展开成都好分隔的变量
    console.log(...[1, 2, 3])
    // 1 2 3
    
    console.log(1, ...[2, 3, 4], 5)
    // 1 2 3 4 5
    
    //合并数组
    var arr1 = ['a', 'b'];
    var arr2 = ['c'];
    var arr3 = ['d', 'e'];
    
    // ES5的合并数组
    arr1.concat(arr2, arr3);
    // [ 'a', 'b', 'c', 'd', 'e' ]
    
    // ES6的合并数组
    [...arr1, ...arr2, ...arr3]
    // [ 'a', 'b', 'c', 'd', 'e' ]
    
    //  拆分数组
    const [first, ...rest] = [1, 2, 3, 4, 5];
    var item1 = first // 1
    var item2 = rest  // [2, 3, 4, 5]
    
    //实现了Iterator接口的对象
    //var nodeList = document.querySelectorAll('div');
    //var array = [...nodeList];
    
    
    //没有部署Iterator接口的类似数组的对象
    let arrayLike = {
      '0': 'a',
      '1': 'b',
      '2': 'c',
      length: 3
    };
    
    // TypeError: Cannot spread non-iterable object.
    //  let arr = [...arrayLike];
    
    <br />
    ####检测Node版本对es6的支持情况:
    
    > npm -g install es-checker
    > es-checker
    > 
    ![
    ![GSJS3B45$W)M@GL9QJ(2J0T.png](https://img.haomeiwen.com/i1759843/a897b920036fe454.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    ](https://img.haomeiwen.com/i1759843/0442d81b2a6809a8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    
    
    
    
    let map = new Map([
      [1, 'one'],
      [2, 'two'],
      [3, 'three'],
    ]);
    
    

    <br />

    箭头函数,不赘述

    箭头函数有几个使用注意点。

    • 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
    • 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
    • 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。
    • 不可以使用yield命令,因此箭头函数不能用作Generator函数。

    <br />

    尾递归优化另外总结

    相关文章

      网友评论

        本文标题:ES Function

        本文链接:https://www.haomeiwen.com/subject/wjrcgttx.html