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+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
angular.js分页代码的实例
Jul 27 Javascript
BootStrap使用file-input插件上传图片的方法
Sep 05 Javascript
js实现拖拽功能
Mar 01 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
浅谈React高阶组件
Mar 28 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
JS实现前端动态分页码代码实例
Jun 02 Javascript
vue穿梭框实现上下移动
Jan 29 Vue.js
Node与Python 双向通信的实现代码
Jul 16 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的分页功能
2007/03/21 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
PHP加密解密实例分析
2015/12/25 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
原生js实现购物车
2020/09/23 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
Python栈算法的实现与简单应用示例
2017/11/01 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
最好的商品表达自己:Cafepress
2019/09/04 全球购物
J2EE中常用的名词进行解释
2015/11/09 面试题
婚礼新郎父母答谢词
2014/01/16 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
摩登时代观后感
2015/06/03 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
pt-archiver 主键自增
2022/04/26 MySQL
详解PyTorch模型保存与加载
2022/04/28 Python
源码安装apache脚本部署过程详解
2022/09/23 Servers