谷粒商城24 - 前端基础 ES6 函数优化(箭头函数)

参数默认值

  //es6以前判断参数为空的做法
        function add(a, b){
            b= b||1 ;
            return a+b;
        }
        console.log(add(10));


        //es6的写法
       function add2(a , b= 1 ){
            return a +b ; 
       }
       console.log(add2(20));

可以看出来, 第二个方法, 即使b没有传递值, 但是算出来是21 , 说明使用了默认值1

不定参数

如下可以传递多个参数

  function fun(...values){

            console.log(values.length)
        }
        fun(1,2);
        fun(1,2,3,4);

箭头函数 函数只传递一个参数的情况

   //箭头函数传递一个参数的情况 

    //以前的写法
    var print = function(obj){
        console.log(obj);
    }

    //es6的写法
    var printes6  = obj => console.log(obj);

    // 调用printes6 方法, 传递 hello
    printes6("hello");

多个参数, 方法体只有一行的情况

  
    //多个参数, 方法体只有一行的情况
    var sum2 = (a, b) => a +b;

    //测试调用
    console.log(sum2(1,2));

多个参数 ,方法体有多行的箭头函数写法

    //多个参数 ,方法体有多行的箭头函数写法
    var sum3  = (a , b ) => {
        c = a+b ;
        return a+ c ;
    }
    //测试调用
    console.log(sum3(6,6));

箭头函数与解构表达式综合

对象作为参数, 传递进去, 用解构表达式, 直接获取其属性

     
    const person = {
        name: "jack",
        age: 21,
        language: ['java','js','css']
    }

    var hello2 = (param) => console.log("hello, "+ param.name);

    hello2(person);

    //使用解构表达式, 解构出person对象的name属性, 直接调用即可
    var hello3 = ({name}) => console.log("hello, "+ name);

    hello3(person);