這篇文章主要介紹了深入學習JavaScript中的Rest參數和參數默認值,是JS入門學習中的基礎知識,需要的朋友可以參考下

本文將討論使 JavaScript 函數更有表現力的兩個特性：Rest 參數和參數默認值。

Rest 參數

通常，我們需要創建一個可變參數的函數，可變參數是指函數可以接受任意數量的參數。例如，String.prototype.concat 可以接受任何數量的字符串作為參數。使用 Rest 參數，ES6 為我們提供一種新的方式來創建可變參數的函數。

我們來實現一個示例函數 containsAll，用于檢查一個字符串中是否包含某些子字符串。例如，containsAll("banana", "b", "nan") 將返回true，containsAll("banana", "c", "nan") 將返回 false。

下面是傳統的實現方式：

1. function containsAll(haystack) { 
2. for (var i = 1; i < arguments.length; i++) { 
3. var needle = arguments[i]; 
4. if (haystack.indexOf(needle) === -1) { 
5. return false; 
6. } 
7. } 
8. return true; 
9. } 
10.  
11. function containsAll(haystack) { 
12. for (var i = 1; i < arguments.length; i++) { 
13. var needle = arguments[i]; 
14. if (haystack.indexOf(needle) === -1) { 
15. return false; 
16. } 
17. } 
18. return true; 
19. } 

該實現用到了 arguments 對象，該對象是一個類數組對象，包含函數被調用時的實參列表。這段代碼正是我們想要的，但其可讀性卻不是最優的。函數只有一個形參 haystack，所以不可能一看就知道該函數需要多個參數，并且在遍歷 arguments 時，需要特別注意遍歷的開始索引為1 ，而不是常見的 0，因為 arguments[0] 就是函數定義時的形參 haystack。如果我們想在 haystack 參數之前或之后添加一些參數，我們不得不更新內部的循環。Rest 參數解決了這些問題，下面是 使用 Rest 參數的實現方式：

1. function containsAll(haystack, ...needles) { 
2. for (var needle of needles) { 
3. if (haystack.indexOf(needle) === -1) { 
4. return false; 
5. } 
6. } 
7. return true; 
8. } 
9.  
10. function containsAll(haystack, ...needles) { 
11. for (var needle of needles) { 
12. if (haystack.indexOf(needle) === -1) { 
13. return false; 
14. } 
15. } 
16. return true; 
17. } 

以上兩個實現都滿足了我們的需求，但后者包含一個特殊的 ...needles 語法。我們來看看調用containsAll("banana", "b", "nan") 時的細節，參數 haystack 和以往一樣，將用函數的第一個實參填充，值為 "banana"，needles 前面的省略號表示它是一個 Rest 參數，剩余的所有實參將被放入一個數組中，并將該數組賦給 needles 遍量。在這個調用中，needles 的值為 ["b", "nan"]。然后，就是正常的函數執行了。

只能將函數的最后一個函數作為 Rest 參數，在函數被調用時，Rest 參數之前的參數都將被正常填充，之外的參數將被放入一個數組中，并將該數組作為 Rest 參數的值，如果沒有更多的參數，那么 Rest 參數的值為一個空數組 []，Rest 參數的值永遠都不會是 undefined。

參數的默認值

通常，調用一個函數時，不需要調用者傳遞所有可能的參數，那些沒有傳遞的參數都需要一個合理的默認值。JavaScript 對那些沒有傳遞的參數都有一個固定的默認值 undefined。在 ES6 中，引入了一種新方法來指定任意參數的默認值。

看下面例子：

1. function animalSentence(animals2="tigers", animals3="bears") { 
2. return `Lions and ${animals2} and ${animals3}! Oh my!`; 
3. } 
4.  
5. function animalSentence(animals2="tigers", animals3="bears") { 
6. return `Lions and ${animals2} and ${animals3}! Oh my!`; 
7. } 

在每個參數的 = 后面是一個表達式，指定了參數未傳遞時的默認值。所以，animalSentence() 返回 "Lions and tigers and bears! Oh my!"， animalSentence("elephants") 返回"Lions and elephants and bears! Oh my!"， animalSentence("elephants", "whales") 返回 "Lions and elephants and whales! Oh my!"。

參數默認值需要注意的幾個細節：

與 Python 不一樣的是，參數默認值的表達式是在函數調用時從左到右計算的，這意味著表達式可以使用前面已經被填充的參數。例如，我們可以將上面的函數變得更有趣一點：

1. function animalSentenceFancy(animals2="tigers", 
2. animals3=(animals2 == "bears") ? "sealions" : "bears") 
3. { 
4. return `Lions and ${animals2} and ${animals3}! Oh my!`; 
5. } 
6.  
7.  
8. function animalSentenceFancy(animals2="tigers", 
9. animals3=(animals2 == "bears") ? "sealions" : "bears") 
10. { 
11. return `Lions and ${animals2} and ${animals3}! Oh my!`; 
12. } 

那么，animalSentenceFancy("bears") 將返回 "Lions and bears and sealions. Oh my!"。

傳遞 undefined 等同于沒有傳遞該參數。因此，animalSentence(undefined, "unicorns") 將返回 "Lions and tigers and unicorns! Oh my!"。

如果沒有為一個參數指定默認值，那么該參數的默認值為 undefined，所以

1. function myFunc(a=42, b) {...} 
2.  
3. function myFunc(a=42, b) {...} 

等同于

1. function myFunc(a=42, b=undefined) {...} 
2.  
3. function myFunc(a=42, b=undefined) {...} 

拋棄 arguments

通過 Rest 參數和參數的默認值，我們可以完全拋棄 arguments 對象，使我們的代碼可讀性更高。此外，arguments 對象也加深了優化 JavaScript 的難題。

希望以上兩個新特性可以完全取代 arguments。作為第一步，在使用 Rest 參數或參數的默認值時，請避免使用 arguments 對象，假如 arguments 對象還不會立即被移除，或者永遠不會，那么也最好是避免在使用 Rest 參數或參數默認值時使用 arguments 對象。

兼容性

Firefox 15 以上的版本已經支持這兩個新特性。然而，除此之外，還沒有其他任何瀏覽器支持。最近，V8 的實驗環境添加了對 Rest 參數的支持，而參數默認值還有一個 issue，JSC 也對 Rest 參數和參數默認值提了一些 issue。

Babel 和 Traceur 這兩個編譯器都已經支持了參數默認值，所以你可以大膽使用。

結論

盡管從技術層面上看，這兩個新特性在并沒有給函數引入新的行為，但它們可以使一些函數的聲明更具表現力和可讀性。