這篇文章主要介紹了ECMAScript6函數(shù)默認參數(shù)的相關(guān)資料,需要的朋友可以參考下

語言更新時每一個新增的特性都是從千百萬開發(fā)者需求里提取過來的，規(guī)范采用后能減少程序員的痛苦，帶來便捷。

我們經(jīng)常會這么寫

1. function calc(x, y) { 
2. x = x || 0; 
3. y = y || 0; 
4. // to do with x, y 
5. // return x/y 
6. } 

簡單說就是x，y提供了一個默認值為0，不傳時x, y以值0來運算。傳了就以實際值計算。

又如定義一個ajax

1. function ajax(url, async, dataType) { 
2. async = async !== false 
3. dataType = dataType || 'JSON' 
4. // ... 
5. } 

自己用原生JS封裝的一個簡易ajax函數(shù)，url必填，async和dataType可選，即不填時默認同步請求和返回JSON格式數(shù)據(jù)。

再如定義一個矩形類

1. function Rectangle(width, height) { 
2. this.width = width || 200; 
3. this.height = height || 300; 
4. } 

new時不傳任何參數(shù)，也會創(chuàng)建一個默認寬高為200*300的矩形。

無論是calc，ajax函數(shù)還是Rectangle類，我們都需要在函數(shù)體內(nèi)做默認值的處理，如果語言自身處理豈不樂哉? ES6提供了該特性(Default Parameters)，以下是用ES6新特性重寫的calc，ajax，Rectangle。

1. function calc(x=0, y=0) { 
2. // ... 
3. console.log(x, y) 
4. } 
5. calc(); // 0 0 
6. calc(1, 4); // 1 4 
7.  
8. function ajax(url, async=true, dataType="JSON") { 
9. // ... 
10. console.log(url, async, dataType) 
11. } 
12. ajax('../user.action'); // ../user.action true JSON 
13. ajax('../user.action', false); // ../user.action false JSON 
14. ajax('../user.action', false, 'XML'); // ../user.action false XML 
15.  
16. function Rectangle(width=200, height=300) { 
17. this.width = width; 
18. this.height = height; 
19. } 
20. var r1 = new Rectangle(); // 200*300的矩形 
21. var r2 = new Rectangle(100); // 100*300的矩形 
22. var r3 = new Rectangle(100, 500); // 100*500矩形 

可以看到，ES6把默認值部分從大括號移到了小括號里，還減少了“||”運算，函數(shù)體從此瘦身了。參數(shù)默認值嘛，本來就應(yīng)該在定義參數(shù)的地方，這樣看起來簡潔了不少。O(∩_∩)O

默認參數(shù)可以定義在任意位置，比如在中間定義一個

1. function ajax(url, async=true, success) { 
2. // ... 
3. console.log(url, async, success) 
4. } 

定義了一個默認參數(shù)async，url和success是必傳的，這時需要把中間的參數(shù)置為undefined

1. ajax('../user.action', undefined, function() { 
2.  
3. }) 

注意，不要想當(dāng)然的把undefined改為null， 即使 null == undefined， 傳null后，函數(shù)體內(nèi)的async就是null不是true了。

以下幾點需要注意：

1. 定義了默認參數(shù)后，函數(shù)的length屬性會減少，即有幾個默認參數(shù)不包含在length的計算當(dāng)中

1. function calc(x=0, y=0) { 
2. // ... 
3. console.log(x, y) 
4. } 
5. function ajax(url, async=true, dataType="JSON") { 
6. // ... 
7. console.log(url, async, dataType) 
8. } 
9. console.log(calc.length); // 0 
10. console.log(ajax.length); // 1 

2. 不能用let和const再次聲明默認值，var可以

1. function ajax(url="../user.action", async=true, success) { 
2. var url = ''; // 允許 
3. let async = 3; // 報錯 
4. const success = function(){}; // 報錯 
5. } 

另外比較有趣的是：默認參數(shù)可以不是一個值類型，它可以是一個函數(shù)調(diào)用

1. function getCallback() { 
2. return function() { 
3. // return code 
4. } 
5. } 
6.  
7. function ajax(url, async, success=getCallback()) { 
8. // ... 
9. console.log(url, async, success) 
10. } 

可以看到這里參數(shù)success是一個函數(shù)調(diào)用，調(diào)用ajax時如果沒有傳第三個參數(shù)，則會執(zhí)行g(shù)etCallback函數(shù)，該函數(shù)返回一個新函數(shù)賦值給success。這是一個很強大的功能，給程序員以很大的想象發(fā)揮空間。

例如，利用這個特性可以強制指定某參數(shù)必須傳，不傳就報錯

1. function throwIf() { 
2. throw new Error('少傳了參數(shù)'); 
3. } 
4.  
5. function ajax(url=throwIf(), async=true, success) { 
6. return url; 
7. } 
8. ajax(); // Error: 少傳了參數(shù) 

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。