如何在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 。同样，如果你希望能够传递值null 。如果你想能够在你的函数中传递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中可选函数参数的不同编码方式的比较。
方法 注释
`arg = arg defaultValue` 在ES6之前是一个常见的习惯，但是0 和null ，会用默认值重写。
arg = (typeof arg === 'undefined') ? defaultValue : arg 在ES6之前，是实现可选参数的最傻瓜式的方法。
function something(arg=defaultValue) { } 对于ES6和新版本的JavaScript来说是最好的方法。

方法	注释
`arg = arg	defaultValue`	在ES6之前是一个常见的习惯，但是`0` 和`null` ，会用默认值重写。
`arg = (typeof arg === 'undefined') ? defaultValue : arg`	在ES6之前，是实现可选参数的最傻瓜式的方法。
`function something(arg=defaultValue) { }`	对于ES6和新版本的JavaScript来说是最好的方法。