【譯】在ES6中如何優雅的使用Arguments和Parameters

原文地址：how-to-use-arguments-and-parameters-in-ecmascript-6

ES6是最新版本的ECMAScript標准，而且顯著的改善了JS里的參數處理。我們現在可以在函數里使用rest參數、默認值，結構賦值，等等語法

在這個教程里，我們將會仔細的探索實參和形參，看看ES6是如何升級他們的。

實參和形參

arguments 和 parameters經常被混為一談，為了這個教程我們還是做一個2者的區分。在大多數標准中，parameters 是我們定義函數時設置的名字（形參），arguments （或者是實參）是我們傳入函數的參數，看下如下的函數

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

在這個函數里，param1 和 param2 是函數的形參，而我們傳入函數的值10，20是實參

擴展運算符

在ES5里，apply方法接收一個數組，並且把把數組的每一項作為函數的參數傳入函數里。比如，我們經常用到 Math.max 方法，來找到一個數組里最大的那個值。

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

Math.max 方法並不接收數組類型的參數，它只接收數值類型的參數。當使用 Array 類型的參數傳入時，會拋出一個異常。但是當我們使用 apply 方法來調用 Math.max 方法時，數組會被拆開為一個個獨立的數值傳入函數里，這樣就能順利的使用 Math.max 了

幸運的是在ES6里，我們有擴展運算符，我們不再需要使用 apply 方法來拆分數組的每一項了。通過擴展運算符，我們可以把數組的每一項分開，

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

我們把 myArray 拆為一個個單獨的值，然后再傳入函數里。擴展運算符不僅好用，而且還有更多功能。比如他可以在函數調用時使用多次。

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的語法也可以干同樣的事，但是ES6更簡單

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參數是把多個參數變為一個數組。

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

如果沒有傳參，rest參數會變為一個空數組

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

rest參數在創建可變參數函數是尤其有用（一個函數可以接收多個、不固定的參數）。因為 rest parameter，可以方便替換函數里的 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

這個函數是用來檢測多個字符串是否在一個字符串內。這個函數有兩個問題，第一個問題是為了知道參數的意義我們不得不去查看代碼，第二個是，參數的遍歷是從 arguments 的1開始，因為 arguments[0] 代表的是第一個參數。如果我們后續打算在第一個參數后再加一個參數，那么這段邏輯就有問題了。

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是第一個值，剩下的參數都賦值給 keys 數組了

使用rest參數來替代arguments提高了代碼的閱讀性，而且避免了一些由於arguments帶來的性能問題。當然rest參數也有局限性，它必須定義為最后的參數，否則會產生語法錯誤。

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

另外的一個局限是rest參數只能在函數里定義一次。

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

參數的默認值

ES5里的參數默認值

js在ES5版本里不支持默認值，但是有一個解決方案，在函數里使用或操作符來hack這個。我們可以在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

這個函數期望2個參數，但是當沒有參數傳入時，將會使用默認值。在函數里，缺失的實參將會被設置為 undefined。所以我們可以檢測實參是否為 undefined ，並且設置默認值。檢測和設置實參時，我們用邏輯操作符||，這個操作符檢測第一個參數，如果是存在的則返回這個值，否則的會返回第二個參數

這個方法是很常用的，但是它有缺陷，比如當參數的值為0或者nul時，會導致第二個參數的返回。所以當我們要傳入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，這個方法需要大量的代碼。但是它還是很安全的。

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 函數只有在缺少第二個參數時才會被調用。當我們傳入2個參數時，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

注意：和別的語言不一樣，JS執行默認值在執行時。

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
}

在這個實例里，每一個屬性都一個默認值。消除人工判斷賦值的過程。

傳參

參數的傳遞有個2種方式：引用傳參和值傳參。

在別的語言里，例如VB，PowerShell，我們有選項來指定參數的類型，引用傳參還是值傳參。但是在JS里沒有這個功能。

值傳參

技術上，JS可以只能按值傳參。當我們傳入函數一個值是，我們復制一份值，在函數的作用域里。從而，這個值的變化只是在函數體內完成。

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

這里，在函數體內改變這個值，並不會對值的原本值有影響。那么，當這個值外部所使用時，輸出的還是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

正如你看到的，在函數里對象的屬性被改變了，而且這個改變的值也影響到了函數之外。

類型檢測，參數的缺失和多余傳入

在強類型語言里，我們可以通過函數的定義來指定參數的類型，但是在JS里是缺乏這種機制的，在JS里，無論你的傳入何種類型的參數，多少個參數都是可以的。

假設我們有一個函數，我們希望它只能接收一個參數，當我們調用這個函數時，我們沒有辦法限制只傳入一個函數，我們可以傳一個、兩個，或者多個。我們甚至可以一個參數都不傳入，而且調用時不會有個報錯。

實參和形參的數量可以這樣比較

• 實參少於形參

  形參會被賦值為undefined

• 實參多於形參

  多傳入的參數會被忽略，但是可以通過類數組對象argument獲取到

強制參數

當調用函數時缺少實參，那么參數會被設置為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

arguments對象

ES4標准里就對rest參數進行了支持，目的就是用來替代arguments，但是ES4標准沒有被實現。通過ES6標准的發布，JS現在官方的支持了rest參數。並且計划機制支持arguments對象的實現。

arguments對象是一個類數組的對象。在所有的函數里都有這個對象。你可以通過arguments的腳標來獲取傳入函數的實參。

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

這個函數本來希望只接收一個參數，但是我們也可以傳入2個參數。第一個參數可以通過param1形參獲取到，或者使用arguments[0]的形式。但是第二個參數只能通過arguments[1]的方式獲取到了。arguments獲取實參的方式可以和形參一起使用。

arguments對象包含了傳入函數的每一個實參，第一個實參從arguments的第一位開始。如果我們想獲得后面的值，則可以通過角標方式讀取，比如 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);

arguments 對象是一個類數組對象，但是缺少了數組的方法。例如slice，foreach。為了使用數組的特性，我們可以把 arguments 轉為一個真正的數組。

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() 可以快速的把arguments轉為一個數組，接下來sort方法就可以使用了。

ES6甚至有一個Array.from方法，可以使用類數組對象創建一個新數組。

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

arguments的長度屬性

盡管arguments對象不是嚴格意義上的數組，但是它有length屬性。通過length屬性你可以用來檢測傳入函數的實參個數。

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

通過length屬性，我們可以很好的控制傳入函數參數的個數。如果一個函數只接收2個參數。那么我們可以檢測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標准下可以這樣寫：

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

callee和caller屬性

callee 屬性是指向正在執行的函數，caller 指向當前執行函數的調用體函數。在ES5的嚴格模式下，這些屬性都是被禁止的，如果你試圖獲取他們的話，會拋出一個錯誤。

arguments.callee 屬性在遞歸時非常有用，尤其當函數是一個匿名函數時。因為匿名函數沒有名字，這時你只有通過 arguments.callee 來獲取。

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

嚴格和非嚴格模式下的Arguments對象

在ES5的嚴格模式下，arguments 對象有一個不常用的特性，它的值和形參的值是保持同步的。

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] ，由於同步的原因，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嚴格模式一致，記住一點：當設置了函數參數的默認值時，arguments的值並不會受到影響。

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 被設置了默認值，但它的值和 arguments[2] 也不一樣，因為在調用函數時只有2個參數被傳入。換句話說，設置默認值並不會改變 arguments 對象。

總結

ES6給JS帶來了幾百個大大小小的改進，越來越多的程序員正在使用這些新特性，而且這些新特性也會變得不可或缺了。在這個教程中，我們學習了ES6是如何升級了參數處理，但是我們只是才划開了ES6的面紗。還有更多的新功能值得我們探索。