預設引數
預設函式引數允許在沒有提供值或傳遞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 |
瀏覽器相容性
載入中…
另見
- 函式指南
- 函式
- 剩餘引數
- 空值合併運算子（
??）