輕鬆學習 JavaScript——第 3 部分：函式中的預設引數

本文由碼農網 – 小峰原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

JavaScript函式可以有預設引數值。通過預設函式引數，你可以初始化帶有預設值的正式引數。如果不初始化具有某些值的引數，則該引數的預設值為undefined。

請看下列程式碼：

function foo(num1){
    console.log(num1);
}
foo();

在呼叫函式foo時，你沒有傳遞任何引數，因此變數num1的預設值設定為undefined。但是，有時你可能需要設定預設值而非undefined。過去，最好的策略是測試引數值undefined，然後分配一個值。所以，在上面的例子中，如果你想要將num1的預設值設定為9，那麼你可以按照以下程式碼所示的方式做：

function foo(num1) {
    if (num1 === undefined) {
        num1 = 9;
    }
    console.log(num1);
}
foo();

ECMAScript 6引入了函式的預設引數。使用ECMA 2015的預設引數功能，你將不再需要檢查未定義的引數值。現在，你可以將9設定為引數本身的預設值。你可以重寫上述函式以使用預設值，如下所示：

function foo(num1 =9) {
    console.log(num1);
}
foo();

對於函式foo，如果num1引數的值未被傳遞，那麼JavaScript將設定9作為num1的預設值。

檢查未定義的引數

即使你在呼叫函式時明確地傳遞undefined作為引數值，引數值也將設定為預設值。

function foo(num1 =9) {
    console.log(num1);
}
foo(undefined);

在上面的程式碼中，你傳遞undefined為num1的值；因此，num1的值將被設定為預設值9。

執行時計算預設值

JavaScript函式預設值在執行時計算。為了更好地理解這一點，請看以下程式碼：

function foo(value = koo()) {
    return value;
}
function koo() {
     return "Ignite UI";
}
var a = foo();
console.log(a);

在函式foo中，引數值的預設值設定為函式koo。在執行時呼叫函式foo時，將計算函式koo。呼叫foo函式後，你會得到如下圖所示的輸出（在這個例子中，我們使用了Ignite UI框架）。

重用預設引數

預設引數可供之後的預設引數使用。請看下列程式碼：

function foo(num1 = 9, num2 = num1 + 8){
    console.log(num2);
}
foo();

在上面的程式碼中，使用num1的預設值來計算num2的預設值。呼叫函式foo時將得到以下輸出：

結論

JavaScript預設引數在編寫函式時非常有用。在呼叫函式時，如果缺少引數，則預設引數功能允許你為函式引數分配預設值，而不是將其定義為undefined。

系列目錄

輕鬆學習 JavaScript——第 1 部分：瞭解 let 語句

輕鬆學習 JavaScript——第 2 部分：函式中的 Rest 引數

輕鬆學習 JavaScript——第 3 部分：函式中的預設引數

輕鬆學習 JavaScript——第 4 部分：函式中的 arguments 物件

輕鬆學習 JavaScript——第 5 部分：簡化函式提升

輕鬆學習 JavaScript——第 6 部分：JavaScript 箭頭函式

輕鬆學習 JavaScript——第 7 部分：物件屬性描述符

輕鬆學習 JavaScript——第 8 部分：JavaScript 中的類