JavaScript剩余参数和默认参数

剩余参数

注意：剩余参数已被加入ES6标准。

下一个例子中，我们会构建一个函数，它会将第一个参数与剩余参数中最大的数相乘。这个例子可能并不是特别适用于我们的应用，然而，这个例子可能为函数中参数处理提供了一种技术。

console.log('----------------------使用剩余参数--------------------------');

//剩余参数以...做前缀
function multiMax(first, ...remainingNumbers) {
  var sorted = remainingNumbers.sort(function (a, b) {
    return b - a;//以降序排序剩余参数
  });

  return first * sorted[0];
}

//函数调用方式和其他函数类似
if(multiMax(3,1,2,3) === 9){
  console.log('3*3=9 (First arg,by largest.)');
}

 

 

为函数最后一个命名参数前加上省略号（...）前缀，这个参数就变成了一个叫做剩余参数的数组，数组内包含着传入的剩余参数。

function multiMax(first, ...remainingNumbers) {
  var sorted = remainingNumbers.sort(function (a, b) {
    return b - a;//以降序排序剩余参数
  });

  return first * sorted[0];
}

 

例如，本例中用4个参数调用multiMax函数，即multiMax(3,1,2,3)。在multiMax函数体内，第一个参数的值3被赋值给了第一个函数multiMax形参first。由于函数的第二个参数是剩余参数，故所有的剩余参数（1,2,3）都被放在一个新的数组remainingNumbers中。通过降序排列这个数组，并取得排序后数组的第一个值即最大值。

注意：只有函数的最后一个参数才能是剩余参数。视图把省略号放在不是最后一个形参的任意形参之前都会报错，错误以SyntaxError:parameter after rest parameter的形式展现。

默认参数

注意：默认参数已经加入ES6标准。

许多网页的UI组件（尤其是jQuery插件）都能被配置。例如，如果正在开发一个轮播组件，我们可能会给用户提供一个选项，用于指定某个项目多久会被另一个项目替代，以及一段在变化发生时间段内的动画。与此同时，可能某些用户并不关心这些问题，无论我们提供什么选项他们都乐于使用。对于这类场景，默认参数是完美选择。

在那类几乎每次函数调用都会用同样参数的场景来说，这个轮播组件小示例仅仅是一个特殊的案例。

//在那类几乎每次函数调用都会用同样参数的场景来说，这个轮播组件小示例仅仅是一个特殊的案例。
function performAction(ninja, action) {
  return ninja + " " + action;
}

performAction('Fuma', 'skulking');
performAction('Yoshi', 'skulking');
performAction('Hattori', 'skulking');
performAction('Yagyu', 'sneaking');

每次重复相同的参数skulking是不是看起来相当无聊。

注意：javascript不支持函数重载，所以当在过去面临这个问题的时候，开发者通常采用下面的方法：

console.log('----------------ES6之前处理默认参数的方式----------------');
//如果参数action的值是undefined，我们就是用默认参数skulking，反之，保留参数原来的值。
function performAction(ninja,action) {
  action = typeof action === 'undefined' ? 'skuilking' : action;
  return ninja + " " + action;
}
//我们没有为第二个参数action传值，action参数的值就被默认设置为skulking。
if (performAction('Fuma') === 'Fuma skulking') {
  console.log('The default value is used for Fuma.');
}
if (performAction('Yoshi') === 'Yoshi skulking') {
  console.log('The default value is used for Yoshi.');
}
if (performAction('Hattori') === 'Hattori skulking') {
  console.log('The default value is used for Hattori.');
}
//为形参action传递一个字符串值，函数主体中会使用这个值。
if (performAction('Yagyu', 'sneaking') === 'Yagyu sneaking') {
  console.log('Yagyu can do whatever he pleases, even sneak!');
}

 

 

本例中，定义了一个函数performAction,该函数会检查参数action的值是否为undefined（通过使用typeof运算符），如果是，action的值就会被设置为skulking。如果函数调用时候提供了action的值（此时其值不会等于undefined），则保留该值。

 

注意：typeof操作符返回一个字符串用于表明操作数的类型。如果该操作数未定义（例如，没为一个函数形参提供相应的实参），那么typeof操作返回的值即字符串undefined。

由于这种常见的模式写起来很冗长、令人乏味。所以ES6标准中支持了默认参数。

console.log('----------------ES6中处理默认参数的方式--------------------');
//ES6中可以为函数的形参赋值
function performAction(ninja, action = 'skulking') {
  return ninja + ' ' + action;
}
if (performAction('Fuma') === 'Fuma skulking') {
  console.log('The default value is used for Fuma.');
}
if (performAction('Yoshi') === 'Yoshi skulking') {
  console.log('The default value is used for Yoshi.');
}
if (performAction('Hattori') === 'Hattori skulking') {
  console.log('The default value is used for Hattori.');
}
if (performAction('Yagyu', 'sneaking') === 'Yagyu sneaking') {
  console.log('Yagyu can do whatever he pleases, even sneak!');
}

 

 

从这个例子中可以看到JavaScript默认参数的语法。创建默认参数的方式是为函数的形参赋值。

//ES6中可以为函数的形参赋值
function performAction(ninja, action = 'skulking') {
  return ninja + ' ' + action;
}

随后，当函数调用后相应的参数都被赋予了默认值：Fuma、Yoshi和Hattori。

if (performAction('Fuma') === 'Fuma skulking') {
  console.log('The default value is used for Fuma.');
}
if (performAction('Yoshi') === 'Yoshi skulking') {
  console.log('The default value is used for Yoshi.');
}
if (performAction('Hattori') === 'Hattori skulking') {
  console.log('The default value is used for Hattori.');
}

反之，如果指定了实参的值，参数则会被覆盖。

if (performAction('Yagyu', 'sneaking') === 'Yagyu sneaking') {
  console.log('Yagyu can do whatever he pleases, even sneak!');
}

 

可以为默认参数赋任何值，它既可以是数字或者字符串这样的原始类型，也可以是对象、数组，甚至函数这样的复杂类型。每次函数调用都会从左到右求得参数的值，并且当对后面的默认参数赋值时可以引用前面的默认参数。

console.log('----------------------------引用前一个默认参数------------------');
//我们可以把任意表达式作为默认参数值，在这个过程中甚至可以引用前面的参数
function performAction(ninja, action = 'skulking', message = ninja + ' ' + action) {
  return message;
}
if (performAction('Yoshi') === 'Yoshi skulking') {
  console.log('Yoshi is skulking');
}

 

尽管JavaScript提供了这样的功能，我们依然强烈建议您使用的时候要小心。但是可以适当使用默认参数——避免空值。

 

参考《JavaScript忍者秘籍》