举例说明如何为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 相关文章推荐
JS控制表格隔行变色
Jun 26 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
JS实现留言板功能[楼层效果展示]
Dec 27 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
javascript实现切割轮播效果
Nov 28 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 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页面运行时间的函数介绍
2013/07/01 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
javascript hashtable实现代码
2009/10/13 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
JQuery魔力之$("tagName")与selector
2012/03/05 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
python 删除非空文件夹的实例
2018/04/26 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
python检测IP地址变化并触发事件
2018/12/26 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
Django实现分页显示效果
2019/10/31 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
路政管理求职信
2014/06/18 职场文书
公司合作意向书范文
2014/07/30 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
干部考核工作总结
2015/08/12 职场文书
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android