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 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
js form action动态修改方法
Nov 04 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
基于jQuery的获取标签名的代码
Jul 16 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
js获取滚动距离的方法
May 30 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
JS简单表单验证功能完整示例
Jan 26 Javascript
原生js实现点击轮播切换图片
Feb 11 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
第七节--类的静态成员
2006/11/16 PHP
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
图片之间的切换
2006/06/26 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
Python对象转JSON字符串的方法
2016/04/27 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
详解python 内存优化
2020/08/17 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
机械专业应届生求职信
2013/12/12 职场文书
运动会领导邀请函
2014/01/10 职场文书
职业女性的职业规划
2014/03/04 职场文书
总经理助理的职责
2014/03/14 职场文书
先进党组织事迹材料
2014/12/26 职场文书
运动会报道稿大全
2015/07/23 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang