[译] ES6 中 Arguments 和 Parameters 用法解析

时间 2019-11-06

标签 es6 arguments parameters 用法解析栏目 JavaScript 繁體版

原文原文链接

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

By Faraz Kelhinijava

July 20th, 2016git

JavaScript Toolses6

7 Commentsgithub

ECMAScript 6 (也称 ECMAScript 2015) 是ECMAScript 标准的最新版本，显著地完善了JS中参数的处理方式。除了其它新特性外，咱们还可使用rest参数、默认值、解构赋值等。数组

本教程中，咱们将详细探索arguments和parameters，看看ES6是若是改善升级它们的。浏览器

对比 Arguments 和 Parameters Link

一般状况下提到 Arguments 和 Parameters，都认为是能够互换使用的。然而，基于本教程的目的，咱们作了明确的区分。在大多数标准中，parameters (形式参数) 指声明函数名和函数体的时候使用的参数，而 arguments (实际参数) 指在函数实际调用时，传入的肯定值。思考下面这个函数：安全

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

在这个函数中， param1 和 param2 是函数的形式参数（形参）, 而在函数foo调用时，传入的 (10 和 20) 则是实际参数（实参）。app

扩展操做符 Link

在 ES5 中，用 apply() 方法能够很方便地将一个数组传递给函数。例如，咱们常常把它和 Math.max() 结合使用，来取得数组中的最大值。请看下面代码：ecmascript

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

Math.max() 方法并不支持传入数组，它只接受数字。因此当咱们把数组做为参数传递给它时，就会抛出错误。可是，加上 apply() 方法后，数组会被转换成单独的数字，就能被 Math.max() 处理了。

庆幸的是，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)

浏览器对扩展操做符在函数中调用的支持状况 Link

桌面浏览器;

移动端浏览器：

Rest参数 Link

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 parameter

另外一个缺点是，一个函数声明只能容许有一个rest参数：

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

浏览器对Rest参数的支持状况 Link

桌面浏览器：

移动端浏览器：

默认参数 Link

ES5 默认参数 Link

在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 默认参数 Link

有了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]

浏览器对默认参数的支持状况 Link

桌面浏览器：

移动端浏览器：

解构赋值 Link

解构赋值是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 ，而后在函数中给它设定默认值了。

浏览器对解构赋值的支持状况 Link

桌面浏览器：

移动端浏览器：

参数传递 Link

参数能经过引用或值传递给函数。修改按引用传递的参数，通常反映在全局中，而修改按值传递的参数，则只是反映在函数内部。

在像 Visual Basic 和 PowerShell 这样的语言中，咱们能够选择是按引用仍是按值来传递参数，可是在 JavaScript 中则不行。

按值传递参数 Link

从技术上来说，JavaScript 只容许按值传参。当咱们给函数按值传递一个参数时，该函数的做用域内就已经复制了这个值。所以，这个值的改变，只会在函数内部反映出来。请思考下面这个列子：

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

这里，修改函数里面的参数 a = ++a，是不会影响到原来a的值。因此在函数外面打印 a 的值，输出仍然是 5。

按引用传递参数 Link

在JavaScript中，一切都是按值传递的。但当咱们给函数传一个变量，而这个变量所指向的是一个对象（包括数组）时，这个 变量 就是对象的一个引用。经过这个变量来改变对象的属性值，是会从根本上改变这个对象的。

来看下面这个例子：

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

如你所见，对象的属性值在函数内部被修改了，被修改的值在函数外面也是可见的。

当咱们传递一个没有初始值的参数时，如数组或对象，会隐形地建立了一个变量，这个变量指向记忆中原对象所在的位置。这个变量随后被传递给了函数，在函数内部对这个变量进行修改将会影响到原对象。

参数类型检测、参数缺失或参数多余 Link

在强类型语言中，咱们必须在函数声明中明确参数的类型，可是 JavaScript 没有这种特性。在JavaScript中，咱们传递给函数的参数个数不限，也能够是任何类型的数据。

假设如今有一个函数，这个函数只接受一个参数。可是当函数被调用时，它自己没有限制传入的参数只能是一个，咱们能够随意地传入一个、两个、甚至是更多。咱们也能够什么都不传，这样都不会报错。

形参（arguments）和实参（parameters）的个数不一样有两种状况：

实参少于形参

缺失的参数都会等同于 undefined。

实参多于形参

多余的参数都将被忽略，但它们会以数组的形式保存于变量 arguments 中（下文会讨论到）。

必填参数 Link

若是一个参数在函数调用时缺失了，它将被设为 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

参数对象 Link

为了取代参数对象，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]

长度属性 Link

尽管参数对象从技术上来说，不算是一个数组，但仍有一个长度属性，来检测传递给函数的参数个数：

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
    }
}

被调用属性与调用属性 Link

被调用 属性指向当前正在执行的函数，而 调用 属性则指向那个调用了 当前正在执行的函数 的函数。在ES5的严格模式下，这些属性是不被支持的，若是尝试使用它们，则会报错。

arguments.callee 这个属性在递归函数中颇有用，尤为在匿名函数中。由于匿名函数没有名称，只能经过 arguments.callee 来指向它。

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

严格模式和非严格模式下的参数对象 Link

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

在这个函数中，尽管 param3 有默认值 20，可是 arguments[2] 仍然是 undefined, 由于函数调用时只传了两个值。换言之，设定默认值对参数对象是没有任何影响的。

总结 Link

ES6 给 JS 带来了上百个大大小小的改进。愈来愈多的开发者正使用ES6的新特性, 因此咱们都须要去了解它们。在本教程中，咱们学习了ES6是如何改善JS的参数处理的，但咱们仍只是知晓了ES6的皮毛。更多新的、有趣的特性值得咱们去探讨。

参考连接 Link

ECMAScript 6 Compatibility Table 3, Juriy Zaytsev
ECMAScript 2015 Language Specification 4, ECMA International

(rb, ml, al, il)

Front page image credits: JavaScript Planet 5.

脚注 Link

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