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 相关文章推荐
JS定时器实例
Apr 17 Javascript
jQuery语法小结(超实用)
Dec 31 Javascript
javascript模块化简单解析
Apr 07 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
深入理解Vue 组件之间传值
Aug 16 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 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缩略图生成程式(需要GD库支持)
2007/03/06 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
Python学习笔记之常用函数及说明
2014/05/23 Python
Python中的tuple元组详细介绍
2015/02/02 Python
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
Scrapy框架使用的基本知识
2018/10/21 Python
Django 视图层(view)的使用
2018/11/09 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
如何在python中判断变量的类型
2020/07/29 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
大一学生假期实习的自我评价
2013/10/12 职场文书
考试不及格检讨书
2014/01/09 职场文书
好家长事迹材料
2014/01/23 职场文书
九年级历史教学反思
2014/01/27 职场文书
工程采购员岗位职责
2014/03/09 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
商铺门前三包责任书
2014/07/25 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
2016年校长新年寄语
2015/08/17 职场文书
企业法人任命书
2015/09/21 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书