ES6中Arguments和Parameters用法解析

時間 2019-11-11

標籤 es6 arguments parameters 用法解析欄目 JavaScript 简体版

原文原文鏈接

原文連接數組

譯文瀏覽器

　　ECMAScript 6 (也稱 ECMAScript 2015) 是ECMAScript 標準的最新版本，顯著地完善了JS中參數的處理方式。除了其它新特性外，咱們還可使用rest參數、默認值、解構賦值等。安全

　　本教程中，咱們將詳細探索arguments和parameters，看看ES6是若是改善升級它們的。app

對比 Arguments 和 Parametersecmascript

　　一般狀況下提到 Arguments 和 Parameters，都認爲是能夠互換使用的。然而，基於本教程的目的，咱們作了明確的區分。在大多數標準中，parameters (形式參數) 指聲明函數名和函數體的時候使用的參數，而 arguments (實際參數) 指在函數實際調用時，傳入的肯定值。思考下面這個函數：函數

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

　　在這個函數中， param1 和 param2 是函數的形式參數（形參）, 而在函數foo調用時，傳入的 (10 和 20) 則是實際參數（實參）。學習

擴展操做符優化

　　在 ES5 中，用 apply() 方法能夠很方便地將一個數組傳遞給函數。例如，咱們常常把它和 Math.max() 結合使用，來取得數組中的最大值。請看下面代碼：this

var myArray = [5, 10, 50];

Math.max(myArray);    // Error: NaN

Math.max.apply(Math, myArray);    // 50

　　Math.max() 方法並不支持傳入數組，它只接受數字。因此當咱們把數組做爲參數傳遞給它時，就會拋出錯誤。可是，加上 apply() 方法後，數組會被轉換成單獨的數字，就能被 Math.max() 處理了。spa

　　慶幸的是，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');