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基本对象
Jan 11 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
d3.js实现图形拖拽
Dec 19 Javascript
Vue的Options用法说明
Aug 14 Javascript
原生js+css实现tab切换功能
Sep 17 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
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
js 分栏效果实现代码
2009/08/29 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
跟老齐学Python之再深点,更懂list
2014/09/20 Python
python开发之for循环操作实例详解
2015/11/12 Python
scrapy爬虫完整实例
2018/01/25 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
英国钻石公司:British Diamond Company
2020/02/16 全球购物
大学生学习党课思想汇报
2014/01/03 职场文书
庆元旦广播稿
2014/02/10 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
自荐信格式模板
2015/03/27 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers