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 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
javascript document.referrer 用法
Apr 30 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 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
phpinfo 系统查看参数函数代码
2009/06/05 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
js 覆盖和重载 函数
2009/09/25 Javascript
jQuery自定义添加"$"与解决"$"冲突的方法
2015/01/19 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
基于Three.js实现360度全景图片
2018/12/30 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
python 装饰器的使用示例
2020/10/10 Python
STP的判定过程
2012/10/01 面试题
成人大专自我鉴定范文
2013/10/19 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
暑期培训班策划方案
2014/08/26 职场文书
授权委托书(完整版)
2014/09/10 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
党员作风建设自查报告
2014/10/23 职场文书
故宫的导游词
2015/01/31 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python