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 动态加载脚本的4种方法
May 05 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
js 采用delete实现继承示例代码
May 20 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
vue 如何使用递归组件
Oct 23 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
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
php数组编码转换示例详解
2014/03/11 PHP
PHP生成器简单实例
2015/05/13 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
Jquery 设置标题的自动翻转
2009/10/03 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
师范生个人推荐信
2013/11/29 职场文书
煤矿班组长岗位职责
2013/12/29 职场文书
新驾驶员个人自我评价
2014/01/03 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
mysql 带多个条件的查询方式
2021/06/05 MySQL
Java输出Hello World完美过程解析
2021/06/13 Java/Android
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript