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 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
xtree.js 代码
Mar 13 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 Javascript
window.parent与window.openner区别介绍
Apr 12 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
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
第六节--访问属性和方法
2006/11/16 PHP
发布一个用PHP fsockopen写的HTTP下载的类
2007/02/22 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
vue的mixins属性详解
2018/03/14 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
vue实现放大镜效果
2020/09/17 Javascript
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
如何通过python实现全排列
2020/02/11 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
外企求职信范文分享
2013/12/31 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
音乐会主持人开场白
2015/05/28 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers
python如何读取和存储dict()与.json格式文件
2022/06/25 Python
Docker部署Mysql8的实现步骤
2022/07/07 Servers