An example of how to set default values for JavaScript method parameters

An example of how to set default values for JavaScript method parameters_Basic knowledge

WBOY

Release： 2016-05-16 15:31:38

Original

1179 people have browsed it

Have you ever encountered such a situation and wrote a function with no parameters?

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

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

Copy after login

Call:

showUserInfo();

showUserInfo();

Copy after login

Later, I found that this function is also needed in other places, but some variable values have been hard-coded in the function. What should I do? Add a parameter.

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

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

Copy after login

Explanation: name=name||"Xiao Ming" This code means that if name is null, it is equal to the default value "Xiao Ming". You can also write like this:

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

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

Copy after login

Call:

showUserInfo('小李');

showUserInfo('小李');

Copy after login

Later, the needs changed and age needed to be added. Okay, let’s change it:

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

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

Copy after login

Call:

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

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

Copy after login

Okay, what if we need to add parameters such as birthday, phone number, gender, QQ, etc.? Set default values one by one? In fact, I see a lot of people doing this. Let's look at a simpler way. That is to use Jquery extensions. Let’s look at the code first:

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); 
}

Copy after login

Explanation: The function of $.extend(defaultSetting,settings) is to merge the incoming setting configuration with defaultSetting, and overwrite the defaultSetting configuration with the configuration in setting.

Call:

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。

Copy after login

It's very simple! In this way, even if there are 100 parameters, you are not afraid.

So when to use multiple parameters and when to use such a parameter object? My experience is that, depending on actual needs, if one or two parameters can be used, then the parameter object is not used. If there are more than 3, I will use this parameter object.

An example of how to set default values ​​for JavaScript method parameters_Basic knowledge

An example of how to set default values for JavaScript method parameters_Basic knowledge