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

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

ES6是最新版本的ECMAScript標準,並且顯著的改善了JS裏的參數處理。咱們如今能夠在函數裏使用rest參數、默認值,結構賦值,等等語法java

在這個教程裏,咱們將會仔細的探索實參和形參,看看ES6是如何升級他們的。git

實參和形參

argumentsparameters常常被混爲一談,爲了這個教程咱們仍是作一個2者的區分。在大多數標準中,parameters 是咱們定義函數時設置的名字(形參),arguments (或者是實參)是咱們傳入函數的參數,看下以下的函數程序員

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

在這個函數裏,param1param2 是函數的形參,而咱們傳入函數的值10,20是實參es6

擴展運算符

在ES5裏,apply方法接收一個數組,而且把把數組的每一項做爲函數的參數傳入函數裏。好比,咱們常常用到 Math.max 方法,來找到一個數組裏最大的那個值。github

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 拆爲一個個單獨的值,而後再傳入函數裏。擴展運算符不只好用,並且還有更多功能。好比他能夠在函數調用時使用屢次。app

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

另外一個擴展運算符的好處是:能夠方便的在構造函數裏使用ecmascript

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的面紗。還有更多的新功能值得咱們探索。

相關文章
相關標籤/搜索