JS可选参数和默认参数

在 JavaScript 中，函数的参数都是可选的，可以不传或者只传一部分。这样如果函数不要求传递全部参数，则需要在函数体中对参数进行判断；如果传递了某些参数则进行一些操作；如果传递了其他参数或没有传递参数则进行另一些操作。

由于函数的参数是从左向右传递的，右边没传递的参数就会自动成为可选参数。

常见的场景是，一些 JavaScript 库会把配置项作为最后一个参数，这样在调用的时候，如果需要自定义配置则传递配置项参数，如果不需要就不传递，代码如下：

//options为可选参数
function init(arg1,arg2,options){
    //初始化操作
    if(options){
        //使用自定义配置
    }
}
init(＂value1＂,＂value2＂);
init(＂value1＂,＂value2＂,{prop:＂value＂});

示例 init() 函数中的 options 配置项为可选参数，里边使用了 if 语句来判断它是否传递了，如果传递了会把里边的配置项拿出来覆盖默认的配置，如果没有传递则使用默认值。

后续在调用时，第1种调用方法没有传值，它不会执行到函数中的 if 语句，第2种调用方式传递了值，那么它就会进入 if 语句。

如果想让可选参数在没有传值的时候使用默认值，则可以在参数列表中直接给它赋值。

例如，假设有一个绘制矩形图案的函数，将默认宽度设置为 10，将高度设置为 5，这样在调用函数的时候，如果没有传递参数，就会使用默认的宽和高进行绘制，代码如下：

function drawRect(width=  10,height=5){...}
drawRect();              //全部使用默认值
drawRect(20);            //高度使用默认值
drawRect(undefined,15);  //宽度使用默认值

这里需要注意的是，JavaScript 是根据参数值是否为 undefined 来判断默认参数是否传递了值的。

示例中第1种调用方式 drawRect() 没有给 width 和 height 传值，所以会全部使用默认值。

第2种调用方式 drawRect(20) 则只传递了 width，这时 width 的默认值会被用户传递的值覆盖，即变为 20，而 height 则仍然使用默认值 5。

第3种调用方式 drawRect(undefined,15) 使用了 width 的默认值，而 height 会使用自定义的 15。由于参数是由左向右传递的，如果想让 width 使用默认值，而 height 使用自定义的值，则需要给 width 传递 undefined 来让默认值生效，这里不能设置为 null，null 会被视为传递了值。

给参数赋默认值时，还可以使用前边参数的值，或者使用外部变量的值，代码如下：

let defaultColor="#02cf13";
function drawRect(width=10, height=width/2, color=defaultColor){
    console.log(width,height,color);
}
drawRect();  //10 5#02cf13

drawRect() 函数的 height 参数使用 width 值的一半作为自身的默认值，color 使用了外部定义的 defaultColor 的值。

JS可选参数和默认参数

相关文章