JavaScript 2.9 默认参数和剩余参数

关注

原创最新推荐文章于 2026-03-08 00:22:46 发布 455 阅读 AI 写同款· GEO 优化 ›

【JavaScript】剩余参数语法（Rest Parameters）详解剩余参数是 ES6 引入的一种语法形式，用于将函数的多余参数收集到一个数组中。语法上通过在函数参数前加上三个点...实现。// 输出 6// 输出 30在上述例子中，sum函数使用了剩余参数...numbers，无论传入多少个参数，它们都会被打包成一个数组numbers，从而可以统一处理。// ❌ 报错：Rest parameter must be last formal parameter// ✅ 正确。阅读详情

一、剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

a、语法
function(a, b, ...theArgs) {
  // ...
}

b、剩余参数和 arguments对象的区别

1、剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。
2、arguments对象不是一个真正的数组，而剩余参数是真正的 Array实例，也就是说你能够在它上面直接使用所有的数组方法，比如 sort，map，forEach或pop。
3、arguments对象还有一些附加的属性 （如callee属性）。

c、从 arguments 到数组

1、没有引入剩余参数时
function f(a, b) {
  var normalArray = Array.prototype.slice.call(arguments);
  // -- or --
  var normalArray = [].slice.call(arguments);
  // -- or --
  var normalArray = Array.from(arguments);
}
2、引入剩余参数后
function f(...args) {
  var normalArray = args;
}

d、解构剩余参数
function f(...[a, b, c]) {
  return a + b + c;
}

f(1)          // NaN (b and c are undefined)
f(1, 2, 3)    // 6
f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)

e、剩余参数本质就是一个数组，所以可以使用所有数组的方法，而arguments如果要使用数组的方法，需要先转换成数组

参考链接：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters

二、默认参数

函数默认参数允许在没有值或undefined被传入时使用默认形参。

a、语法
function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) { 
    statements 
}

JavaScript 中函数的参数默认是undefined。然而，在某些情况下可能需要设置一个不同的默认值。这是默认参数可以帮助的地方。

如：

果在调用multiply时，参数b的值没有提供，那么它的值就为undefined。如果直接执行a * b，函数会返回 NaN。

function multiply(a, b) {
  return a * b;
}

multiply(5, 2); // 10
multiply(5);    // NaN !

以前使用额外的代码去处理这种情况

function multiply(a, b) {
  b = (typeof b !== 'undefined') ?  b : 1;
  return a * b;
}

multiply(5, 2); // 10
multiply(5);    // 5

现在可以直接用默认参数去处理
function multiply(a, b = 1) {
  return a * b;
}

multiply(5, 2); // 10
multiply(5);    // 5


b、在函数被调用时，参数默认值会被解析
function append(value, array = []) {
  array.push(value);
  return array;
}

append(1); //[1]
append(2); //[2], not [1, 2]

这个规则对于函数和变量也是适用的。

function callSomething(thing = something()) {
 return thing;
}

let numberOfTimesCalled = 0;
function something() {
  numberOfTimesCalled += 1;
  return numberOfTimesCalled;
}

callSomething(); // 1
callSomething(); // 2

c、解构
function f([x, y] = [1, 2], {z: z} = {z: 3}) { 
  return x + y + z; 
}

f(); // 6

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters

收录于