這篇文章主要介紹了舉例說明如何為JavaScript的方法參數設置默認值,參數默認值的設置是JS入門學習中的基礎知識,需要的朋友可以參考下

你是否遇到過這樣的情況，寫了個function，無參數。

1. function showUserInfo(){ 
2. alert("你好！我是小明。"); 
3. } 
4.  
5. function showUserInfo(){  
6. alert("你好！我是小明。");  
7. }  

調用：

1. showUserInfo(); 
2.  
3. showUserInfo();  

后來，發現其他地方也需要這個function，但是有變量值已經在function里面寫死了，怎么辦?加個參數吧。

1. function showUserInfo(name){ 
2. name=name||"小明"; 
3. alert("你好！我是"+name+"。"); 
4. } 
5.  
6. function showUserInfo(name){  
7. name=name||"小明";  
8. alert("你好！我是"+name+"。");  
9. }  

說明一下：name=name||"小明" 這句代碼的意思是如果name為null就等于默認值“小明”。也可以這樣寫：

1. function showUserInfo(name){ 
2. // name=name||"小明"; 
3. if(!name){ 
4. name="小明"; 
5. } 
6. alert("你好！我是"+name+"。"); 
7. } 
8.  
9. function showUserInfo(name){  
10. // name=name||"小明";  
11. if(!name){  
12. name="小明";  
13. }  
14. alert("你好！我是"+name+"。");  
15. }  

調用：

1. showUserInfo('小李'); 
2.  
3. showUserInfo('小李');  

后來，需求又變了，需要加上年齡。好吧再改：

1. function showUserInfo(name,age){ 
2. name=name||"小明"; 
3. age=age||22; 
4. alert("你好！我是"+name+"，今年"+age+"歲。"); 
5. } 
6.  
7. function showUserInfo(name,age){  
8. name=name||"小明";  
9. age=age||22;  
10. alert("你好！我是"+name+"，今年"+age+"歲。");  
11. }  

調用：

1. showUserInfo('小李');//結果：你好！我是小李，今年22歲。 
2. showUserInfo('小李',19);//結果：你好！我是小李，今年19歲。 
3. showUserInfo(null,19);//結果：你好！我是小明，今年19歲。 
4.  
5. showUserInfo('小李');//結果：你好！我是小李，今年22歲。  
6. showUserInfo('小李',19);//結果：你好！我是小李，今年19歲。  
7. showUserInfo(null,19);//結果：你好！我是小明，今年19歲。  

好了，如果我們需要再添加生日、電話、性別、QQ等等參數，又該怎么辦呢?一個一個的設置默認值嗎?實際上，我看到很多人確實是這樣做的。下面我們來看一個更簡單的方式。那就是使用Jquery的擴展。先看代碼：

1. function showUserInfo(setting){ 
2. var defaultSetting={ 
3. name:"小明", 
4. age:"22", 
5. sex:"男", 
6. phone:"13888888888", 
7. QQ:"12345678", 
8. birthday:"1980.12.29" 
9. }; 
10. $.extend(defaultSetting,settings); 
11. var message='姓名：'+defaultSetting.name 
12. +'，性別：'+defaultSetting.sex 
13. +'，年齡：'+defaultSetting.age 
14. +'，電話：'+defaultSetting.phone 
15. +'，QQ：'+defaultSetting.QQ 
16. +'，生日：'+defaultSetting.birthday 
17. +'。'; 
18. alert(message); 
19. } 
20.  
21.  
22. function showUserInfo(setting){  
23. var defaultSetting={  
24. name:"小明",  
25. age:"22",  
26. sex:"男",  
27. phone:"13888888888",  
28. QQ:"12345678",  
29. birthday:"1980.12.29" 
30. };  
31.  
32. $.extend(defaultSetting,settings);  
33.  
34. var message='姓名：'+defaultSetting.name  
35. +'，性別：'+defaultSetting.sex  
36. +'，年齡：'+defaultSetting.age  
37. +'，電話：'+defaultSetting.phone  
38. +'，QQ：'+defaultSetting.QQ  
39. +'，生日：'+defaultSetting.birthday  
40. +'。';  
41. alert(message);  
42. }  

說明：$.extend(defaultSetting,settings)的作用就是將傳入的setting配置與defaultSetting合并，并用setting中的配置覆蓋defaultSetting的配置。

調用：

1. showUserInfo({ 
2. name:"小李" 
3. }); 
4. //結果：姓名：小李，性別：男，年齡：22，電話：13888888888，QQ：12345678，生日：1980.12.29。 
5. showUserInfo({ 
6. name:"小紅", 
7. sex:"女", 
8. phone:"13777777777" 
9. }); 
10. //結果：姓名：小紅，性別：女，年齡：22，電話：13777777777，QQ：12345678，生日：1980.12.29。 
11.  
12.  
13.  
14.  
15. showUserInfo({  
16. name:"小李" 
17. });  
18. //結果：姓名：小李，性別：男，年齡：22，電話：13888888888，QQ：12345678，生日：1980.12.29。  
19. showUserInfo({  
20. name:"小紅",  
21. sex:"女",  
22. phone:"13777777777" 
23. });  
24. //結果：姓名：小紅，性別：女，年齡：22，電話：13777777777，QQ：12345678，生日：1980.12.29。  

很簡單吧!這樣，就算有100個參數，都不怕了。

那么什么時候使用多個參數，什么時候使用這樣的參數對象呢?我的經驗是，根據實際需要，如果使用一、兩個參數就可以搞定的就不使用參數對象。超過3個，我就會使用這種參數對象。