默认参数
默认函数参数允许在没有提供值或传递undefined时,使用默认值初始化命名参数。
试一试
function multiply(a, b = 1) {
return a * b;
}
console.log(multiply(5, 2));
// Expected output: 10
console.log(multiply(5));
// Expected output: 5
语法
function fnName(param1 = defaultValue1, /* …, */ paramN = defaultValueN) {
// …
}
描述
在 JavaScript 中,函数参数默认为undefined。但是,设置不同的默认值通常很有用。这就是默认参数可以提供帮助的地方。
在以下示例中,如果在调用multiply时没有为b提供值,则在计算a * b时b的值将是undefined,并且multiply将返回NaN。
function multiply(a, b) {
return a * b;
}
multiply(5, 2); // 10
multiply(5); // NaN !
过去,设置默认值的通用策略是在函数体内测试参数值,并在它们是undefined时分配一个值。在以下示例中,如果multiply只用一个参数调用,则b被设置为1
function multiply(a, b) {
b = typeof b !== "undefined" ? b : 1;
return a * b;
}
multiply(5, 2); // 10
multiply(5); // 5
使用默认参数后,函数体内的检查不再是必需的。现在,您可以在函数头中将1指定为b的默认值
function multiply(a, b = 1) {
return a * b;
}
multiply(5, 2); // 10
multiply(5); // 5
multiply(5, undefined); // 5
参数仍然从左到右设置,即使后面有未设置默认值的参数,也会覆盖默认参数。
function f(x = 1, y) {
return [x, y];
}
f(); // [1, undefined]
f(2); // [2, undefined]
注意:第一个默认参数及其之后的所有参数都不会计入函数的length。
默认参数的初始化器位于它们自己的作用域中,该作用域是为函数体创建的作用域的父作用域。
这意味着可以在后续参数的初始化器中引用先前的参数。但是,函数体内声明的函数和变量不能从默认值参数初始化器中引用;尝试这样做会抛出运行时ReferenceError。这还包括函数体内用var声明的变量。
例如,当调用以下函数时,它将抛出ReferenceError,因为默认参数值无法访问函数体的子作用域
function f(a = go()) {
function go() {
return ":P";
}
}
f(); // ReferenceError: go is not defined
此函数将打印参数a的值,因为变量var a只提升到为函数体创建的作用域的顶部,而不是为参数列表创建的父作用域,因此它的值对b不可见。
function f(a, b = () => console.log(a)) {
var a = 1;
b();
}
f(); // undefined
f(5); // 5
默认参数允许任何表达式,但您不能使用会暂停默认表达式求值的await或yield。参数必须同步初始化。
async function f(a = await Promise.resolve(1)) {
return a;
}
注意:由于默认参数是在函数调用时而不是在函数定义时求值的,因此await和yield运算符的有效性取决于函数本身,而不是其周围的函数。例如,如果当前函数不是async,await将被解析为标识符并遵循正常的标识符语法规则,即使此函数嵌套在async函数中。
示例
传递 undefined 与其他假值
在此示例的第二次调用中,即使第一个参数显式设置为undefined(尽管不是null或其他假值),num参数的值仍然是默认值。
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(例如)不同,每次调用函数时都会创建一个新对象。
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
较早的参数可用于较晚的默认参数
较早(左侧)定义的参数可用于较晚的默认参数
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!"]
此功能可以近似地表示为,它演示了如何处理许多边界情况
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] = []。这使得在不向函数传递任何内容的情况下,仍然可以预填充这些值
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 |
浏览器兼容性
加载中…
另见
- 函数指南
- 函数
- 剩余参数
- 空值合并运算符(
??)