原文鏈接
ECMAScript 6 (也稱 ECMAScript 2015) 是ECMAScript 標准的最新版本，顯著地完善了JS中參數的處理方式。除了其它新特性外，我們還可以使用rest參數、默認值、解構賦值等。
本教程中，我們將詳細探索arguments和parameters，看看ES6是如果改善升級它們的。
對比 Arguments 和 Parameters
通常情況下提到 Arguments 和 Parameters， 都認為是可以互換使用的。然而，基於本教程的目的，我們做了明確的區分。在大多數標准中，parameters (形式參數) 指聲明函數名和函數體的時候使用的參數，而 arguments (實際參數) 指在函數實際調用時，傳入的確定值。思考下面這個函數：
function foo(param1, param2) { // do something } foo(10, 20);
在這個函數中， param1 和 param2 是函數的形式參數（形參）, 而在函數foo調用時，傳入的 (10 和 20) 則是實際參數（實參）。
擴展操作符
在 ES5 中，用 apply() 方法可以很方便地將一個數組傳遞給函數。例如，我們經常把它和 Math.max() 結合使用，來取得數組中的最大值。請看下面代碼：
var myArray = [5, 10, 50]; Math.max(myArray); // Error: NaN Math.max.apply(Math, myArray); // 50
Math.max() 方法並不支持傳入數組，它只接受數字。所以當我們把數組作為參數傳遞給它時，就會拋出錯誤。但是，加上 apply() 方法后，數組會被轉換成單獨的數字，就能被 Math.max() 處理了。
慶幸的是，ES6 引入了擴展操作符，我們不需要再使用 apply() 方法了。通過擴展操作符，我們可以很方便地為表達式傳入多個參數：
var myArray = [5, 10, 50]; Math.max(...myArray); // 50
這里，擴展操作符把 myArray 展開成獨立的數值傳給了函數。 ES5里面使用 apply() 來模仿操作符是可以達到目的的，只是語法上令人困惑，並且缺乏擴展操作符的靈活性。 擴展操作符不僅易於使用，還涵蓋了很多其他特性。例如，它可以被多次使用，還可以在 function 調用時，和其它參數混合使用:
function myFunction() { for(var i in arguments){ console.log(arguments[i]); } } var params = [10, 15]; myFunction(5, ...params, 20, ...[25]); // 5 10 15 20 25
擴展操作符的另一個優點，就是它可以很簡單地和構造函數一起使用：
new Date(...[2016, 5, 6]); // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)`
當然，我們可以用ES5重寫上面的代碼，但我們則需要用一個復雜的模式來避免類型錯誤：
new Date.apply(null, [2016, 4, 24]); // TypeError: Date.apply is not a constructor new (Function.prototype.bind.apply(Date, [null].concat([2016, 5, 6]))); // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)
瀏覽器對擴展操作符在函數中調用的支持情況
Rest參數
rest參數和擴展操作符擁有相同的語法，不同的是，rest參數是把所有的參數收集起來轉換成數組，而擴展操作符是把數組擴展成單獨的參數。
function myFunction(...options) { return options; } myFunction('a', 'b', 'c'); // ["a", "b", "c"]
如果函數調用時，沒有傳入實際參數，則rest參數會輸出一個空數組，如下：
function myFunction(...options) { return options; } myFunction(); // []
rest參數在創建一個可變函數（即一個參數個數可變的函數）時尤其有用。rest參數有着數組固有的優勢，可以快捷地替換 arguments 對象（下文會解釋這個名詞）。下面這個函數是用ES5寫的，我們來看下：
function checkSubstrings(string) { for (var i = 1; i < arguments.length; i++) { if (string.indexOf(arguments[i]) === -1) { return false; } } return true; } checkSubstrings('this is a string', 'is', 'this'); // true
該函數檢查字符串（this is a string）是否包括這些子串（is, this）。這個函數存在的第一個問題是，我們必須看函數體內是否有多個參數。第二個問題是，循環必須從 1 開始，而不是從 0 開始, 因為 arguments[0] 指向的就是第一個參數（this is a string）。 如果以后我們想要在這個字符串的前面或者后面添加另一個參數，我們可能會忘記更新循環體。而使用rest參數，我們就可以很容易地避免這些問題：
function checkSubstrings(string, ...keys) { for (var key of keys) { if (string.indexOf(key) === -1) { return false; } } return true; } checkSubstrings('this is a string', 'is', 'this'); // true
該函數的輸出跟前一個函數的輸出是一樣的。這里再提一下，參數 string 被包含在這個函數的 argument 中，並且第一個被傳遞進來，剩下的參數都被放到一個數組，並且賦給了名為 keys 的變量。
使用rest參數替代 arguments 對象來提高代碼的可讀性和避免一些js的優化問題1。 然而，rest參數也不是沒有缺點的。例如，它必須是最后一個參數，否則就會報錯，如下面函數所示：
function logArguments(a, ...params, b) { console.log(a, params, b); } logArguments(5, 10, 15); // SyntaxError: parameter after rest parame
另一個缺點是，一個函數聲明只能允許有一個rest參數：
function logArguments(...param1, ...param2) { } logArguments(5, 10, 15); // SyntaxError: parameter after rest parameter
瀏覽器對Rest參數的支持情況：
默認參數
ES5 默認參數
在ES5中，JS 並不支持默認參數, 但是，我們也有一種變通的方案，那就是在函數中使用 OR 操作符（ ||）。我們簡單地模仿ES5中的默認參數，請看下面函數：
function foo(param1, param2) { param1 = param1 || 10; param2 = param2 || 10; console.log(param1, param2); } foo(5, 5); // 5 5 foo(5); // 5 10 foo(); // 10 10
該函數預期傳入兩個參數，但如果在調用該函數時，沒有傳入實參，則它會用默認值。在函數體內，如果沒有傳入實際參數，則會被自動設為 undefined, 所以，我們可以檢測這些參數，並且聲明他們的默認值。我們可以使用 OR 操作符（||）來檢測是否有傳入實際參數，並且設定他們的默認值。OR 操作符會檢測它的第一個參數，如果有實際值2，則用第一個，如果沒有，則用它的第二個參數。
這種方法在函數中普遍使用，但它有一個瑕疵，那就是傳入 0 或者 null 也會觸發默認值，因為 0 和 null 都被認為是false. 所以，如果我們需要給函數傳入 0 和 null 時，我們需要另一種方式去檢測這個參數是否缺失：
function foo(param1, param2) { if(param1 === undefined){ param1 = 10; } if(param2 === undefined){ param2 = 10; } console.log(param1, param2); } foo(0, null); // 0, null foo(); // 10, 10
在上面這個函數中，只有當所傳的參數全等於 undefined 時，才會使用默認值。這種方式需要用到的代碼稍微多點，但是安全度更高，我們可以給函數傳入 0 和 null 。
ES6 默認參數
有了ES6,我們不需要再去檢測哪些值為undefined並且給它們設定默認值了。現在我們可以直接在函數聲明中放置默認值：
function foo(a = 10, b = 10) { console.log(a, b); } foo(5); // 5 10 foo(0, null); // 0 null
如你所見，省略一個參數，就會觸發一個默認值，但是傳入 0 或者 null 時，則不會。 我們甚至可以使用函數去找回默認參數的值：
function getParam() { alert("getParam was called"); return 3; } function multiply(param1, param2 = getParam()) { return param1 * param2; } multiply(2, 5); // 10 multiply(2); // 6 (also displays an alert dialog)
注意 getParam 這個函數只有在第二個參數省略時才會被調用。所以當我們給 multiply 傳入兩個參數並調用它時，alert是不會出現的。
默認參數還有一個有趣的特性，那就是我們可以在函數聲明中指定其它參數和變量的值：
function myFunction(a=10, b=a) { console.log('a = ' + a + '; b = ' + b); } myFunction(); // a=10; b=10 myFunction(22); // a=22; b=22 myFunction(2, 4); // a=2; b=4
你甚至可以在函數聲明中做運算：
function myFunction(a, b = ++a, c = a*b) { console.log(c); } myFunction(5); // 36
請注意，JavaScript 和其它語言不同， 它是在函數被調用時，才去求參數的默認值。
function add(value, array = []) { array.push(value); return array; } add(5); // [5] add(6); // [6], not [5, 6]
瀏覽器對默認參數的支持情況：
解構賦值
解構賦值是ES6的新特性。我們可以從數組和對象中提取值，對變量進行賦值。這種語法清晰且易於理解，尤其是在給函數傳參時特別有用。
在ES5里面，我們經常用一個配置對象來處理大量的可選參數， 特別是當對象屬性的順序可變時：
function initiateTransfer(options) { var protocol = options.protocol, port = options.port, delay = options.delay, retries = options.retries, timeout = options.timeout, log = options.log; // code to initiate transfer } options = { protocol: 'http', port: 800, delay: 150, retries: 10, timeout: 500, log: true }; initiateTransfer(options);
這種方式實現起來很好，已經被許多JS開發者所采用。 只是我們必須看函數內部，才知道函數預期需要哪些參數。結合解構賦值，我們就可以在函數聲明中清晰地表示這些參數：
function initiateTransfer({protocol, port, delay, retries, timeout, log}) { // code to initiate transfer }; var options = { protocol: 'http', port: 800, delay: 150, retries: 10, timeout: 500, log: true } initiateTransfer(options);
在該函數中，我們沒有傳入一個配置對象，而是以對象解構賦值的方式，給它傳參數。這樣做不僅使這個函數更加簡明，可讀性也更高。
我們也可以把解構賦值傳參和其它規則的參數一起使用：
function initiateTransfer(param1, {protocol, port, delay, retries, timeout, log}) { // code to initiate transfer } initiateTransfer('some value', options);
注意如果函數調用時，參數被省略掉，則會拋出錯誤，如下：
function initiateTransfer({protocol, port, delay, retries, timeout, log}) { // code to initiate transfer } initiateTransfer(); // TypeError: Cannot match against 'undefined' or 'null'
當我們需要讓參數都是必填時，這種方法能夠得到我們想要的結果，但如果我們希望參數是可選的時候呢？想要讓參數缺失時不會報錯，我們就需要給默認參數設定一個默認值：
function initiateTransfer({protocol, port, delay, retries, timeout, log} = {}) {
// code to initiate transfer
}
initiateTransfer(); // no error
上面這個函數中，需要解構賦值的參數有了一個默認值，這個默認值就是一個空對象。這時候，函數被調用時，即使沒有傳入參數，也不會報錯了。
我們也可以給每個被解構的參數設定默認值，如下：
function initiateTransfer({ protocol = 'http', port = 800, delay = 150, retries = 10, timeout = 500, log = true }) { // code to initiate transfer }
在這個例子中，每個屬性都有一個默認值，我們不需要手動去檢查哪個參數值是 undefined ，然后在函數中給它設定默認值了。
瀏覽器對解構賦值的支持情況：
參數傳遞
參數能通過引用或值傳遞給函數。修改按引用傳遞的參數，一般反映在全局中，而修改按值傳遞的參數，則只是反映在函數內部。
在像 Visual Basic 和 PowerShell 這樣的語言中，我們可以選擇是按引用還是按值來傳遞參數，但是在 JavaScript 中則不行。
按值傳遞參數
從技術上來講，JavaScript 只允許按值傳參。當我們給函數按值傳遞一個參數時，該函數的作用域內就已經復制了這個值。因此，這個值的改變，只會在函數內部反映出來。請思考下面這個列子：
var a = 5; function increment(a) { a = ++a; console.log(a); } increment(a); // 6 console.log(a); // 5
這里，修改函數里面的參數 a = ++a，是不會影響到原來a的值。 所以在函數外面打印 a 的值，輸出仍然是 5。
按引用傳遞參數
在JavaScript中，一切都是按值傳遞的。但當我們給函數傳一個變量，而這個變量所指向的是一個對象（包括數組）時，這個 變量 就是對象的一個引用。通過這個變量來改變對象的屬性值，是會從根本上改變這個對象的。
來看下面這個例子：
function foo(param){ param.bar = 'new value'; } obj = { bar : 'value' } console.log(obj.bar); // value foo(obj); console.log(obj.bar); // new value
如你所見，對象的屬性值在函數內部被修改了，被修改的值在函數外面也是可見的。
當我們傳遞一個沒有初始值的參數時，如數組或對象，會隱形地創建了一個變量，這個變量指向記憶中原對象所在的位置。這個變量隨后被傳遞給了函數，在函數內部對這個變量進行修改將會影響到原對象。
參數類型檢測、參數缺失或參數多余
在強類型語言中，我們必須在函數聲明中明確參數的類型，但是 JavaScript 沒有這種特性。在JavaScript中，我們傳遞給函數的參數個數不限，也可以是任何類型的數據。
假設現在有一個函數，這個函數只接受一個參數。但是當函數被調用時，它本身沒有限制傳入的參數只能是一個，我們可以隨意地傳入一個、兩個、甚至是更多。我們也可以什么都不傳，這樣都不會報錯。
形參（arguments）和 實參（parameters）的個數不同有兩種情況：
·實參少於形參
缺失的參數都會等同於 undefined。
·實參多於形參
多余的參數都將被忽略，但它們會以數組的形式保存於變量 arguments 中（下文會討論到）。
必填參數
如果一個參數在函數調用時缺失了，它將被設為 undefined。基於這一點，我們可以在參數缺失時拋出一個錯誤：
function foo(mandatory, optional) { if (mandatory === undefined) { throw new Error('Missing parameter: mandatory'); } }
在 ES6 中，我們可以更好地利用這個特性，使用默認參數來設定必填參數：
function throwError() { throw new Error('Missing parameter'); } function foo(param1 = throwError(), param2 = throwError()) { // do something } foo(10, 20); // ok foo(10); // Error: missing parameter
參數對象
為了取代參數對象，rest參數在 ECMAScript 4 中就已經得到支持，但是 ECMAScript 4 沒有落實。隨着 ECMAScript 6 版本的發布，JS 正式支持rest參數。它也擬定計划，准備拋棄 對參數對象 arguments object 的支持。
參數對象是一個類數組對象，可在一切函數內使用。它允許通過數字而不是名稱，來找回被傳遞給函數的參數值。這個對象使得我們可以給函數傳遞任何參數。思考以下代碼段：
function checkParams(param1) { console.log(param1); // 2 console.log(arguments[0], arguments[1]); // 2 3 console.log(param1 + arguments[0]); // 2 + 2 } checkParams(2, 3);
該函數預期接收一個參數。但是當我們給它傳入兩個參數並且調用它時，第一個參數通過名為 param1 的形參或者參數對象 arguments[0] 被函數所接受，而第二個參數只能被放在argument[1] 里面。此外，請注意，參數對象可以與命名參數一起使用。
參數對象給每個被傳遞給函數的參數提供了一個入口，並且第一個入口的下標從 0 開始。如果我們要給上面這個函數傳遞更多的參數，我們可以寫 arguments[2],arguments[3] 等等。
我們甚至可以跳過設定命名參數這一步，直接使用參數對象：
function checkParams() { console.log(arguments[1], arguments[0], arguments[2]); } checkParams(2, 4, 6); // 4 2 6
事實上，命名參數只是為了方便使用，並不是必須的。類似地，rest參數也可用於反映被傳遞的參數：
function checkParams(...params) { console.log(params[1], params[0], params[2]); // 4 2 6 console.log(arguments[1], arguments[0], arguments[2]); // 4 2 6 } checkParams(2, 4, 6);
參數對象是一個類數組的對象，只是它沒有數組本身具備的方法，如slice() 和 foreach()。 如果要在參數對象中使用數組的方法，首先要把它轉換成一個真正的數組。
function sort() { var a = Array.prototype.slice.call(arguments); return a.sort(); } sort(40, 20, 50, 30); // [20, 30, 40, 50]
在該函數中，采用了 Array.prototype.slice.call() 來快速地把參數對象轉換成一個數組。接着，在 sort() 方法中，為這個數組排序並且把它返回。
ES6 新增了更直接的方法，用 Array.from() 把任何類數組對象轉換成數組：
function sort() { var a = Array.from(arguments); return a.sort(); } sort(40, 20, 50, 30); // [20, 30, 40, 50]
長度屬性
盡管參數對象從技術上來講，不算是一個數組，但仍有一個長度屬性，來檢測傳遞給函數的參數個數：
function countArguments() { console.log(arguments.length); } countArguments(); // 0 countArguments(10, null, "string"); // 3
通過 length 屬性，我們可以更好地控制傳遞給函數的參數個數。舉個例子，如果一個函數只要求兩個參數，那么我們就可以使用 length 屬性來檢測所傳入的參數個數，如果少於要求的個數，則拋出錯誤：
function foo(param1, param2) { if (arguments.length < 2) { throw new Error("This function expects at least two arguments"); } else if (arguments.length === 2) { // do something } }
rest參數是數組，所以他們都有 length 屬性。 所以上面的代碼，在ES6里面可以用rest參數寫成下面這樣：
function foo(...params) { if (params.length < 2) { throw new Error("This function expects at least two arguments"); } else if (params.length === 2) { // do something } }
被調用屬性與調用屬性
被調用 屬性指向當前正在執行的函數，而 調用 屬性則指向那個調用了 當前正在執行的函數 的函數。 在ES5的嚴格模式下，這些屬性是不被支持的，如果嘗試使用它們，則會報錯。
arguments.callee 這個屬性在遞歸函數中很有用，尤其在匿名函數中。因為匿名函數沒有名稱，只能通過 arguments.callee 來指向它。
var result = (function(n) { if (n <= 1) { return 1; } else { return n * arguments.callee(n - 1); } })(4); // 24
嚴格模式和非嚴格模式下的參數對象
在ES5非嚴格模式下，參數對象 有個不一般的特性：它能使 自身的值 跟 與之相對應的命名參數的值 保持同步。
請看下面這個例子：
function foo(param) { console.log(param === arguments[0]); // true arguments[0] = 500; console.log(param === arguments[0]); // true return param } foo(200); // 500
在這個函數里面，arguments[0] 被重新賦值為 500。由於 arguments 的值總是和對應的命名參數保持同步，所以改變了arguments[0] 的值，也就相應的改變了 param 的值。實際上，他們就像是同一個變量，擁有兩個不同的名字而已。而在 ES5嚴格模式下，參數對象的這種特性則被移除了。
"use strict"; function foo(param) { console.log(param === arguments[0]); // true arguments[0] = 500; console.log(param === arguments[0]); // false return param} foo(200); // 200
加上 嚴格模式， 現在改變 arguments[0] 的值是不會影響到 param 的值了，打印出來的值也跟預期的一致。 在 ES6中 該函數的輸出跟在 ES5 嚴格模式下是一樣的。需要記住的是，當函數聲明中使用了默認值時，參數對象是不會受到影響的：
function foo(param1, param2 = 10, param3 = 20) { console.log(param1 === arguments[0]); // true console.log(param2 === arguments[1]); // true console.log(param3 === arguments[2]); // false console.log(arguments[2]); // undefined console.log(param3); // 20 } foo('string1', 'string2');
在這個函數中，盡管 param3 有默認值 20，但是 arguments[2] 仍然是 undefined, 因為函數調用時只傳了兩個值。換言之，設定默認值對參數對象是沒有任何影響的。
總結
ES6 給 JS 帶來了上百個大大小小的改進。 越來越多的開發者正使用ES6的新特性, 所以我們都需要去了解它們。在本教程中，我們學習了ES6是如何改善JS的參數處理的，但我們仍只是知曉了ES6的皮毛。更多新的、有趣的特性值得我們去探討。