举例说明如何为JavaScript的方法参数设置默认值


Posted in Javascript onNovember 17, 2015

你是否遇到过这样的情况,写了个function,无参数。
 

function showUserInfo(){
alert("你好!我是小明。");
}

function showUserInfo(){ 
  alert("你好!我是小明。"); 
}

调用:
 

showUserInfo();

showUserInfo();

后来,发现其他地方也需要这个function,但是有变量值已经在function里面写死了,怎么办?加个参数吧。
 

function showUserInfo(name){
name=name||"小明";
alert("你好!我是"+name+"。");
}

function showUserInfo(name){ 
  name=name||"小明"; 
  alert("你好!我是"+name+"。"); 
}

说明一下:name=name||"小明" 这句代码的意思是如果name为null就等于默认值“小明”。也可以这样写:

function showUserInfo(name){
// name=name||"小明";
if(!name){
name="小明";
}
alert("你好!我是"+name+"。");
}

function showUserInfo(name){ 
// name=name||"小明"; 
  if(!name){ 
    name="小明"; 
  } 
  alert("你好!我是"+name+"。"); 
}

 
调用:
 

showUserInfo('小李');

showUserInfo('小李');

 
后来,需求又变了,需要加上年龄。好吧再改:
 

function showUserInfo(name,age){
name=name||"小明";
age=age||22;
alert("你好!我是"+name+",今年"+age+"岁。");
}

function showUserInfo(name,age){ 
  name=name||"小明"; 
  age=age||22; 
  alert("你好!我是"+name+",今年"+age+"岁。"); 
}

调用:
 

showUserInfo('小李');//结果:你好!我是小李,今年22岁。
showUserInfo('小李',19);//结果:你好!我是小李,今年19岁。
showUserInfo(null,19);//结果:你好!我是小明,今年19岁。

showUserInfo('小李');//结果:你好!我是小李,今年22岁。 
showUserInfo('小李',19);//结果:你好!我是小李,今年19岁。 
showUserInfo(null,19);//结果:你好!我是小明,今年19岁。

 
好了,如果我们需要再添加生日、电话、性别、QQ等等参数,又该怎么办呢?一个一个的设置默认值吗?实际上,我看到很多人确实是这样做的。下面我们来看一个更简单的方式。那就是使用Jquery的扩展。先看代码:
 

function showUserInfo(setting){
var defaultSetting={
name:"小明",
age:"22",
sex:"男",
phone:"13888888888",
QQ:"12345678",
birthday:"1980.12.29"
};
$.extend(defaultSetting,settings);
var message='姓名:'+defaultSetting.name
+',性别:'+defaultSetting.sex
+',年龄:'+defaultSetting.age
+',电话:'+defaultSetting.phone
+',QQ:'+defaultSetting.QQ
+',生日:'+defaultSetting.birthday
+'。';
alert(message);
}


function showUserInfo(setting){ 
  var defaultSetting={ 
    name:"小明", 
    age:"22", 
    sex:"男", 
    phone:"13888888888", 
    QQ:"12345678", 
    birthday:"1980.12.29" 
  }; 
   
  $.extend(defaultSetting,settings); 
   
  var message='姓名:'+defaultSetting.name 
      +',性别:'+defaultSetting.sex 
      +',年龄:'+defaultSetting.age 
      +',电话:'+defaultSetting.phone 
      +',QQ:'+defaultSetting.QQ 
      +',生日:'+defaultSetting.birthday 
      +'。'; 
  alert(message); 
}

说明:$.extend(defaultSetting,settings)的作用就是将传入的setting配置与defaultSetting合并,并用setting中的配置覆盖defaultSetting的配置。
 
调用:
 

showUserInfo({
name:"小李"
});
//结果:姓名:小李,性别:男,年龄:22,电话:13888888888,QQ:12345678,生日:1980.12.29。
showUserInfo({
name:"小红",
sex:"女",
phone:"13777777777"
});
//结果:姓名:小红,性别:女,年龄:22,电话:13777777777,QQ:12345678,生日:1980.12.29。




showUserInfo({ 
  name:"小李" 
}); 
//结果:姓名:小李,性别:男,年龄:22,电话:13888888888,QQ:12345678,生日:1980.12.29。 
showUserInfo({ 
  name:"小红", 
  sex:"女", 
  phone:"13777777777" 
}); 
//结果:姓名:小红,性别:女,年龄:22,电话:13777777777,QQ:12345678,生日:1980.12.29。

 
很简单吧!这样,就算有100个参数,都不怕了。
 
那么什么时候使用多个参数,什么时候使用这样的参数对象呢?我的经验是,根据实际需要,如果使用一、两个参数就可以搞定的就不使用参数对象。超过3个,我就会使用这种参数对象。

Javascript 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
fetch 使用及如何接收JS传值
Nov 11 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
Jquery easyui 实现动态树
Nov 17 #Javascript
总结JavaScript中布尔操作符||与&&的使用技巧
Nov 17 #Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 #Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 #Javascript
基于Jquery easyui 选中特定的tab
Nov 17 #Javascript
jquery实现简单的表单验证
Nov 17 #Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 #Javascript
You might like
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
js实现简单扫雷
2020/11/27 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
Python语言的变量认识及操作方法
2018/02/11 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
python实现自动发送邮件
2018/06/20 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
雅虎笔试题(字符串操作)
2015/03/24 面试题
园长自我鉴定
2013/10/06 职场文书
中学自我评价
2014/01/31 职场文书
公立医院改革实施方案
2014/03/14 职场文书
单位委托书怎么写
2014/08/02 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
生产现场禁烟通知
2015/04/23 职场文书
小学毕业感言100字
2015/07/30 职场文书
六一亲子活动感想
2015/08/07 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL