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 相关文章推荐
快速排序 php与javascript的不同之处
Feb 22 Javascript
js 函数的副作用分析
Aug 23 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 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/10/09 PHP
PHP cron中的批处理
2008/09/16 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
python支持断点续传的多线程下载示例
2014/01/16 Python
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
python基础教程之五种数据类型详解
2017/01/12 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
python:接口间数据传递与调用方法
2018/12/17 Python
python实现flappy bird小游戏
2018/12/24 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
2014小学语文教学工作总结
2014/12/17 职场文书
新员工试用期自我评价
2015/03/10 职场文书
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技