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 相关文章推荐
jquery中each方法示例和常用选择器
Jul 08 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
微信小程序实现简单的select下拉框
Nov 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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
php中的实现trim函数代码
2007/03/19 PHP
简单的php 验证图片生成函数
2009/05/21 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
提高php编程效率技巧
2015/08/13 PHP
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
详解js闭包
2014/09/02 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
Python上传package到Pypi(代码简单)
2016/02/06 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
python Pygame的具体使用讲解
2017/11/03 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
python-str,list,set间的转换实例
2018/06/27 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
三八节活动主持词
2015/07/04 职场文书
运动会通讯稿600字
2015/07/20 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS