【译】在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的面纱。还有更多的新功能值得咱们探索。