深入了解JavaScript中的默認參數

JavaScript中的默認參數可以幫助我們更優雅地編寫代碼。ES6中引入了默認參數語法，允許在函數參數中指定默認值。

一、基本用法

基本的默認參數語法如下：

function foo(a = 'Hello', b = 'World') {
  console.log(a + ' ' + b);
}

foo(); // 輸出：Hello World
foo('Hi'); // 輸出：Hi World
foo(undefined, 'Universe'); // 輸出：Hello Universe

以上代碼中，函數foo的第一個參數a有一個默認值'Hello'，第二個參數b有一個默認值'World'。如果調用foo函數時只傳遞了a，而沒有傳遞b，則b參數的默認值'World'會被使用。

二、默認參數表達式

默認參數表達式允許我們使用實際參數計算默認值：

let x = 99; // 聲明一個變量x

function bar(a = x + 1) { // 在函數參數中使用x+1進行默認值計算
  console.log(a);
}

bar(); // 輸出：100

x = 100; // 修改x的值

bar(); // 輸出：101

在以上代碼中，bar函數的默認參數表達式為x + 1，因此如果沒有傳遞實際參數，a參數的默認值就是x + 1的計算結果。可以看到，在第二次調用bar函數時，a的值變成了101，因為當x的值被改變為100時，參數的默認值也跟着改變了。

三、默認參數和undefined

當一個參數的默認值設置為undefined時，可以調用函數時不傳遞對應的實際參數，那麼這個參數的值就變成了undefined：

function baz(a = 'Hello', b = undefined) {
  console.log(a, b); 
}

baz(); // 輸出：Hello undefined

在以上代碼中，baz函數中參數b的默認值設定為undefined。因此即使在函數調用時不傳遞參數b，這個參數的結果是undefined。

四、剩餘參數和默認參數一起使用

在ECMAScript 6之前，使用不定數量的參數需要使用arguments對象，如下所示：

function qux() {
  console.log(arguments[0]); 
}

qux('Hello'); // 輸出：Hello
qux(); // 輸出：undefined

在以上的代碼片段中，qux函數可以處理任意數量的參數，但是需要使用arguments，這使得代碼難以理解。

ES6中可以使用剩餘參數和默認參數來提供更簡潔的語法：

function quux(a = 'Hello', ...others) {
  console.log(a, others); 
}

quux(); // 輸出：Hello []
quux('Hello', 'World', 'Universe'); // 輸出：Hello ["World", "Universe"]

在以上代碼中，quux函數的第一個參數a有一個默認值'Hello'，其他的參數則通過剩餘參數語法...others來捕獲。

五、默認參數的兼容性

默認參數在ES6中被引入，因此不是所有的瀏覽器都支持它們。如果你的代碼需要在ES6之前的環境中運行，那麼你需要很小心地處理默認參數：

function beep(a, b) {
  a = typeof a !== 'undefined' ? a : 'Hello';
  b = typeof b !== 'undefined' ? b : 'World';
  console.log(a, b);
}

beep(); // 輸出：Hello World
beep('Hi', 'Universe'); // 輸出：Hi Universe

這種方法需要手動檢查每個參數是否被傳遞，並使用三元運算符來為它們設置默認值。雖然這個方法非常繁瑣，但這是古老的JavaScript版本中最常用的方式。

六、結論

JavaScript中的默認參數是一個非常有用的特性。默認參數可以讓函數的參數列表更加簡潔和靈活，並且可以讓代碼更加易於維護。可以在聲明函數參數時輕鬆地設置默認值，還可以使用默認參數表達式來動態計算默認值。