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类定义例子
Sep 12 Javascript
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
js实现简单计算器
Nov 22 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 Javascript
微信小程序实现时间进度条功能
Nov 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数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
新鲜出炉的js tips提示效果
2011/04/03 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
Vue 去除路径中的#号
2018/04/19 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
numpy排序与集合运算用法示例
2017/12/15 Python
Python random模块用法解析及简单示例
2017/12/18 Python
python如何重载模块实例解析
2018/01/25 Python
python对excel文档去重及求和的实例
2018/04/18 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
挂牌仪式主持词
2014/03/20 职场文书
护士自荐信怎么写
2015/03/06 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
Python基本数据类型之字符串str
2021/07/21 Python
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js