如何在 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”语句，在这个语句中，我们通过传递两个参数的值（即第一种情况）来调用“setDefaultValue”函数。

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

示例

我们已经看到了在 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，因此“setDefaultValue”函数将第二个参数的值视为 10，并返回两个参数值之和，即 10+10 = 20，您可以在第二个图像中看到。

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

结论

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

更新于：2022年11月7日

浏览量：425

启动您的职业生涯

完成课程获得认证

开始学习
广告