默认参数

Baseline 已广泛支持

此特性已非常成熟,可在多种设备和浏览器版本上使用。自 ⁨2016 年 9 月⁩以来,它已在各大浏览器中可用。

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

试一试

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

console.log(multiply(5, 2));
// Expected output: 10

console.log(multiply(5));
// Expected output: 5

语法

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

描述

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

在以下示例中,如果在调用multiply时没有为b提供值,则在计算a * bb的值将是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

使用默认参数后,函数体内的检查不再是必需的。现在,您可以在函数头中将1指定为b的默认值

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

默认参数允许任何表达式,但您不能使用会暂停默认表达式求值的awaityield。参数必须同步初始化。

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

注意:由于默认参数是在函数调用时而不是在函数定义时求值的,因此awaityield运算符的有效性取决于函数本身,而不是其周围的函数。例如,如果当前函数不是asyncawait将被解析为标识符并遵循正常的标识符语法规则,即使此函数嵌套在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® 2026 语言规范
# sec-function-definitions

浏览器兼容性

另见