JavaScript - void 关键字

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

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

语法

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

void 操作数;

在上述语法中，操作数可以是任意表达式。

返回值

返回 undefined。

示例

在下面的代码中，我们将 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

void 关键字优先级的重要性

通常，JavaScript 的"void"关键字用于返回原始的 undefined 值，但如果不考虑优先级，它可能会返回不同的值。

让我们通过下面的示例来理解。

示例

在下面的代码中，第一个表达式中的 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

什么是 javascript:void(0)?

让我们将 javascript:void(0) 分解成两部分，分别理解。

javascript:

您可以使用"javascript:"创建伪 URL。使用"javascript:"可以创建交互式 URL。

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

让我们通过以下示例来理解。

示例

在下面的代码中，我们创建了链接文本，并使用 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 值。

让我们通过下面的示例来理解。

示例

点击以下代码中的锚文本时，它不会执行任何操作。

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

如果您想使用 URI 更新网页，但不想导航到另一个网页，也可以使用"javascript:void(0)"。

示例

在下面的代码中，当您点击锚文本时，它将更改正文的背景颜色，而不是导航到另一个网页。

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

函数中的 void 关键字

在 JavaScript 函数中使用 void 关键字时，它会返回 undefined。之后，如果您尝试执行该函数，则会抛出错误，因为"void"运算符会将该函数视为其操作数，并将其计算为 undefined。

示例

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

此外，还使用了 trycatch 块来捕获错误。

在 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!

void 关键字与立即调用函数

当 JavaScript 立即调用函数中使用"void"关键字时，它会首先调用函数表达式，并将其求值结果为 undefined。

示例

在下面的代码中，我们使用 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() 方法。