JavaScript中如何使用可選函數參數

在這篇簡短的文章中，我們將討論如何在 JavaScript 中使用可選函數參數。

JavaScript 是網路的核心技術之一。大多數網站都使用它，並且所有現代網頁瀏覽器都支援它，而不需要插件。在本系列中，我們將討論不同的提示和技巧，它們將幫助您進行日常 JavaScript 開發。

在 JavaScript 編碼中，您經常需要將函數參數設為可選。當您使用 JavaScript 函數時，有兩種類型的參數：強制參數和可選參數。在強制參數的情況下，您必須傳遞這些參數，否則 JavaScript 會引發錯誤。但是，對於可選參數，如果您不傳遞它們，它們將被初始化為預設值。

今天，我們將討論 JavaScript 中可選函數參數的基礎知識以及如何使用它們。

如何在 ES5 及之前版本中使用可選函數參數

在本節中，我們將討論一個即使在舊版瀏覽器上也能運作的解決方案。這在 JavaScript ES5 時代之前一直被頻繁使用，當時沒有內建支援可以使函數參數成為可選。

讓我們透過以下範例來了解它的工作原理。

function getFullImagePath(imagePath, imageBaseUrl) {
  imageBaseUrl = imageBaseUrl || 'https://code.tutsplus.com/’;

  var fullImagePath = imageBaseUrl + imagePath;

  return fullImagePath;
}

在上面的範例中，getFullImagePath 函數採用兩個參數：imagePath 和 imageBaseUrl。我們希望將第二個 imageBaseUrl 參數設為可選，因此如果您想使用預設參數值，可以跳過傳遞它。為了使其可選，我們使用了以下語句。

imageBaseUrl = imageBaseUrl || 'https://code.tutsplus.com/';

基本上，我們檢查 imageBaseUrl 變數是否已定義。如果它被定義並且計算結果為 TRUE，我們假設第二個參數可用，並且我們將使用它。另一方面，如果imageBaseUrl 參數未定義或計算結果為FALSE，我們將使用https://code.tutsplus.com/ 值作為該參數的預設值。重要的是，可選參數應始終出現在參數清單的末端。

請注意，此方法不適用於數值，因為它將覆寫值 0。同樣，如果您希望能夠將 0 或 null 傳遞到函數中，則必須明確檢查參數是否未定義。

function getFullImagePath(imagePath, imageBaseUrl) {
  imageBaseUrl = (typeof imageBaseUrl === 'undefined') ? 'https://code.tutsplus.com/' : imageBaseUrl;
  var fullImagePath = imageBaseUrl + imagePath;

  return fullImagePath;
}

在本例中，我們明確檢查了 imageBaseUrl 參數的值是否為 undefined 來決定它是否是可選參數。這是確定參數是否可選的更簡單的方法。

這就是在不支援 ES6 版本的瀏覽器中使函數參數可選的方法。在下一節中，我們將在現代瀏覽器的背景下討論它。

如何在 JavaScript ES6 中使用可選函數參數

在本節中，我們將討論可以在支援 ES6 版本 JavaScript 的現代瀏覽器中使用的方法。讓我們透過以下範例來了解它是如何運作的。我們將用 ES6 版本重寫上一節中討論的範例。

function getFullImagePath(imagePath, imageBaseUrl = 'https://code.tutsplus.com/') {
  var fullImagePath = imageBaseUrl + imagePath;

  return fullImagePath;
}

如果您使用過其他程式語言，那麼您可能會熟悉上述定義可選函數參數的方法。在這種情況下，可選參數在函數宣告語句本身中被指派預設值。

此外，您還可以有多個可選參數，如下列程式碼片段所示，只要您在參數清單的末尾定義它們即可。

function foo(a, b=0, c=10) {
  //...
}

如您所見，JavaScript ES6 語法比舊方法更簡單、更容易編寫。

結論

今天，我們討論如何在 JavaScript 中使用可選函數參數，以及幾個實際範例。

以下是 JavaScript 中可選函數參數編碼的不同方法的比較：

以上是JavaScript中如何使用可選函數參數的詳細內容。更多資訊請關注PHP中文網其他相關文章！