Javascript 简明教程

JavaScript - Smart Function Parameters

JavaScript 中 smart function parameters 的概念是使函数能够适应不同用例的一种方式。它允许函数在调用时处理传递给它的不同类型的参数。

在 JavaScript 中，函数是可以复用代码的一个重要概念。在许多情况下，我们需要确保该函数能够灵活地处理不同的用例。

以下是用智能参数定义函数的不同方法。

Default Function Parameters

在 JavaScript 中，使用默认函数参数是处理未定义的参数值或在调用函数过程中没有传递给函数的参数值的一种方式。

在下面的代码段中，我们将参数 a 和 b 的默认值设置为 100 和 50。

function division (a = 100, b = 50) {
   // Function body
}

Example

在下面的代码中，division() 函数会返回参数 a 和 b 的除法。参数 a 的默认值为 100，参数 b 的默认值为 50，只要你想传递任何参数或传递未定义的参数，使用它们的默认值初始化的参数可用于从输出中打印的值进行观察。

<html>
<head>
   <title> JavaScript - Default parameters </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      function division(a = 100, b = 50) {
         return a / b;
      }
      document.getElementById("output").innerHTML =
	  division(10, 2) + "<br>" +
      division(10, undefined) + "<br>" +
      division();
    </script>
</body>
</html>

5
0.2
2

JavaScript Rest Parameter

当传递给函数的参数数量不确定时，你可以使用剩余参数。JavaScript 剩余参数允许我们收集单个数组中的所有剩余（rest）参数。剩余参数用三个点（…）表示，后跟一个参数。此参数在此作为函数内的数组使用。

Syntax

按照以下语法在函数声明中使用剩余参数。

function funcName(p1, p2, ...args) {
    // Function Body;
}

Example

在下面的示例中，sum() 函数会返回作为参数传递的所有值之和。我们可以向 sum() 函数传递未知数量的参数。函数定义会收集“nums”数组中的所有参数。在函数体中，我们可以遍历“nums”数组并计算所有参数值的总和。

sum() 函数也将处理 0 个参数。

<html>
<head>
   <title> JavaScript - Rest parameters </title>
</head>
<body>
   <p id = "demo"> </p>
   <script>
      function sum(...nums) {
         let totalSum = 0;
         for (let p = 0; p < nums.length; p++) {
            totalSum += nums[p];
         }
         return totalSum;
      }
      document.getElementById("demo").innerHTML =
	  sum(1, 5, 8, 20, 23, 45) + "<br>" +
      sum(10, 20, 30) + "<br>" +
      sum() + "<br>";
   </script>
</body>
</html>

102
60
0

注意 - 你应始终将剩余参数用作最后一个参数。

JavaScript Destructuring or Named parameters

你可以将单个对象作为函数参数传递，并在函数定义中解构对象以仅从该对象获取所需的值。这也称为具名参数，因为我们根据对象的具名属性获取参数。

Syntax

按照以下语法对函数使用解构参数。

function funcName({ prop1, prop2, ... }) { }

在以上语法中，prop1 和 prop2 是作为函数 funcName 参数传递的对象的属性。

Example

在下面的示例中，我们定义包含三个属性的“watch”对象，并将其传递给 printWatch() 函数。

printWatch() 函数解构作为参数传递的对象，并将“brand”和“price”属性作为参数。通过这种方式，你可以忽略函数参数中不必要的参数。

<html>
<head>
   <title> JavaScript - Parameter Destructuring </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      function printWatch({ brand, price }) {
         return "The price of the " + brand + "\'s watch is " + price;
      }

      const watch = {
	     brand: "Titan",
         price: 10000,
         currency: "INR",
      }
      document.getElementById("output").innerHTML = printWatch(watch);
   </script>
</body>
</html>

The price of the Titan's watch is 10000

以上三个概念为我们提供了传递函数参数的灵活性。