Javascript中的默认参数详解


Posted in Javascript onOctober 22, 2014

一些语言——像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程序之undefined篇(中)
Nov 23 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 Javascript
js style动态设置table高度
Oct 21 #Javascript
js读写json文件实例代码
Oct 21 #Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 #Javascript
javascript Deferred和递归次数限制实例
Oct 21 #Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 #Javascript
jquery中post方法用法实例
Oct 21 #Javascript
js调试工具Console命令详解
Oct 21 #Javascript
You might like
非常不错的MySQL优化的8条经验
2008/03/24 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
js获取div高度的代码
2008/08/09 Javascript
IE 下的只读 innerHTML
2009/08/21 Javascript
javascript 面向对象 function类
2010/05/13 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
组织鉴定材料
2014/06/02 职场文书
三好学生竞选稿
2015/11/21 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书