Javascript 简明教程

JavaScript - void Keyword

JavaScript 中的 void 关键字用作一个运算符，用于对给定表达式求值并返回 undefined。void 是 JavaScript 中的一个重要关键字。void 的意思是空或无。

void 关键字可以用作出现在其单个操作数之前的单目运算符，该操作数可以是任何类型。此运算符指定要计算而不返回值或返回 undefined 的表达式。

Syntax

在 JavaScript 中使用 void 关键字的语法 −

void operand;

在上面的语法中，操作数可以是任何表达式。

Return Value

它返回 undefined。

Example

在下面的代码中，我们对 10 使用了“void”关键字。在输出中，您可以看到它返回 undefined。

<html>
<body>
   <div id = "output">The value of the ans variable is:  </div>
   <script>
      let ans = void 10;
      document.getElementById("output").innerHTML += ans;
   </script>
</body>
</html>

The value of the ans variable is: undefined

Importance of Precedence of void Keyword

通常，JavaScript 中的“void”关键字用于返回原始的 undefined 值，但如果您不考虑优先级，它可以返回不同的值。

让我们通过以下示例了解它。

Example

在下面的代码中，void 运算符在第一个表达式中优先于严格相等运算符。因此，它首先将“void 10”计算为 undefined，然后将其与 20 进行比较。因此，它返回 false。

第二个表达式首先计算“10 === 20”的结果为 false，然后计算“void false”的结果为 undefined。

<html>
<body>
   <div id = "output1"> </div>
   <div id = "output2"> </div>
   <script>
      let res1 = void 10 === 20;
      let res2 = void (10 === 20);
      document.getElementById("output1").innerHTML += res1;
      document.getElementById("output2").innerHTML += res2;
   </script>
</body>
</html>

false
undefined

What is javascript:void(0)?

我们来将 javascript:void(0) 分成两部分，并分别了解。

javascript:

您可以使用“javascript:”来创建伪 URL。您可以使用“javascript:”创建交互式 URL。

您需要在“javascript:”后编写表达式，当用户单击锚文本时，它会执行 JavaScript 代码。

让我们通过以下示例了解它。

Example

在下面的代码中，我们创建了链接文本，并使用了 JavaScript URL 作为 href。单击锚文本后，它会将文本写入 HTML 文档。

<html>
   <body>
      <a href = "javascript:document.write('Anchor text is clicked!')"> Click me! </a>
   </body>
</html>

通过这种方式，您可以使用“javascript:uri”创建伪 URL。

void(0)

void(0) 计算 JavaScript 表达式，但它返回 undefined。因此，当您想要执行表达式而不执行任何操作时，可以使用 void(0)。

javascript: void(0)

当您不希望在用户单击链接时将用户导航到另一个网页时，您可以使用“javascript:void(0)”作为锚标记的 href 值。

让我们通过以下示例了解它。

Example

无论您何时在下面的代码中单击锚文本，它都不能执行任何操作。

<html>
   <body>
      <a href = "javascript:void(0)"> Click me! </a>
   </body>
</html>

当您想要使用 URI 更新网页但又不想导航到另一个网页时，您也可以使用“javascript:void(0)”。

Example

在下面的代码中，单击锚文本后，它会更改主体的背景颜色，而不是导航到另一个网页。

<html>
<body>
   <a href = "javascript:void(0);"
   	  onclick = "document.body.style.backgroundColor = 'blue'">
   	  Change Background Color
   </a>
</body>
</html>

The void Keyword with Functions

当您将 void 关键字与 JavaScript 函数一起使用时，它将返回 undefined。之后，如果您尝试执行此函数，它将抛出一个错误，因为“void”运算符将函数作为其操作数并将其计算为 undefined。

Example

在下面的代码中，我们定义了 test() 函数，并且使用了“void”关键字。

此外，使用了 try…catch 块来捕获错误。

在 try 块中，我们执行此函数，并且在输出中，您可以看到控制权转入了 catch 块。

<html>
<body>
<div id = "demo"> </div>
<script>
   const output = document.getElementById('demo');
   try {
      void function test() {
         output.innerHTML += "The test function is executed!";
      }
      test();
   } catch (error) {
      output.innerHTML += "The test function is undefined!";
   }
</script>
</body>
</html>

The test function is undefined!

The void Keyword with Immediately Invoked Function

当您将“void”关键字与 JavaScript 立即调用函数一起使用时，它会首先调用函数表达式，并将其计算为 undefined。

Example

在下面的代码中，我们定义了带有 void 关键字的立即调用函数。您可以看到，它首先调用此函数，并且返回 undefined。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      void function () {
         output.innerHTML = "Unknown function is executed!";
      }();
   </script>
</body>
</html>

Unknown function is executed!

此外，您还可以将“void”关键字与箭头函数一起使用，以从箭头函数中返回 undefined。JavaScript:void() URI 还可用于防止默认情况下重新加载网页，例如 preventDefault() 方法。