JavaScript - void 关键字

JavaScript 中的void关键字用作一个运算符，它评估给定的表达式并返回undefined。void是 JavaScript 中一个重要的关键字。void 的含义是空或无效。

void关键字可以用作一元运算符，它出现在其唯一操作数之前，该操作数可以是任何类型。此运算符指定要评估的表达式，但不返回值或返回 undefined。

语法

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

void operand;

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

返回值

它返回 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)'。

示例

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

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

void 关键字与函数一起使用

当您将 void 关键字与 JavaScript 函数一起使用时，它会返回 undefined。之后，如果您尝试执行该函数，它将抛出错误，因为 'void' 运算符将该函数视为其操作数并将其评估为 undefined。

示例

在下面的代码中，我们定义了 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!

void 关键字与立即执行函数一起使用

当您将 'void' 关键字与 JavaScript 立即执行函数一起使用时，它首先调用函数表达式并将其评估为 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() 方法。

打印页面