JavaScript 的"return"语句如何工作?

front end technologyjavascriptweb development

在本文中,我们将学习如何使用 JavaScript 中的 return 语句。使用 return 语句,函数中的特定值将返回给函数调用者。每当运行 return 语句时,函数都会停止。return 语句后面的代码将不可用,因为它是函数中的最后一条语句。

使用 return 语句,我们可以返回对象类型,包括函数对象、数组,以及原始值,如布尔值、整数和字符串

通过使用 return 语句,我们还可以返回许多项目。立即采取行动是不可行的。要从函数返回多个值,我们必须使用数组或对象。

让我们讨论在 JavaScript 中使用 return 语句的不同方法。

  • 带有值的 return 语句。
  • 没有值的 return 语句。
  • 具有多个值的 return 语句。
  • 带有对象的 return 语句。

带有值的 return 语句

在此块中,我们将讨论具有返回值的 return 语句的工作原理。

语法

以下是使用带有值 − 的 return 语句的语法

return (value);

示例

在此示例中,我们看到一个变量被传递给名为 n() 的函数的值。在函数内部,我们看到两个变量是值的乘积。返回语句将值传递给变量 s。然后,此乘积显示在用户的屏幕上。

<html>
<head>
   <title> JavaScript 中的带值的返回语句 </title>
</head>
<body>
   <h2> 带值的返回语句 </h2>
   <script>
      var s = n(5, 6);
      function n(m, p) {
         return m * p;
      }
      document.write(`此函数返回 ${s} 作为 5 和 6 的乘积。`);;
   </script>
</body>
</html>

在上面的输出中,用户可以看到函数返回从函数 n 传递给变量 s 的乘积值。

没有值的 return 语句

虽然没有值的 return 语句仅用于结束程序,但仍可以利用它。如果没有显式的 return 语句,则函数会自动返回 undefined,这意味着函数中没有 return 关键字。

语法

return();

示例

在此示例中,我们看到一个变量正在传递名为 n() 的函数的值。在函数内部,我们看到两个变量是值的乘积。return 语句将值传递给变量 s。然后,此乘积将打印在用户的屏幕上。

<html>
<head>
   <title> Return statement with value in JavaScript </title>
</head>
<body>
   <h2> return statement with no value.</h2>
   <script>
      var v = func();
      function func() {
         var a = 1;
         while (a) {
            document.write(`${a} `);
            if (a == 5) {
               return;
            }
            a++;
         }
      }
   </script>
</body>
</html>

此示例的输出显示了 while 循环如何每次执行,直到 a 的值变为 5,然后进入 if 语句,使用 return 语句终止循环。

具有多个值的 return 语句

使用数组时,我们可以使用 return 语句返回多个值。JavaScript 函数可能返回单个值。您可以将函数的返回结果打包为数组的组件或对象的属性以返回多个值。

JavaScript 不支持返回多个值的函数。数组对象可以在包装多个值后返回。

注意 −要从数组中删除值或从对象中删除效果,请使用解构赋值方法。

使用数组

在此方法中,我们将看到如何使用数组在 return 语句中拥有多个值。

语法

return [name, age];

示例

在此示例中,我们将看到使用 return 语句在数组中传递多个值的教程。我们采用四个变量,即 book、refIDissue_datedue_date。这四个变量每个都包含一个特定的值。在函数外部,我们采用 const 数组并使用 info() 函数调用对其进行初始化。这反过来会打印值。

<html>
<body>
   <h2>使用数组的具有多个值的返回语句。</h2>
   <script>
      function info() {
         let book = 'Chronicles of Narnia',
         refID = 'ISBN00127645',
         issue_date = '01.06.21',
         due_date = '08.07.21';
         return [book, refID, issue_date, due_date];
      }
      const [book, refID, issue_date, due_date] = info();
      document.write(`Book = ${book}<br>
      Reference ID = ${refID}<br>
      Issue date = ${issue_date}<br>
      Due date = ${due_date}`);
   </script>
</body>
</html>

此输出显示书籍的名称、参考 ID、发行日期和到期日期。返回值以数组的形式返回值。

使用对象

在本教程中,我们将了解如何使用对象返回多个值。

语法

return {android,brand};

示例

在这里,在方法 fun() 中创建了三个变量(android、brand 和 price),并赋予了它们值。然后,作为键值对,我们返回一个包含 android、brand 和 price 的对象。我们获取该对象并在函数外部使用 fun() 方法对其进行初始化。最后,我们打印每个变量。

<html>
<body>
   <h2> 使用对象的多个值的返回语句。</h2>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
      function fun() {
         let android = 'OnePlus 10R 5G',
         brand = 'One Plus',
         price = '$511.09';
         return {
            android,
            brand,
            price
         };
      }
      let {
         android,
         brand,
         price
      } = fun();
         document.write(`Android = ${android}<br>
         Company = ${brand}<br>
         Price = ${price}`
      );
   </script>
</body>
</html>

此输出中显示 Android 的名称、品牌和成本。当值采用对象形式时,它将返回它们。

结论

在本教程中,我们使用了四种方法来展示 JavaScript 中 return 语句的用法。第一种方法展示了当简单 return 语句中包含参数时如何使用它。第二种方法展示了没有参数的 return 语句如何工作。第三种方法展示了如何使用数组和对象将多个值传递给 return 语句。


相关文章