es6箭头函数

• 默认值

    //1、参数默认值 位置在所有形参的后面
    //es6之前的采取的默认值只能变相采取
    function test(a,b) {
        a=a||2;
        b=b||2;
        return a*b
    }
    console.log(test());
//但是这个有弊端  当我们传递的值为0的时候，还是会走默认值。改造之后
    function test1(a,b) {
        a=typeof a==="undefined"?2:a;
        b=typeof b==="undefined"?2:b;
        return a*b
    }

    console.log(test1(0,0))
//    es6为我们提供了默认值
//    语法糖：  function(a,b=2){}
     let test2=(a=2,b=2) =>{
        return a*b
    };
    console.log(test2());

• 默认参数的名字 默认参数的名字不能和函数内的形参名字相同，如果相同会报错，没有默认值的情况下，形参名字可以相同。

    //使用默认参数的时候，函数的形参中的参数名字不能和默认参数的名字一样 会报错。但是不是默认参数的时候可以是相同的名字
    function fn (a,a) {
        return arguments[0]*arguments[1]
    };
    console.log(fn(2,2));
    //但是如果使用的是默认参数的时候不能同名
    function fn1 (a,a=2) {
        console.log(2)
    }
    console.log(fn1(2,2));

• 默认参数不是传值，每次在使用默认值得时候，才进行表达式求值。即惰性求值

//    默认参数 不是传值，每次在使用的时候都会进行计算，惰性求值。
    let  a=(a,b=2+1)=>{
        return a*b
    };
    console.log(a(2));

 

   let  valEx=(a=2,b=2)=>{
        console.log("执行一次");
        return a*b
    };
    let  a=(a,b=valEx())=>{
        return a*b
    };
    console.log(a(2));

//  通过函数参数的默认值和解构赋值来结合使用
    let f=({a,b=2})=>{
        console.log(a,b)
    };
    f({});
    f({a:2,b:2});
    // f();//这种情况下 我们传递不是对象的时候，会报错 TypeError: (destructured parameter) is undefined。
//    解决上面的f()报错问题我们可以定义默认值给对象即可避免。
    f=({a,b=2}={})=>{
        console.log(a,b)
    };
    f();

 

 练习

// 写法一 解构的时候给变量设置默认值。在传参的时候的设置默认值 这种情况不给函数传递对象的时候会使用解构的默认值
function m1({x = 0, y = 0} = {}) {
    return [x, y];
}

// 写法二 这种情况没有给解构赋默认值，在传递空对象的时候，x y都是undefined
function m2({x, y} = { x: 0, y: 0 }) {
    return [x, y];
}

// 函数没有参数的情况
m1();//[0,0]
m2() ;//[0,0]

// x 和 y 都有值的情况
m1({x: 3, y: 8});//[3,8]
m2({x: 3, y: 8});//[3,8]

// x 有值，y 无值的情况
m1({x: 3});//[3,0]
m2({x: 3});//[3,undefined]

// x 和 y 都无值的情况
m1({}) ;//[0,0]
m2({});//[undefined,undefined]

m1({z: 3}) ;////[0,0]
m2({z: 3}) ;//[undefined,undefined]

•  函数的length 函数length的属性，表示函数的形参的长度。

function test(x,y,c){

}
console.log(test.length);

• 在给函数赋予默认值的时候，此时函数的长度是形参的长度减去有默认值的形参的长度。

//形参的默认值，会导致函数的length的失效，此时的length的长度是所有形参的个数减去有默认值的形参的个数。
    let a=(d,c,f=1)=>{};
    console.log(a.length);

• 默认参数的作用域

// 作用域 在使用形参默认值的时候，在出事的默认值的时候，默认值会形成单独的作用域。默认值初始化完毕之后，该作用于消失，如果没有参数的默认值不会存在这个作用域。
    let x=12;
    let  fn=(x,y=x)=>{
        console.log(x,y);//2 2
    };
    fn(2);
    //函数fn 在给y初始化默认值的时候，使用的x这个形参，而不是全局的x。他会从当前的作用域查找。如果没有依次向上查找。即从他的作用域链查找。函数内部的声明的变量并不会改变全局的
    let u=2;
    let fn1=(j=u)=>{

        let u=4;
        console.log(j,u);
    };
    fn1();//2 ,4
    console.log(u)//2

• 应用  为必须参数抛出错误。比较方便

//默认参数的应用
    let missParam=()=>{
        throw  new Error("require paramter!")
    };
    let fn=(x=missParam())=>{};
    fn();
//    也说明默认参数是惰性执行，也就是只有当缺少默认值的时候才会执行默认值后面的表达式

• rest 参数

//rest 参数 es6中 rest参数代替es5中的arguments   语法：...变量名
    let fn=(...arr)=>{
        let sum=0;
        for(var val of arr){
            sum+=val;
        }
        return sum
    };
    console.log(fn(1,2,3,4,5));
    //函数的length的方法，计算不包含rest参数。
    console.log(fn.length);