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 存在陷阱 删除某一区域所有节点
May 10 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
深入理解javascript变量声明
Nov 20 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
8 个有用的JS技巧(推荐)
Jul 03 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 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中call_user_func_array的作用
2013/06/07 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
javascript实现拖放效果
2015/12/16 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
python中数据爬虫requests库使用方法详解
2018/02/11 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
python取余运算符知识点详解
2019/06/27 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
linux面试相关问题
2012/08/11 面试题
线程同步的方法
2016/11/23 面试题
七年级英语教学反思
2014/01/15 职场文书
保护环境建议书
2014/03/12 职场文书
煤矿安全生产标语
2014/06/06 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
毕业赠语大全
2015/06/23 职场文书
工作服管理制度范本
2015/08/06 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
Golang 实现WebSockets
2022/04/24 Golang
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python