函数默认参数允许在没有值或undefined
被传入时使用默认形参。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) {
statements
}
JavaScript 中函数的参数默认是
。然而,在某些情况下可能需要设置一个不同的默认值。这是默认参数可以帮助的地方。undefined
以前,一般设置默认参数的方法是在函数体测试参数是否为undefined
,如果是的话就设置为默认的值。
下面的例子中,如果在调用multiply
时,参数b
的值没有提供,那么它的值就为undefined
。如果直接执行a * b
,函数会返回 NaN
。
function multiply(a, b) {
return a * b;
}
multiply(5, 2); // 10
multiply(5); // NaN !
为了防止这种情况,第二行代码解决了这个问题,其中如果只使用一个参数调用multiply
,则b
设置为1
:
function multiply(a, b) {
b = (typeof b !== 'undefined') ? b : 1;
return a * b;
}
multiply(5, 2); // 10
multiply(5); // 5
有了默认参数,我们不需要再在函数体内做不必要的检查。现在你可以在函数头将b
的默认值置为1
:
function multiply(a, b = 1) {
return a * b;
}
multiply(5, 2); // 10
multiply(5); // 5
undefined
vs 其他假值在第二次调用中,即使第一个参数在调用时显式设置为undefined
(虽然不是null
或其他falsy值),但是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:
a;
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;
default:
}
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, "=^_^="]
在 Gecko 33 (Firefox 33 / Thunderbird 33 / SeaMonkey 2.30) 中引入。在函数体内的函数声明不能引用内部的默认参数,并且会在 SpiderMonkey 抛出一个ReferenceError
(现在是 TypeError
),参见 bug 1022967。默认参数总是会被首先执行,而在函数体内部的函数声明会在之后生效。
// Doesn't work! Throws ReferenceError.
function f(a = go()) {
function go() { return ':P'; }
}
在Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2)之前,以下代码会造成SyntaxError
错误。这已经在bug 1022967中修复,并在以后的版本中按预期方式工作。参数仍然设置为从左到右,覆盖默认参数,即使后面的参数没有默认值。
function f(x = 1, y) {
return [x, y];
}
f(); // [1, undefined]
f(2); // [2, undefined]
你可以通过解构赋值为参数赋值:
function f([x, y] = [1, 2], {z: z} = {z: 3}) {
return x + y + z;
}
f(); // 6
Specification | Status | Comment |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) Function Definitions |
Standard | Initial definition. |
ECMAScript Latest Draft (ECMA-262) Function Definitions |
Draft |
Desktop | Mobile | Server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Default parameters | Chrome Full support 49 | Edge Full support 14 | Firefox Full support 15 | IE No support No | Opera Full support 36 | Safari Full support 10 | WebView Android Full support 49 | Chrome Android Full support 49 | Edge Mobile Full support 14 | Firefox Android Full support 15 | Opera Android Full support 36 | Safari iOS Full support 10 | Samsung Internet Android Full support 5.0 | nodejs Full support 6.0.0 |
Parameters without defaults after default parameters | Chrome Full support 49 | Edge Full support 14 | Firefox Full support 26 | IE No support No | Opera Full support 36 | Safari Full support 10 | WebView Android Full support 49 | Chrome Android Full support 49 | Edge Mobile Full support 14 | Firefox Android Full support 26 | Opera Android Full support 36 | Safari iOS Full support 10 | Samsung Internet Android Full support 5.0 | nodejs Full support Yes |
Destructured parameter with default value assignment | Chrome Full support 49 | Edge ? | Firefox Full support 41 | IE No support No | Opera ? | Safari ? | WebView Android Full support 49 | Chrome Android Full support 49 | Edge Mobile ? | Firefox Android Full support 41 | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support 5.0 | nodejs Full support Yes |