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 相关文章推荐
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
原生js实现回复评论功能
Jan 18 Javascript
几行js代码实现自适应
Feb 24 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
vue-router的两种模式的区别
May 30 Javascript
JavaScript常用工具函数库汇总
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中Memcache操作类及用法实例
2014/12/12 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
Bootstrap3 图片(响应式图片&图片形状)
2017/01/04 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
Python编程之多态用法实例详解
2015/05/19 Python
Python中super关键字用法实例分析
2015/05/28 Python
Python中标准模块importlib详解
2017/04/16 Python
python实现微信小程序自动回复
2018/09/10 Python
python-opencv颜色提取分割方法
2018/12/08 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
python for和else语句趣谈
2019/07/02 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
python unichr函数知识点总结
2020/12/16 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
台湾森森购物网:U-mall
2017/10/16 全球购物
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
师范应届生求职信
2013/11/15 职场文书
工程材料采购方案
2014/05/18 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
2015年清明节活动总结
2015/02/09 职场文书
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL