JavaScript 如何在函数中使用命名参数

在本文中，我们将学习如何在javascript中使用命名参数，并且如何使用它来显著提高代码的可读性和可维护性。

Javascript允许我们使用命名参数，这消除了函数执行时参数顺序的影响。然后，我们可以通过名称在函数定义内部访问参数。

让我们看一些示例和方法来更好地理解这个概念-

示例1- 将对象作为参数传递

我们可以将一个对象作为参数传递给函数，以实现命名参数的功能。这使用对象的属性来表示命名的值。

在这个示例中，我们将-

创建一个接受对象参数（其中包含属性name，age和city）的greet函数。
通过使用这个函数，我们可以通过它们各自的名称来传递值，提高代码的可读性。
然后，我们将提供的值记录到控制台上的问候消息中。

文件名- index.html

<html>
<head>
   <title>How to use named arguments in JavaScript functions?</title>
   <script>
      function greet({ name, age, city }) {
         console.log(`Hello  ${name}! You are$ {age} years old and from ${city}.`);
      }

      greet({ name: 'John', age: 30, city: 'New York' });
   </script>
</head>
<body>
   <h1>How to use named arguments in JavaScript functions?</h1>
</body>
</html>

输出

结果将如下图所示。

JavaScript 如何在函数中使用命名参数

示例2 – 解构属性

通过使用解构，我们可以从对象中提取特定的值并将它们分配给单独的变量，从而在JavaScript中实现类似命名参数的行为。

在这个示例中，我们将会：

在greet函数中使用解构赋值来提取person对象中的name、age和city值。
通过解构对象，我们可以直接在函数内使用命名变量。

文件名 – index.html

<!DOCTYPE html>
<html>
<head>
   <title>How to use named arguments in JavaScript functions?</title>
   <script>
      function greet({ name, age, city }) {
         console.log(`Hello  ${name}! You are$ {age} years old and from ${city}.`);
      }

      const person = { name: 'John', age: 30, city: 'New York' };
      greet(person);
   </script>
</head>
<body>
   <h1>How to use named arguments in JavaScript functions?</h1>
</body>
</html>

输出

结果将如下图所示。

JavaScript 如何在函数中使用命名参数

示例3 – 使用配置对象

通过在函数中使用配置对象，我们还可以在JavaScript中实现类似命名参数的行为。

在本示例中，我们将 –

创建一个createProduct函数，它接受一个配置对象作为参数。
它接受name和price等属性，并包含一个可选的color属性，默认值为’black’。
通过使用配置对象，我们可以只传递必要的属性，并为可选属性提供默认值。

文件名 – index.html

<html>
<head>
   <title>How to use named arguments in JavaScript functions?</title>
   <script>
      function createProduct({ name, price, color = 'black' }) {
         console.log(`Product:  ${name}, Price:$ {price}, Color: ${color}`);
      }

      createProduct({ name: 'Phone', price: 500 });
      createProduct({ name: 'Shirt', price: 20, color: 'blue' });
   </script>
</head>
<body>
   <h1>How to use named arguments in JavaScript functions?</h1>
</body>
</html>