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中如何使用可选函数参数的详细内容，更多请关注双恒网络其它相关文章！