ES6作為新一代JavaScript標準，正式與廣大前端開發(fā)者見面。為了讓大家對ES6的諸多新特性有更深入的了解，Mozilla Web開發(fā)者博客推出了《ES6 In Depth》系列文章。CSDN已獲授權，將持續(xù)對該系列進行翻譯，供大家學習借鑒。本文為該系列的第五篇。
本文講述的是有關ES6剩余參數（Rest parameters）和默認參數（Defaults parameters）的使用。
剩余參數（Rest parameters）
當需要創(chuàng)建一個可變函數API時，該函數需要實現任意數目參數的輸入。例如，String.prototype.concat方法可接受任意數目的字符串參數輸入。而在ES6中，可利用剩余參數來轉變實現思路。
以下將結合實例說明。containsAll是一個可變函數，用于檢測字符串是否包含成分子串。例如，containsAll("banana", "b", "nan")返回true，containsAll("banana", "c", "nan")則返回false。
采用傳統(tǒng)寫法的代碼如下：
[js] view plaincopy
function containsAll(haystack) {
for (var i = 1; i < arguments.length; i++) {
var needle = arguments[i];
if (haystack.indexOf(needle) === -1) {
return false;
}
}
return true;
}
該方法的核心是利用了參數對象，以數組的方式向函數傳入參數。它完全滿足需求，但可讀性差。其函數參數僅是的haystack，因此很難一眼就看出到底包含了哪些參數。此外，在進行遞歸運算時，需要注意初始位置的索引號是1而不是0，因為arguments[0]對應的是haystack參數。后假若需要在haystack的前或后添加別的參數，那么就不得不對循環(huán)進行更新。如果換用剩余參數，這些問題皆可一一迎刃而解。
使用剩余參數的代碼如下：
[js] view plaincopy
function containsAll(haystack, ...needles) {
for (var needle of needles) {
if (haystack.indexOf(needle) === -1) {
return false;
}
}
return true;
}
該方法實現了與傳統(tǒng)寫法一樣的功能，區(qū)別是使用了特殊的語法...needles。那么對于containsAll("banana", "b", "nan")，其運算過程是怎么樣的呢？首先haystack被個參數banana填充；位于needles前的符號...表明needles為剩余參數；以后的其它參數會被放入一個數組然后再分配給變量needles，本例中為["b", "nan"]；之后的判斷過程按常規(guī)執(zhí)行。（注：這里使用了for-of 循環(huán)語法）
要提醒一點，只有位于末的參數可被標記為剩余參數。位于剩余參數之前的參數與普通參數的處理方式是一樣的。所有的額外參數都會被放入一個數組然后再分配給剩余參數。如果沒有額外參數，剩余參數則為一個空數組；剩余參數不能被賦值為undefined。
默認參數（Default parameters）
很多時候，函數對傳入的參數不一定全都進行處理，同時默認參數亦可以替代傳入參數來進行使用。JavaScript一直以來在默認參數的處理上都顯得比較笨拙；無值參數會被看作undefined。ES6里引入了特殊的默認參數處理方式。
請看下面的例子。
[js] view plaincopy
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，默認值表達式在函數調用的時候進行求值。也就是說，默認表達式可以使用已定義的參數值。例如把上述動物例子的函數改為較特別的方式：
[js] view plaincopy
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，因此：
[js] view plaincopy
function myFunc(a=42, b) {...}
等同于
[js] view plaincopy
function myFunc(a=42, b=undefined) {...}
小結
ES6對剩余參數和默認參數使得JS函數的聲明更具可讀性和表達性，不妨動手試試。
原文鏈接：ES6 In Depth: Rest parameters and defaults
本譯文遵循Creative Commons Attribution Share-Alike License v3.0
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點， 并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業(yè)目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯(lián)系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。
