摘要：默認(rèn)參數(shù)有了我們不需要再去檢測(cè)哪些值為并且給它們?cè)O(shè)定默認(rèn)值了。我們甚至可以使用函數(shù)去找回默認(rèn)參數(shù)的值注意這個(gè)函數(shù)只有在第二個(gè)參數(shù)省略時(shí)才會(huì)被調(diào)用。瀏覽器對(duì)默認(rèn)參數(shù)的支持情況桌面瀏覽器移動(dòng)端瀏覽器解構(gòu)賦值解構(gòu)賦值是的新特性。

原文地址：https://www.smashingmagazine.com/2016/07/how-to-use-arguments-and-parameters-in-ecmascript-6

By Faraz Kelhini

July 20th, 2016

JavaScriptTools

7 Comments

ECMAScript 6 (也稱 ECMAScript 2015) 是ECMAScript 標(biāo)準(zhǔn)的最新版本，顯著地完善了JS中參數(shù)的處理方式。除了其它新特性外，我們還可以使用rest參數(shù)、默認(rèn)值、解構(gòu)賦值等。

本教程中，我們將詳細(xì)探索arguments和parameters，看看ES6是如果改善升級(jí)它們的。

通常情況下提到 Arguments 和 Parameters， 都認(rèn)為是可以互換使用的。然而，基于本教程的目的，我們做了明確的區(qū)分。在大多數(shù)標(biāo)準(zhǔn)中，parameters (形式參數(shù)) 指聲明函數(shù)名和函數(shù)體的時(shí)候使用的參數(shù)，而 arguments (實(shí)際參數(shù)) 指在函數(shù)實(shí)際調(diào)用時(shí)，傳入的確定值。思考下面這個(gè)函數(shù)：

function foo(param1, param2) {
    // do something
}
foo(10, 20); 

在這個(gè)函數(shù)中， param1 和 param2 是函數(shù)的形式參數(shù)（形參）, 而在函數(shù)foo調(diào)用時(shí)，傳入的 (10 和 20) 則是實(shí)際參數(shù)（實(shí)參）。

在 ES5 中，用 apply() 方法可以很方便地將一個(gè)數(shù)組傳遞給函數(shù)。例如，我們經(jīng)常把它和 Math.max() 結(jié)合使用，來(lái)取得數(shù)組中的最大值。請(qǐng)看下面代碼：

var myArray = [5, 10, 50];
Math.max(myArray);    // Error: NaN
Math.max.apply(Math, myArray);    // 50 

Math.max() 方法并不支持傳入數(shù)組，它只接受數(shù)字。所以當(dāng)我們把數(shù)組作為參數(shù)傳遞給它時(shí)，就會(huì)拋出錯(cuò)誤。但是，加上 apply() 方法后，數(shù)組會(huì)被轉(zhuǎn)換成多帶帶的數(shù)字，就能被 Math.max() 處理了。

慶幸的是，ES6 引入了擴(kuò)展操作符，我們不需要再使用 apply() 方法了。通過(guò)擴(kuò)展操作符，我們可以很方便地為表達(dá)式傳入多個(gè)參數(shù)：

var myArray = [5, 10, 50];
Math.max(...myArray);    // 50 

這里，擴(kuò)展操作符把 myArray 展開(kāi)成獨(dú)立的數(shù)值傳給了函數(shù)。 ES5里面使用 apply() 來(lái)模仿操作符是可以達(dá)到目的的，只是語(yǔ)法上令人困惑，并且缺乏擴(kuò)展操作符的靈活性。 擴(kuò)展操作符不僅易于使用，還涵蓋了很多其他特性。例如，它可以被多次使用，還可以在 function 調(diào)用時(shí)，和其它參數(shù)混合使用:

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 

擴(kuò)展操作符的另一個(gè)優(yōu)點(diǎn)，就是它可以很簡(jiǎn)單地和構(gòu)造函數(shù)一起使用：

new Date(...[2016, 5, 6]);    // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)` 

當(dāng)然，我們可以用ES5重寫上面的代碼，但我們則需要用一個(gè)復(fù)雜的模式來(lái)避免類型錯(cuò)誤：

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) 

桌面瀏覽器;

移動(dòng)端瀏覽器：

rest參數(shù)和擴(kuò)展操作符擁有相同的語(yǔ)法，不同的是，rest參數(shù)是把所有的參數(shù)收集起來(lái)轉(zhuǎn)換成數(shù)組，而擴(kuò)展操作符是把數(shù)組擴(kuò)展成多帶帶的參數(shù)。

function myFunction(...options) {
     return options;
}
myFunction("a", "b", "c");      // ["a", "b", "c"] 

如果函數(shù)調(diào)用時(shí)，沒(méi)有傳入實(shí)際參數(shù)，則rest參數(shù)會(huì)輸出一個(gè)空數(shù)組，如下：

function myFunction(...options) {
     return options;
}
myFunction();      // [] 

rest參數(shù)在創(chuàng)建一個(gè)可變函數(shù)（即一個(gè)參數(shù)個(gè)數(shù)可變的函數(shù)）時(shí)尤其有用。rest參數(shù)有著數(shù)組固有的優(yōu)勢(shì)，可以快捷地替換 arguments 對(duì)象（下文會(huì)解釋這個(gè)名詞）。下面這個(gè)函數(shù)是用ES5寫的，我們來(lái)看下：

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 

該函數(shù)檢查字符串（this is a string）是否包括這些子串（is, this）。這個(gè)函數(shù)存在的第一個(gè)問(wèn)題是，我們必須看函數(shù)體內(nèi)是否有多個(gè)參數(shù)。第二個(gè)問(wèn)題是，循環(huán)必須從 1 開(kāi)始，而不是從 0 開(kāi)始, 因?yàn)?arguments[0] 指向的就是第一個(gè)參數(shù)（this is a string）。 如果以后我們想要在這個(gè)字符串的前面或者后面添加另一個(gè)參數(shù)，我們可能會(huì)忘記更新循環(huán)體。而使用rest參數(shù)，我們就可以很容易地避免這些問(wèn)題：

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 

該函數(shù)的輸出跟前一個(gè)函數(shù)的輸出是一樣的。這里再提一下，參數(shù) string 被包含在這個(gè)函數(shù)的 argument 中，并且第一個(gè)被傳遞進(jìn)來(lái)，剩下的參數(shù)都被放到一個(gè)數(shù)組，并且賦給了名為 keys 的變量。

使用rest參數(shù)替代 arguments 對(duì)象來(lái)提高代碼的可讀性和避免一些js的優(yōu)化問(wèn)題1。 然而，rest參數(shù)也不是沒(méi)有缺點(diǎn)的。例如，它必須是最后一個(gè)參數(shù)，否則就會(huì)報(bào)錯(cuò)，如下面函數(shù)所示：

function logArguments(a, ...params, b) {
        console.log(a, params, b);
}
logArguments(5, 10, 15);    // SyntaxError: parameter after rest parameter 

另一個(gè)缺點(diǎn)是，一個(gè)函數(shù)聲明只能允許有一個(gè)rest參數(shù)：

function logArguments(...param1, ...param2) {
}
logArguments(5, 10, 15);    // SyntaxError: parameter after rest parameter 

桌面瀏覽器：

移動(dòng)端瀏覽器：

在ES5中，JS 并不支持默認(rèn)參數(shù), 但是，我們也有一種變通的方案，那就是在函數(shù)中使用 OR 操作符（ || ）。我們簡(jiǎn)單地模仿ES5中的默認(rèn)參數(shù)，請(qǐng)看下面函數(shù)：

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 

該函數(shù)預(yù)期傳入兩個(gè)參數(shù)，但如果在調(diào)用該函數(shù)時(shí)，沒(méi)有傳入實(shí)參，則它會(huì)用默認(rèn)值。在函數(shù)體內(nèi)，如果沒(méi)有傳入實(shí)際參數(shù)，則會(huì)被自動(dòng)設(shè)為 undefined, 所以，我們可以檢測(cè)這些參數(shù)，并且聲明他們的默認(rèn)值。我們可以使用 OR 操作符（||）來(lái)檢測(cè)是否有傳入實(shí)際參數(shù)，并且設(shè)定他們的默認(rèn)值。OR 操作符會(huì)檢測(cè)它的第一個(gè)參數(shù)，如果有實(shí)際值2，則用第一個(gè)，如果沒(méi)有，則用它的第二個(gè)參數(shù)。

這種方法在函數(shù)中普遍使用，但它有一個(gè)瑕疵，那就是傳入 0 或者 null 也會(huì)觸發(fā)默認(rèn)值，因?yàn)?0 和 null 都被認(rèn)為是false. 所以，如果我們需要給函數(shù)傳入 0 和 null 時(shí)，我們需要另一種方式去檢測(cè)這個(gè)參數(shù)是否缺失：

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 

在上面這個(gè)函數(shù)中，只有當(dāng)所傳的參數(shù)全等于 undefined 時(shí)，才會(huì)使用默認(rèn)值。這種方式需要用到的代碼稍微多點(diǎn)，但是安全度更高，我們可以給函數(shù)傳入 0 和 null 。

有了ES6,我們不需要再去檢測(cè)哪些值為undefined并且給它們?cè)O(shè)定默認(rèn)值了。現(xiàn)在我們可以直接在函數(shù)聲明中放置默認(rèn)值：

function foo(a = 10, b = 10) {
  console.log(a, b);
}
foo(5);    // 5 10
foo(0, null);    // 0 null 

如你所見(jiàn)，省略一個(gè)參數(shù)，就會(huì)觸發(fā)一個(gè)默認(rèn)值，但是傳入 0 或者 null 時(shí)，則不會(huì)。 我們甚至可以使用函數(shù)去找回默認(rèn)參數(shù)的值：

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 這個(gè)函數(shù)只有在第二個(gè)參數(shù)省略時(shí)才會(huì)被調(diào)用。所以當(dāng)我們給 multiply 傳入兩個(gè)參數(shù)并調(diào)用它時(shí)，alert是不會(huì)出現(xiàn)的。

默認(rèn)參數(shù)還有一個(gè)有趣的特性，那就是我們可以在函數(shù)聲明中指定其它參數(shù)和變量的值：

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 

你甚至可以在函數(shù)聲明中做運(yùn)算：

function myFunction(a, b = ++a, c = a*b) {
     console.log(c);
}
myFunction(5);    // 36 

請(qǐng)注意，JavaScript 和其它語(yǔ)言不同， 它是在函數(shù)被調(diào)用時(shí)，才去求參數(shù)的默認(rèn)值。

function add(value, array = []) {
  array.push(value);
  return array;
}
add(5);    // [5]
add(6);    // [6], not [5, 6] 

桌面瀏覽器：

移動(dòng)端瀏覽器：

解構(gòu)賦值是ES6的新特性。我們可以從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值。這種語(yǔ)法清晰且易于理解，尤其是在給函數(shù)傳參時(shí)特別有用。

在ES5里面，我們經(jīng)常用一個(gè)配置對(duì)象來(lái)處理大量的可選參數(shù)， 特別是當(dāng)對(duì)象屬性的順序可變時(shí)：

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); 

這種方式實(shí)現(xiàn)起來(lái)很好，已經(jīng)被許多JS開(kāi)發(fā)者所采用。 只是我們必須看函數(shù)內(nèi)部，才知道函數(shù)預(yù)期需要哪些參數(shù)。結(jié)合解構(gòu)賦值，我們就可以在函數(shù)聲明中清晰地表示這些參數(shù)：

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); 

在該函數(shù)中，我們沒(méi)有傳入一個(gè)配置對(duì)象，而是以對(duì)象解構(gòu)賦值的方式，給它傳參數(shù)。這樣做不僅使這個(gè)函數(shù)更加簡(jiǎn)明，可讀性也更高。

我們也可以把解構(gòu)賦值傳參和其它規(guī)則的參數(shù)一起使用：

function initiateTransfer(param1, {protocol, port, delay, retries, timeout, log}) {
     // code to initiate transfer
}
initiateTransfer("some value", options); 

注意如果函數(shù)調(diào)用時(shí)，參數(shù)被省略掉，則會(huì)拋出錯(cuò)誤，如下：

function initiateTransfer({protocol, port, delay, retries, timeout, log}) {
     // code to initiate transfer
}
initiateTransfer();  // TypeError: Cannot match against "undefined" or "null" 

當(dāng)我們需要讓參數(shù)都是必填時(shí)，這種方法能夠得到我們想要的結(jié)果，但如果我們希望參數(shù)是可選的時(shí)候呢？想要讓參數(shù)缺失時(shí)不會(huì)報(bào)錯(cuò)，我們就需要給默認(rèn)參數(shù)設(shè)定一個(gè)默認(rèn)值：

function initiateTransfer({protocol, port, delay, retries, timeout, log} = {}) {
     // code to initiate transfer
}
initiateTransfer();    // no error 

上面這個(gè)函數(shù)中，需要解構(gòu)賦值的參數(shù)有了一個(gè)默認(rèn)值，這個(gè)默認(rèn)值就是一個(gè)空對(duì)象。這時(shí)候，函數(shù)被調(diào)用時(shí)，即使沒(méi)有傳入?yún)?shù)，也不會(huì)報(bào)錯(cuò)了。

我們也可以給每個(gè)被解構(gòu)的參數(shù)設(shè)定默認(rèn)值，如下：

function initiateTransfer({
    protocol = "http",
    port = 800,
    delay = 150,
    retries = 10,
    timeout = 500,
    log = true
}) {
     // code to initiate transfer
} 

在這個(gè)例子中，每個(gè)屬性都有一個(gè)默認(rèn)值，我們不需要手動(dòng)去檢查哪個(gè)參數(shù)值是 undefined ，然后在函數(shù)中給它設(shè)定默認(rèn)值了。

桌面瀏覽器：

移動(dòng)端瀏覽器：

參數(shù)能通過(guò)引用或值傳遞給函數(shù)。修改按引用傳遞的參數(shù)，一般反映在全局中，而修改按值傳遞的參數(shù)，則只是反映在函數(shù)內(nèi)部。

在像 Visual Basic 和 PowerShell 這樣的語(yǔ)言中，我們可以選擇是按引用還是按值來(lái)傳遞參數(shù)，但是在 JavaScript 中則不行。

從技術(shù)上來(lái)講，JavaScript 只允許按值傳參。當(dāng)我們給函數(shù)按值傳遞一個(gè)參數(shù)時(shí)，該函數(shù)的作用域內(nèi)就已經(jīng)復(fù)制了這個(gè)值。因此，這個(gè)值的改變，只會(huì)在函數(shù)內(nèi)部反映出來(lái)。請(qǐng)思考下面這個(gè)列子：

var a = 5;
function increment(a) {
    a = ++a;
    console.log(a);
}
increment(a);   // 6
console.log(a);    // 5 

這里，修改函數(shù)里面的參數(shù) a = ++a，是不會(huì)影響到原來(lái)a的值。 所以在函數(shù)外面打印 a 的值，輸出仍然是 5。

在JavaScript中，一切都是按值傳遞的。但當(dāng)我們給函數(shù)傳一個(gè)變量，而這個(gè)變量所指向的是一個(gè)對(duì)象（包括數(shù)組）時(shí)，這個(gè) 變量 就是對(duì)象的一個(gè)引用。通過(guò)這個(gè)變量來(lái)改變對(duì)象的屬性值，是會(huì)從根本上改變這個(gè)對(duì)象的。

來(lái)看下面這個(gè)例子：

function foo(param){
    param.bar = "new value";
}
obj = {
    bar : "value"
}
console.log(obj.bar);   // value
foo(obj);
console.log(obj.bar);   // new value 

如你所見(jiàn)，對(duì)象的屬性值在函數(shù)內(nèi)部被修改了，被修改的值在函數(shù)外面也是可見(jiàn)的。

當(dāng)我們傳遞一個(gè)沒(méi)有初始值的參數(shù)時(shí)，如數(shù)組或?qū)ο?，?huì)隱形地創(chuàng)建了一個(gè)變量，這個(gè)變量指向記憶中原對(duì)象所在的位置。這個(gè)變量隨后被傳遞給了函數(shù)，在函數(shù)內(nèi)部對(duì)這個(gè)變量進(jìn)行修改將會(huì)影響到原對(duì)象。

在強(qiáng)類型語(yǔ)言中，我們必須在函數(shù)聲明中明確參數(shù)的類型，但是 JavaScript 沒(méi)有這種特性。在JavaScript中，我們傳遞給函數(shù)的參數(shù)個(gè)數(shù)不限，也可以是任何類型的數(shù)據(jù)。

假設(shè)現(xiàn)在有一個(gè)函數(shù)，這個(gè)函數(shù)只接受一個(gè)參數(shù)。但是當(dāng)函數(shù)被調(diào)用時(shí)，它本身沒(méi)有限制傳入的參數(shù)只能是一個(gè)，我們可以隨意地傳入一個(gè)、兩個(gè)、甚至是更多。我們也可以什么都不傳，這樣都不會(huì)報(bào)錯(cuò)。

形參（arguments）和 實(shí)參（parameters）的個(gè)數(shù)不同有兩種情況：

實(shí)參少于形參

缺失的參數(shù)都會(huì)等同于 undefined。

實(shí)參多于形參

多余的參數(shù)都將被忽略，但它們會(huì)以數(shù)組的形式保存于變量 arguments 中（下文會(huì)討論到）。

如果一個(gè)參數(shù)在函數(shù)調(diào)用時(shí)缺失了，它將被設(shè)為 undefined?；谶@一點(diǎn)，我們可以在參數(shù)缺失時(shí)拋出一個(gè)錯(cuò)誤：

function foo(mandatory, optional) {
    if (mandatory === undefined) {
        throw new Error("Missing parameter: mandatory");
    }
} 

在 ES6 中，我們可以更好地利用這個(gè)特性，使用默認(rèn)參數(shù)來(lái)設(shè)定必填參數(shù)：

function throwError() {
    throw new Error("Missing parameter");
}
function foo(param1 = throwError(), param2 = throwError()) {
    // do something
}
foo(10, 20);    // ok
foo(10);   // Error: missing parameter 

為了取代參數(shù)對(duì)象，rest參數(shù)在 ECMAScript 4 中就已經(jīng)得到支持，但是 ECMAScript 4 沒(méi)有落實(shí)。隨著 ECMAScript 6 版本的發(fā)布，JS 正式支持rest參數(shù)。它也擬定計(jì)劃，準(zhǔn)備拋棄 對(duì)參數(shù)對(duì)象 arguments object 的支持。

參數(shù)對(duì)象是一個(gè)類數(shù)組對(duì)象，可在一切函數(shù)內(nèi)使用。它允許通過(guò)數(shù)字而不是名稱，來(lái)找回被傳遞給函數(shù)的參數(shù)值。這個(gè)對(duì)象使得我們可以給函數(shù)傳遞任何參數(shù)。思考以下代碼段：

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); 

該函數(shù)預(yù)期接收一個(gè)參數(shù)。但是當(dāng)我們給它傳入兩個(gè)參數(shù)并且調(diào)用它時(shí)，第一個(gè)參數(shù)通過(guò)名為 param1 的形參或者參數(shù)對(duì)象 arguments[0] 被函數(shù)所接受，而第二個(gè)參數(shù)只能被放在argument[1] 里面。此外，請(qǐng)注意，參數(shù)對(duì)象可以與命名參數(shù)一起使用。

參數(shù)對(duì)象給每個(gè)被傳遞給函數(shù)的參數(shù)提供了一個(gè)入口，并且第一個(gè)入口的下標(biāo)從 0 開(kāi)始。如果我們要給上面這個(gè)函數(shù)傳遞更多的參數(shù)，我們可以寫 arguments[2],arguments[3] 等等。

我們甚至可以跳過(guò)設(shè)定命名參數(shù)這一步，直接使用參數(shù)對(duì)象：

function checkParams() {
    console.log(arguments[1], arguments[0], arguments[2]);
}
checkParams(2, 4, 6);  // 4 2 6 

事實(shí)上，命名參數(shù)只是為了方便使用，并不是必須的。類似地，rest參數(shù)也可用于反映被傳遞的參數(shù)：

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); 

參數(shù)對(duì)象是一個(gè)類數(shù)組的對(duì)象，只是它沒(méi)有數(shù)組本身具備的方法，如slice() 和 foreach()。 如果要在參數(shù)對(duì)象中使用數(shù)組的方法，首先要把它轉(zhuǎn)換成一個(gè)真正的數(shù)組。

function sort() {
    var a = Array.prototype.slice.call(arguments);
    return a.sort();
}
sort(40, 20, 50, 30);    // [20, 30, 40, 50] 

在該函數(shù)中，采用了 Array.prototype.slice.call() 來(lái)快速地把參數(shù)對(duì)象轉(zhuǎn)換成一個(gè)數(shù)組。接著，在 sort() 方法中，為這個(gè)數(shù)組排序并且把它返回。

ES6 新增了更直接的方法，用 Array.from() 把任何類數(shù)組對(duì)象轉(zhuǎn)換成數(shù)組：

function sort() {
    var a = Array.from(arguments);
    return a.sort();
}
sort(40, 20, 50, 30);    // [20, 30, 40, 50] 

盡管參數(shù)對(duì)象從技術(shù)上來(lái)講，不算是一個(gè)數(shù)組，但仍有一個(gè)長(zhǎng)度屬性，來(lái)檢測(cè)傳遞給函數(shù)的參數(shù)個(gè)數(shù)：

function countArguments() {
    console.log(arguments.length);
}
countArguments();    // 0
countArguments(10, null, "string");    // 3 

通過(guò) length 屬性，我們可以更好地控制傳遞給函數(shù)的參數(shù)個(gè)數(shù)。舉個(gè)例子，如果一個(gè)函數(shù)只要求兩個(gè)參數(shù)，那么我們就可以使用 length 屬性來(lái)檢測(cè)所傳入的參數(shù)個(gè)數(shù)，如果少于要求的個(gè)數(shù)，則拋出錯(cuò)誤：

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參數(shù)是數(shù)組，所以他們都有 length 屬性。 所以上面的代碼，在ES6里面可以用rest參數(shù)寫成下面這樣：

function foo(...params) {
  if (params.length < 2) {
        throw new Error("This function expects at least two arguments");
    } else if (params.length === 2) {
        // do something
    }
} 

被調(diào)用 屬性指向當(dāng)前正在執(zhí)行的函數(shù)，而 調(diào)用 屬性則指向那個(gè)調(diào)用了 當(dāng)前正在執(zhí)行的函數(shù) 的函數(shù)。 在ES5的嚴(yán)格模式下，這些屬性是不被支持的，如果嘗試使用它們，則會(huì)報(bào)錯(cuò)。

arguments.callee 這個(gè)屬性在遞歸函數(shù)中很有用，尤其在匿名函數(shù)中。因?yàn)槟涿瘮?shù)沒(méi)有名稱，只能通過(guò) arguments.callee 來(lái)指向它。

var result = (function(n) {
  if (n <= 1) {
    return 1;
  } else {
    return n * arguments.callee(n - 1);
  }
})(4);   // 24

在ES5非嚴(yán)格模式下，參數(shù)對(duì)象 有個(gè)不一般的特性：它能使 自身的值 跟 與之相對(duì)應(yīng)的命名參數(shù)的值 保持同步。

請(qǐng)看下面這個(gè)例子：

function foo(param) {
   console.log(param === arguments[0]);    // true
   arguments[0] = 500;
   console.log(param === arguments[0]);    // true
   return param
}
foo(200);    // 500 

在這個(gè)函數(shù)里面，arguments[0] 被重新賦值為 500。由于 arguments 的值總是和對(duì)應(yīng)的命名參數(shù)保持同步，所以改變了arguments[0] 的值，也就相應(yīng)的改變了 param 的值。實(shí)際上，他們就像是同一個(gè)變量，擁有兩個(gè)不同的名字而已。而在 ES5嚴(yán)格模式下，參數(shù)對(duì)象的這種特性則被移除了。

"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 

加上 嚴(yán)格模式， 現(xiàn)在改變 arguments[0] 的值是不會(huì)影響到 param 的值了，打印出來(lái)的值也跟預(yù)期的一致。 在 ES6中 該函數(shù)的輸出跟在 ES5 嚴(yán)格模式下是一樣的。需要記住的是，當(dāng)函數(shù)聲明中使用了默認(rèn)值時(shí)，參數(shù)對(duì)象是不會(huì)受到影響的：

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"); 

在這個(gè)函數(shù)中，盡管 param3 有默認(rèn)值 20，但是 arguments[2] 仍然是 undefined, 因?yàn)楹瘮?shù)調(diào)用時(shí)只傳了兩個(gè)值。換言之，設(shè)定默認(rèn)值對(duì)參數(shù)對(duì)象是沒(méi)有任何影響的。

ES6 給 JS 帶來(lái)了上百個(gè)大大小小的改進(jìn)。 越來(lái)越多的開(kāi)發(fā)者正使用ES6的新特性, 所以我們都需要去了解它們。在本教程中，我們學(xué)習(xí)了ES6是如何改善JS的參數(shù)處理的，但我們?nèi)灾皇侵獣粤薊S6的皮毛。更多新的、有趣的特性值得我們?nèi)ヌ接憽?/p> 參考鏈接 Link

ECMAScript 6 Compatibility Table3, Juriy Zaytsev

ECMAScript 2015 Language Specification4, ECMA International

(rb, ml, al, il)

Front page image credits: JavaScript Planet5.

1 https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments

2 https://developer.mozilla.org/en-US/docs/Glossary/Truthy

3 https://kangax.github.io/compat-table/es6/

4 http://www.ecma-international.org/ecma-262/6.0/

5 https://www.youtube.com/channel/UCzVnCG4ItKitN1SCBM7-AbA