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

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

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

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

Call:

showUserInfo();

showUserInfo(); 

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+"。"); 
} 

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+"。"); 
} 

Call:

showUserInfo('小李');

showUserInfo('小李'); 

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+"岁。"); 
} 

Call:

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

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

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

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。 

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.