Javascript中的默认参数详解

2019-11-20 14:00:21

字体：大中小

来源：转载

供稿：网友

一些语言――像Ruby,CoffeeScript及即将到来的javascript版本――在定义一个函数的时候，可以声明默认参数，像下面这样：

复制代码代码如下:

function myFunc(param1, param2 = "second string") {
console.log(param1, param2);
}

// Outputs: "first string" and "second string"
myFunc("first string");

// Outputs: "first string" and "second string version 2"
myFunc("first string", "second string version 2");

不幸的是，在当前的javascript版本，这种写法的无效的。因此，我们能做些什么来实现这种方式，使用我们现有的工具集？

最简单的解决方式像这样：

复制代码代码如下:

function myFunc(param1, param2) {
    if (param2 === undefined) {
        param2 = "second string";
    }

console.log(param1, param2);
}

// Outputs: "first string" and "second string version 2"
myFunc("first string", "second string version 2");

事实是一个被省略的参数在访问时总是“undefined”。如果你只有一个参数，这是一个好的解决方式，当时如果有多个呢？

如果你多于一个参数，你可以使用一个对象作为参数，这样有一个优点是每个参数都有一个明确的命名。如果你传递一个对象参数，你可以使用相同的方式声明默认值。

复制代码代码如下:

function myFunc(paramObject) {
    var defaultParams = {
        param1: "first string",
        param2: "second string",
        param3: "third string"
    };

var finalParams = defaultParams;

    // We iterate over each property of the paramObject
    for (var key in paramObject) {
        // If the current property wasn't inherited, proceed
        if (paramObject.hasOwnProperty(key)) {
            // If the current property is defined,
            // add it to finalParams
            if (paramObject[key] !== undefined) {
                finalParams[key] = paramObject[key];
            }
        }
    }

    console.log(finalParams.param1,
                finalParams.param2,
                finalParams.param3);
}
myFunc({param1: "My own string"});

这是一个有点笨拙，如果你使用这种方式的地方很多，可以写个封装函数，幸运的是，现在好多库中带了相关方法，比如jQuery和Underscore中的extend方法。

下面使用Underscore的extend方法来实现上面相同的结果：

复制代码代码如下:

function myFunc(paramObject) {
    var defaultParams = {
        param1: "first string",
        param2: "second string",
        param3: "third string"
    };

var finalParams = _.extend(defaultParams, paramObject);

    console.log(finalParams.param1,
                finalParams.param2,
                finalParams.param3);
}

// Outputs:
// "My own string" and "second string" and "third string"
myFunc({param1: "My own string"});

这就是你如何能得到默认参数，在当前的javascript版本中。

文中不妥之处欢迎批评指正。

上一篇：Javascript中arguments对象详解

下一篇：js style动态设置table高度