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 相关文章推荐
学习ExtJS Window常用方法
Oct 07 Javascript
JavaScript学习点滴 call、apply的区别
Oct 22 Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
常用的javascript设计模式
Jan 11 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
webpack项目轻松混用css module的方法
Jun 12 Javascript
webpack4从0搭建组件库的实现
Nov 29 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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
Python3 能振兴 Python的原因分析
2014/11/28 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
介绍一下SQL Server的全文索引
2013/08/15 面试题
用友笔试题目
2016/10/25 面试题
专题组织生活会思想汇报
2014/10/01 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
新学期主题班会
2015/08/17 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL
浅谈MySQL中的六种日志
2022/03/23 MySQL