如何在 JavaScript 函数中设置默认参数值？

在本教程中，我们将学习如何为 JavaScript 函数设置默认参数值。JavaScript 是一种面向对象的编程语言，它为我们提供了执行函数式和面向类编程的功能，使我们能够轻松管理代码并重复使用代码。

在函数式编程中，程序员创建了一个函数，该函数可能接受一些参数，并在执行了若干步骤后可能返回某个值。函数的参数值可以是字符串、数字、对象等，我们还可以设置参数的默认值。

这使得处理函数参数变得更加容易。您可以轻松地设置默认参数，以便使用默认值初始化形式参数。只有在没有传递值或传递 undefined 时，这才是可能的。

语法

现在让我们来看一下在 JavaScript 函数中设置默认参数值的语法：

//default is set to 1
function setDefaultValue(val1, defaultValue = 1) {
   return val1 + defaultValue;
}

在上面的语法中，我们注释了“默认设置为 1”，它定义了第二个参数“defaultValue”的默认值，并使用“function”关键字声明了一个名为“setDefaultValue”的函数。在这个函数中，我们传递了两个参数“val1”和“defaultValue”，正如我们所讨论的，我们设置了第二个参数的默认值，即 1。在函数的最后，我们返回了两个参数值的总和。

算法

我们已经看到了上面学习如何在 JavaScript 函数中设置默认参数值的语法，现在我们将逐步了解完整的步骤：

  • 首先，我们创建一个表单，在其中创建一个与函数“display”连接的按钮。

  • 现在，我们必须在 script 标签中创建一个函数“setDefaultValue”。在这个函数中，我们必须传递两个参数。

  • 现在，我们必须设置函数“setDefaultValue”的第二个参数的默认值。

  • 在函数“setDefaultValue”中，我们必须编写一个 return 语句，在其中我们传递了两个参数的总和。

  • 接下来，在 script 标签中，我们必须创建另一个与按钮连接的函数“display”。

  • 在函数“display”中，我们必须编写“document.write”语句，并在其中调用函数“setDefualtValue”，并传递两个参数的值，即第一种情况。

  • 类似地，对于第二种情况，我们只传递了函数“setDefaiultValue”的第一个参数的值。

示例

我们已经看到了学习如何在 JavaScript 函数中设置默认参数值的语法和算法，现在让我们举一个例子来实现上面讨论的步骤。

<html>
<body>
   <form>
      <button type="button" onclick="display()">Click to see the Result</button>
   </form>
   <script>
      // default is set to 1
      function setDefaultValue(val1, defaultValue = 1) {
         return val1 + defaultValue;
      }
      function display(){
         //Here we passed value of both the variable val1 and defaultValue
         document.write(setDefaultValue(10,10));
         document.write("<br>");
         
         //Here we only passed the value of the variable val1
         document.write(setDefaultValue(10));
      }
   </script>
</body>
</html>

在上面的代码中，我们首先声明了一个表单，在其中创建了一个与名为“display”的函数连接的按钮，因此当我们点击此按钮时，将调用 display 函数。接下来，在 script 标签中，我们创建了一个函数“setDefaultValue”，在其中我们传递了两个参数，并通过简单地使用“=”和赋值 1 来设置第二个参数的默认值。之后，我们创建了另一个函数“display”，在其中我们使用了“document.write”，并在其中传递了第一个函数以及参数的值。我们有两种情况。

第一种情况是，我们传递了两个参数的值，即 10、10，因此函数“setDefaulValue”将第二个参数的值视为 10，并返回两个参数值的总和，即 10+10 = 20，您可以在第二个图像中看到。

第二种情况是，我们只传递了第一个参数的值，即 10。现在，函数“setDefalutVaule”将第一个参数的值视为 10，并且我们没有传递第二个参数的值，因此此时它将第二个参数的默认值视为 1。并返回参数值的总和，即 10+1 = 11，您可以在第二个图像中看到。

结论

在本教程中，我们学习了如何在 JavaScript 函数中设置默认参数值。函数的参数值可以是字符串、数字、对象等，我们还可以设置参数的默认值。这使得处理函数参数变得更加容易。您可以轻松地设置默认参数，以便使用默认值初始化形式参数。只有在没有传递值或传递 undefined 时，这才是可能的。

更新于：2022-11-07

425 次浏览

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告