举例说明如何为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 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 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
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
跟老齐学Python之用Python计算
2014/09/12 Python
Python中一行和多行import模块问题
2018/04/01 Python
python实现可逆简单的加密算法
2019/03/22 Python
机器学习实战之knn算法pandas
2019/06/22 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
2013年研究生毕业感言
2014/02/06 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
毕业典礼邀请函
2015/01/31 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
感恩教育主题班会
2015/08/12 职场文书