脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → Javascript中的默认参数详解

Javascript中的默认参数详解

 更新时间：2014年10月22日 10:23:03   投稿：hebedich  
本文详细介绍了javascript中的默认参数问题，非常的详细，希望对大家能有所帮助

一些语言——像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 基本概念

    JavaScript 基本概念

    本文续上文，继续讲述javascript的基础，分为一下几个部分：区分大小写、标示符、注释、语句、关键字和保留字，希望能给大家一些新的认识。
    2015-01-01
  • javascript prototype原型详解(比较基础)

    javascript prototype原型详解(比较基础)

    prototype原型是javascript中特别重要的概念，属于必须要掌握，如果没有良好的掌握的话，进一步用好或者学好js基本是不可能的实现的事情，并且此概念稍有难度，可能对于初次接触的朋友来说有点困难，下面就通过代码实例简单介绍一下prototype原型的用法
    2016-12-12
  • JavaScript程序中实现继承特性的方式总结

    JavaScript程序中实现继承特性的方式总结

    JavaScript是一门强行声称面向对象的语言,而继承是面向对象的一大主要特性,这里我们根据阮一峰老师的文章来看一下JavaScript程序中实现继承特性的方式总结
    2016-06-06
  • javascript作用域和作用域链详解

    javascript作用域和作用域链详解

    这篇文章主要为大家介绍了javascript作用域和作用域链，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-01-01
  • javascript indexOf函数使用说明

    javascript indexOf函数使用说明

    JavaScript中indexOf函数方法是返回 String 对象内第一次出现子字符串的字符位置。
    2008-07-07
  • JavaScript 基础问答 四

    JavaScript 基础问答 四

    JavaScript 下拉菜单中的链接
    2008-12-12
  • JavaScript Math.ceil 方法(对数值向上取整)

    JavaScript Math.ceil 方法(对数值向上取整)

    js Math.ceil用于对数值向上取整，即得到大于或等于该数值的最小整数,需要的朋友可以参考下
    2015-01-01
  • js函数调用常用方法详解

    js函数调用常用方法详解

    js的函数调用会免费奉送两个而外的参数就是 this 和 arguments,我们所知道的应该有4中调用方式吧，接下来将为您详细介绍，感兴趣的朋友可以参考下
    2012-12-12
  • 老生常谈onBlur事件与onfocus事件(js)

    老生常谈onBlur事件与onfocus事件(js)

    下面小编就为大家带来一篇老生常谈onBlur事件与onfocus事件(js)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • JavaScript 闭包详细介绍

    JavaScript 闭包详细介绍

    这篇文章主要介绍了JavaScript 闭包的相关资料,需要的朋友可以参考下
    2016-09-09

最新评论