函数是个好东西,可以把特定的功能代码封装起来,完成指定的任务。

就像这样:

function  myFun(){
    var a = 100;
    var b = 200 ;
    console.info(a+b);
}
myFun();  // 300

如果a,b两个数据经常变化的话,我们就会把他们提出来,作为函数的参数。

function  myFun( a,b ){
    console.info( a+b );
}
myFun(200,100);  // 300

JavaScript的函数参数,本质上是放在一个类似数组的arguments的内置对象中。形参和实参的个数不强迫要求数量一致。

因此,如果漏写了参数,函数本身是不会有任何意见(报错)的,但是会给我们的程序带来混乱。

function  myFun(a,b){
    console.info(a+b);
}
myFun(200);  // 没报错,但是输出是NaN

为了避免这种情况,我们很有必要给我们的函数添加默认值。怎么做呢?

方法一:

function  myFun(a,b){
    var _a = a || 100;
    var _b = b || 200;
    console.info( _a + _b);
}
myFun(200);  // 400
myFun();  // 300

这种方法其实就是利用了  a || b  “或”运算符的“选择”特性。当, a 值为 0, “”(空字符串),null, undefined , false 的时候,就会对 b 的值进行判断 ,并返回b的值。

它的缺点就是:

1、缺省的值,永远都是后面的参数。

2、实参不能为0。

myFun(0,100);  // 期望是 0+100,其实是 100(默认)+100 = 200的值

所以,这种情况需要判断参数的为类似false的情况,避免误操作。例如:

function  myFun(a,b){
    var _a , _b ;
    if( a === 0 ){
        _a = a ;
    }else{
        _a = a || 100;
    }
    if( b === 0 ){
        _b = b ;
    }else{
        _b = b || 100;
    }
    console.info( _a + _b);
}

myFun(0,100); // 100

方法二:利用 arguments 对象

function  myFun(a,b){
    var _a = arguments[0] ? arguments[0] : 100;
    var _b = arguments[1] ? arguments[1] : 200;
    console.info( _a + _b);
}

myFun(200,400); // 600
myFun(0,100); // 200

当然,这么写也需要判断参数的为类似false的情况,避免误操作。

方法三:利用jquery的 $.extend()  工具函数

这种方法,适用于参数 较多的情况。且参数顺序可以打乱,简直ok的不得了。

function  myFun(obj){
    var defaultValue = {
        a: 200,
        b: 200
    };
    $.extend(defaultValue,obj);
    console.info( defaultValue.a + defaultValue.b);
}

myFun({
    a:100
}); // 300

myFun({
    b:50
}); // 250

myFun({
    a:50,
    b:0
}); // 50

myFun(); // 400

这句代码:

$.extend(defaultValue,obj);

它的作用简单来讲就是 把参数 obj 的值合并到 defaultValue 中。obj 和 defaultValue 的属性值有冲突,就用 obj 的属性值。

当然,$.extend 的用法不仅于此,有兴趣的朋友可以自行百度下。

方法四:ES6

function  myFun(a = 200 , b=100){
    console.info( a + b );
}
myFun(); // 300
myFun(0); // 100

ES6可以直接把参数的默认值写在函数的小括号()里面,省事儿太多了。

方法五:ES6,跟解构赋值相结合

function  myFun({a = 200 , b=100}){
    console.info( a + b );
}
myFun({}); // 300
myFun({
    a:50
}); // 150

这里地方就是利用了 ES6的解构赋值来设定初始值。

let a,b;
({a = 100 ,b = 200} = { a:50,b:20});
console.info(a); // 50

但是这么写,参数不能为空,至少要写个空对象{} ,也不是很方便。

方法六:在方法五的基础上,给形参解构再赋一个默认值{} 

function  myFun({a = 200 , b=100}={}){
    console.info( a + b );
}
myFun({}); // 300
myFun(); // 300
myFun({
    a:50
}); // 150