参数的默认值及解构赋值

参数的默认值

在学习JavaScript的过程中，我们需要通过构建函数来完成一些功能，有的函数不需要参数，而有的函数需要参数才能完成。JavaScript 中函数的参数默认是undefined。然而，在某些情况下可能需要设置一个不同的默认值。这是默认参数可以帮助的地方。

function foo(info){
    console.log(info)
}
foo(); //输出undefined

ES5写法

ES5 中如果函数在调用时未提供隐式参数，参数会默认设置为： undefined
有时这是可以接受的，但是建议最好为参数设置一个默认值
而在ES6之前无法为直接为参数指定默认值，只能用变通的方法：

写法一

function foo(y){
    y = y || 2;
    console.log(y)
}
foo();  // 2
foo(5);  // 5

如果y已经定义 ， y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false。

写法二

function foo(y){
    if(y==undefined){
        y=2;
    }
    console.log(y)
}
foo();
foo(8);

写法三

function foo(){
    var a = arguments[0]?arguments[0]:1;
    var b = arguments[1]?arguments[1]:2;
    console.log(a);
    console.log(b)
}
foo();

在方法一和方法三中，当参数赋值后，所赋的值对应的布尔值为false时，赋值不起作用，按照默认值调用。

function foo(x,y){
    y = y || 2;
    x = x || 1;
    console.log(x+y)
}
foo(0,5); // 6

function foo(){
    var a = arguments[0]?arguments[0]:13;
    var b = arguments[1]?arguments[1]:12;
    console.log(a);
    console.log(b)
}
foo(0) // 13   12

ES6写法

ES6支持函数带有默认参数：

function foo(x=1,y=9){
    console.log(x, y)
}
foo();  //  1   9
foo(78,'');    // 78   
foo(45,54);     //45  54

从ES5与ES6对比可以看出，ES6写法更加简洁，并且不会出现ES5中由于所赋值的布尔值为false而赋值失效的情况。

参数的解构赋值

函数参数的结构可以使用默认值

function foo({username='zhangsan',age=20}={}){
    console.log(username,age)
}
foo({username:'lisi',age:12})  // lisi   12
foo()     // zhangsan   20

注意：函数实参与形参的key值要一一对应，否则赋值无效

function foo({username='zhangsan',age=20}={}){
    console.log(username,age)
}
foo({user:'lisi',age:12})     // zhangsan    12