如何在JavaScript中使用可选函数参数

在这篇快速文章中，我们将讨论如何在 javascript 中使用可选函数参数。

JavaScript 是 Web 的核心技术之一。大多数网站都使用它，所有现代网络浏览器都支持它，无需插件。在本系列中，我们将讨论有助于您进行日常 javaScript 开发的不同技巧和窍门。

在 JavaScript 编码中，您经常需要将函数参数设为可选。当您使用 JavaScript 函数时，有两种类型的参数：强制参数和可选参数。在强制参数的情况下，您必须传递这些参数，否则 JavaScript 会抛出错误。但是，对于可选参数，如果您不传递它们，它们将被初始化为默认值。

今天，我们将讨论 JavaScript 中可选函数参数的基础知识以及如何使用它们。

如何在 ES5 及之前使用可选函数参数

在本节中，我们将讨论一种适用于旧浏览器的解决方案。这在 JavaScript ES5 时代之前经常使用，当时没有内置支持可用于使函数参数可选。

让我们通过以下示例来了解它是如何工作的。

function getFullImagePath(imagePath, imageBaseUrl) {
  imageBaseUrl = imageBaseUrl || 'https://www.weixiaolive.com/en/’;
  var fullImagePath = imageBaseUrl + imagePath;
  return fullImagePath;
}

在上面的示例中，该getFullImagePath函数有两个参数，imagePath并且imageBaseUrl. 我们想让第二个imageBaseUrl参数是可选的，所以如果你想使用它的默认参数值，你可以跳过它。为了使其成为可选，我们使用了以下语句。

imageBaseUrl = imageBaseUrl || 'https://www.weixiaolive.com/en/';

基本上，我们正在检查imageBaseUrl变量是否已定义。如果它被定义并评估为TRUE，我们假设第二个参数可用，我们将使用它。另一方面，如果imageBaseUrl参数未定义或计算结果为FALSE，我们将使用该https://www.weixiaolive.com/en/值作为该参数的默认值。重要的是可选参数应始终位于参数列表的末尾。

请注意，这种方法不适用于数值，因为它会覆盖 value 0。同样，如果您希望能够传递0或null进入您的函数，则必须显式检查参数是否未定义。 

function getFullImagePath(imagePath, imageBaseUrl) {
  imageBaseUrl = (typeof imageBaseUrl === 'undefined') ? 'https://www.weixiaolive.com/en/' : imageBaseUrl;
  var fullImagePath = imageBaseUrl + imagePath;
  return fullImagePath;
}

在这种情况下，我们明确检查了imageBaseUrl参数的值是否undefined决定它是否是可选参数。这是确定参数是否可选的更简单的方法。

因此，您可以在不支持 ES6+ 版本的浏览器中将函数参数设为可选。在下一节中，我们将在现代浏览器的上下文中讨论它。

如何在 JavaScript ES6 中使用可选函数参数

在本节中，我们将讨论可以在支持 ES6 版本 JavaScript 的现代浏览器中使用的方法。让我们通过以下示例来了解它是如何工作的。我们将用对应的 ES6 重写我们在上一节中讨论的示例。

function getFullImagePath(imagePath, imageBaseUrl = 'https://www.weixiaolive.com/en/') {
  var fullImagePath = imageBaseUrl + imagePath;
  return fullImagePath;
}

如果您使用过其他编程语言，上述定义可选函数参数的方法可能对您来说很熟悉。在这种情况下，可选参数在函数声明语句本身中被赋予默认值。

此外，您可以有多个可选参数，如以下代码段所示，只要您在参数列表的末尾定义它们即可。

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

如您所见，JavaScript ES6 语法比旧方法更简单、更容易编写。

结论

今天，我们讨论了如何在 JavaScript 中使用可选函数参数，以及几个实际示例。

下面是对 JavaScript 中可选函数参数的不同编码方式的比较：