美文网首页
ES6 语法学习

ES6 语法学习

作者: 小的小碰撞 | 来源:发表于2018-10-30 10:25 被阅读0次

    代码组合compose

    组合函数通俗理解,你就是饲养员,选择两个有特点又遭你喜欢的函数,让它们结合,产下一个崭新的函数

    var toUpperCase = function(x) { return x.toUpperCase(); };
    var exclaim = function(x) { return x + '!'; };
    var shout = compose(exclaim, toUpperCase);
    
    shout("send in the clowns");
    //=> "SEND IN THE CLOWNS!"
    

    的箭头函数的定义和调用方式

    基本用法:
    ES6中允许使用"箭头"(=>)定义的函数

    var f = v=> v;
    等同于
    var f = function (v) {
            return v;
    }
    

    根据箭头函数有参数和无参数来区分

    1. 无参数的箭头函数
    var f = () =>5
    <===>
    var  f = function() {
           return 5
    };
    

    2.有参数的箭头函数

    var sum (a,b) => a+b;
    
    等价于
    
    var sum = function (a,b) {
            reutrn a+b;
    }
    

    注意
    有的函数体内的语句大于一条的话,它的写法如下使用一个大括号将其括起来,并使用return语句返回

    var sum = (a,b) => {return a+b;}
    

    有大括号被解释为代码块,所以如果箭头函数直接返回一个对象时,必须在对象外面加一个大括号

    var getFunction = id => ({
        id:id,
    name:"Temp"
    });
    

    箭头函数也可以与变量结构结合使用:

    • 变量结构
    var a, b, rest;
    [a, b] = [10, 20];
    console.log(a); // 10
    console.log(b); // 20
    
    [a, b, ...rest] = [10, 20, 30, 40, 50];
    console.log(a); // 10
    console.log(b); // 20
    console.log(rest); // [30, 40, 50]
    
    ({ a, b } = { a: 10, b: 20 });
    console.log(a); // 10
    console.log(b); // 20
    
    
    // Stage 3 proposal
    ({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
    console.log(a); // 10
    console.log(b); // 20
    console.log(rest); //{c: 30, d: 40}
    
    const full = ({first,last})  => first + "" + last;
    
    等同于
    function full (person ) {
            return person.first + "" + person.last;
    }
    

    使用箭头函数可以让函数表达的更加简洁 箭头函数的一个用处就是简化回调函数

    [1,2,3].map(function(x){
            return x*x;
    });
    等价于
    [1,2,4].map(x => x*x);
    
    var result = values.sort(function(a, b){
        return a -b;
    });
    <====>
    var result = values.sort((a, b) => a-b);
    
    

    参考:
    ES6中的箭头函数的定义和调用方式

    相关文章

      网友评论

          本文标题:ES6 语法学习

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