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实现简单的Map示例介绍
Dec 23 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
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
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
初级的用php写的采集程序
2007/03/16 PHP
如何在php中正确的使用json
2013/08/06 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
python的slice notation的特殊用法详解
2019/12/27 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
Python下载的11种姿势(小结)
2020/11/18 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
财务支持类个人的自我评价
2014/02/14 职场文书
《理想》教学反思
2014/02/17 职场文书
公司联欢会策划方案
2014/05/19 职场文书
python图像处理 PIL Image操作实例
2022/04/09 Python
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技