本文將討論使 JavaScript 函式更有表現力的兩個特性:Rest 引數和引數預設值。
Rest 引數
通常,我們需要建立一個可變引數的函式,可變引數是指函式可以接受任意數量的引數。例如,String.prototype.concat
可以接受任何數量的字串作為引數。使用 Rest 引數,ES6 為我們提供一種新的方式來建立可變引數的函式。
我們來實現一個示例函式 containsAll
,用於檢查一個字串中是否包含某些子字串。例如,containsAll("banana", "b", "nan")
將返回true
,containsAll("banana", "c", "nan")
將返回 false
。
下面是傳統的實現方式:
1 2 3 4 5 6 7 8 9 |
function containsAll(haystack) { for (var i = 1; i < arguments.length; i++) { var needle = arguments[i]; if (haystack.indexOf(needle) === -1) { return false; } } return true; } |
該實現用到了 arguments 物件,該物件是一個類陣列物件,包含函式被呼叫時的實參列表。這段程式碼正是我們想要的,但其可讀性卻不是最優的。函式只有一個形參 haystack
,所以不可能一看就知道該函式需要多個引數,並且在遍歷 arguments
時,需要特別注意遍歷的開始索引為1
,而不是常見的 0
,因為 arguments[0]
就是函式定義時的形參 haystack
。如果我們想在 haystack
引數之前或之後新增一些引數,我們不得不更新內部的迴圈。Rest 引數解決了這些問題,下面是 使用 Rest 引數的實現方式:
1 2 3 4 5 6 7 8 |
function containsAll(haystack, ...needles) { for (var needle of needles) { if (haystack.indexOf(needle) === -1) { return false; } } return true; } |
以上兩個實現都滿足了我們的需求,但後者包含一個特殊的 ...needles
語法。我們來看看呼叫containsAll("banana", "b", "nan")
時的細節,引數 haystack
和以往一樣,將用函式的第一個實參填充,值為 "banana"
,needles
前面的省略號表示它是一個 Rest 引數,剩餘的所有實參將被放入一個陣列中,並將該陣列賦給 needles
遍量。在這個呼叫中,needles
的值為 ["b", "nan"]
。然後,就是正常的函式執行了。
只能將函式的最後一個函式作為 Rest 引數,在函式被呼叫時,Rest 引數之前的引數都將被正常填充,之外的引數將被放入一個陣列中,並將該陣列作為 Rest 引數的值,如果沒有更多的引數,那麼 Rest 引數的值為一個空陣列 []
,Rest 引數的值永遠都不會是 undefined
。
引數的預設值
通常,呼叫一個函式時,不需要呼叫者傳遞所有可能的引數,那些沒有傳遞的引數都需要一個合理的預設值。JavaScript 對那些沒有傳遞的引數都有一個固定的預設值 undefined
。在 ES6 中,引入了一種新方法來指定任意引數的預設值。
看下面例子:
1 2 3 |
function animalSentence(animals2="tigers", animals3="bears") { return `Lions and ${animals2} and ${animals3}! Oh my!`; } |
在每個引數的 =
後面是一個表示式,指定了引數未傳遞時的預設值。所以,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 2 3 4 5 |
function animalSentenceFancy(animals2="tigers", animals3=(animals2 == "bears") ? "sealions" : "bears") { return `Lions and ${animals2} and ${animals3}! Oh my!`; } |
那麼,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) {...} |
等同於
1 |
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 這兩個編譯器都已經支援了引數預設值,所以你可以大膽使用。
結論
儘管從技術層面上看,這兩個新特性在並沒有給函式引入新的行為,但它們可以使一些函式的宣告更具表現力和可讀性。