默认参数

**默认函数参数** 允许命名参数在没有值或 `undefined` 传递时使用默认值初始化。

试一试

语法

js
function fnName(param1 = defaultValue1, /* …, */ paramN = defaultValueN) {
  // …
}

描述

在 JavaScript 中，函数参数默认为 undefined。但是，通常设置不同的默认值很有用。这就是默认参数可以提供帮助的地方。

在以下示例中，如果调用 `multiply` 时没有为 `b` 提供值，则在计算 `a * b` 时 `b` 的值为 `undefined`，`multiply` 将返回 `NaN`。

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

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

过去，设置默认值的通用策略是在函数体中测试参数值，并在它们为 `undefined` 时分配值。在以下示例中，如果只用一个参数调用 `multiply`，则 `b` 设置为 `1`

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

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

使用默认参数，函数体中的检查不再必要。现在，您可以在函数头中为 `b` 分配 `1` 作为默认值

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

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

参数仍然是按从左到右的顺序设置的，即使后面有没有默认值的参数，也会覆盖默认参数。

js
function f(x = 1, y) {
  return [x, y];
}

f(); // [1, undefined]
f(2); // [2, undefined]

**注意：** 第一个默认参数和所有后面的参数不会对函数的 length 有贡献。

默认参数初始化程序存在于它们自己的作用域中，该作用域是为函数体创建的作用域的父作用域。

这意味着可以参考较早的参数以初始化较晚的参数。但是，在函数体中声明的函数和变量不能从默认值参数初始化程序中引用；尝试这样做会抛出一个运行时 ReferenceError。这还包括函数体中的 var 声明的变量。

例如，以下函数在调用时会抛出 `ReferenceError`，因为默认参数值无法访问函数体的子作用域

js
function f(a = go()) {
  function go() {
    return ":P";
  }
}

f(); // ReferenceError: go is not defined

此函数将打印参数 `a` 的值，因为变量 `var a` 仅被提升到为函数体创建的作用域的顶部，而不是为参数列表创建的父作用域，因此它的值对 `b` 不可見。

js
function f(a, b = () => console.log(a)) {
  var a = 1;
  b();
}

f(); // undefined
f(5); // 5

默认参数允许任何表达式，但您不能使用 await 或 yield 来暂停默认表达式的计算。参数必须同步初始化。

js
async function f(a = await Promise.resolve(1)) {
  return a;
}

**注意：** 因为默认参数是在调用函数时计算的，而不是在定义函数时计算的，所以 `await` 和 `yield` 运算符的有效性取决于函数本身，而不是其周围的函数。例如，如果当前函数不是 `async`，则 `await` 将被解析为标识符，并遵循正常的 标识符语法规则，即使此函数嵌套在一个 `async` 函数中。

示例

传递 undefined 与其他假值

在此示例中的第二次调用中，即使第一个参数被明确设置为 `undefined`（但不是 `null` 或其他 假值），`num` 参数的值仍然是默认值。

js
function test(num = 1) {
  console.log(typeof num);
}

test(); // 'number' (num is set to 1)
test(undefined); // 'number' (num is set to 1 too)

// test with other falsy values:
test(""); // 'string' (num is set to '')
test(null); // 'object' (num is set to null)

在调用时计算

默认参数是在调用时计算的。与 Python（例如）不同，每次调用函数时都会创建一个新对象。

js
function append(value, array = []) {
  array.push(value);
  return array;
}

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

这甚至适用于函数和变量

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

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

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

较早的参数可用于后面的默认参数

较早定义的参数（位于左侧）可用于后面的默认参数

js
function greet(name, greeting, message = `${greeting} ${name}`) {
  return [name, greeting, message];
}

greet("David", "Hi"); // ["David", "Hi", "Hi David"]
greet("David", "Hi", "Happy Birthday!"); // ["David", "Hi", "Happy Birthday!"]

此功能可以通过这种方式来近似，它演示了许多边缘情况是如何处理的

js
function go() {
  return ":P";
}

function withDefaults(
  a,
  b = 5,
  c = b,
  d = go(),
  e = this,
  f = arguments,
  g = this.value,
) {
  return [a, b, c, d, e, f, g];
}

function withoutDefaults(a, b, c, d, e, f, g) {
  switch (arguments.length) {
    case 0:
    case 1:
      b = 5;
    case 2:
      c = b;
    case 3:
      d = go();
    case 4:
      e = this;
    case 5:
      f = arguments;
    case 6:
      g = this.value;
  }
  return [a, b, c, d, e, f, g];
}

withDefaults.call({ value: "=^_^=" });
// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]

withoutDefaults.call({ value: "=^_^=" });
// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]

带有默认值赋值的解构参数

您可以将默认值赋值与 解构赋值 语法一起使用。

一种常见的方法是将一个空对象/数组设置为解构参数的默认值；例如：[x = 1, y = 2] = []。这使得可以向函数传递任何内容，并仍然预先填充这些值

js
function preFilledArray([x = 1, y = 2] = []) {
  return x + y;
}

preFilledArray(); // 3
preFilledArray([]); // 3
preFilledArray([2]); // 4
preFilledArray([2, 3]); // 5

// Works the same for objects:
function preFilledObject({ z = 3 } = {}) {
  return z;
}

preFilledObject(); // 3
preFilledObject({}); // 3
preFilledObject({ z: 2 }); // 2

规范

规范
ECMAScript 语言规范
# sec-function-definitions

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅