Javascript 简明教程

JavaScript - void Keyword

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

The void keyword in JavaScript is used as an operator that evaluates a given expression and returns undefined. The void is an important keyword in JavaScript. The meaning of the void is null or empty.

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

The void keyword can be used as a unary operator that appears before its single operand, which may be of any type. This operator specifies an expression to be evaluated without returning a value or returning the undefined.

Syntax

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

The syntax to use the void keyword in JavaScript −

void operand;

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

In the above syntax, the operand can be any expression.

Return Value

它返回 undefined。

It returns the undefined.

Example

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

In the below code, we used the 10 with the 'void' keyword. In the output, you can observe that it returns 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 值，但如果您不考虑优先级，它可以返回不同的值。

Generally, the JavaScript 'void' keyword is used to return the primitive undefined value, but if you don’t take precedence in the consideration, it can return a different value.

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

Let’s understand it via the example below.

Example

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

In the below code, the void operator takes precedence over the strict equality operator in the first expression. So, it first evaluates 'void 10' to undefined and compares it with 20. So, it returns false.

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

The second expression evaluates '10 === 20' first to false and evaluates 'void false' to 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) 分成两部分，并分别了解。

Let’s break down the javascript:void(0) into two parts and understand both separately.

javascript:

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

You can use the 'javascript:' to create a pseudo URL. Using 'javascript:' you can create the interactive URL.

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

You need to write the expression after 'javascript:', and when users click the anchor text, it executes the JavaScript code.

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

Let’s understand it via the example below.

Example

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

In the below code, we have created the link text and used the JavaScript URL as a href. When you click the anchor text, it writes it in the HTML document.

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

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

In this way, you can use the 'javascript:uri' to create the pseudo URL.

void(0)

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

The void(0) evaluates the JavaScript expression, but it returns undefined. So, when you want to execute the expression without performing any action, you can use the void(0).

javascript: void(0)

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

When you don’t want to navigate users to another web page when they click on the link, you can use the 'javascript:void(0)' as a href value of the anchor tag.

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

Let’s understand it via the example below.

Example

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

It won’t do anything Whenever you click the anchor text in the code below.

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

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

You can also use the 'javascript:void(0)' when you want to update the web page using the URI but don’t want to navigate to another web page.

Example

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

In the below code, when you click the anchor text, it will change the background color of the body, rather than navigating to another web page.

<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。

When you use the void keyword with JavaScript functions, it returns undefined. After that, if you try to execute the function, it will throw an error, as the 'void' operator considers the function as its operand and evaluates it as undefined.

Example

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

In the below code, we have defined the test() function and used the 'void' keyword with it.

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

Also, used the try…catch block to catch the error.

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

In the try block, we execute the function, and in the output, you can observe that control goes into the catch block.

<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。

When you use the 'void' keyword with the JavaScript immediately invoked function, it invokes the function expression first and evaluates it as undefined.

Example

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

In the below code, we have defined the immediately invoked function with the void keyword. You can observe that it invokes the function first and returns 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() 方法。

Also, you can use the 'void' keyword with the arrow function to return undefined from the arrow function. The JavaScript:void() URI can also be used to prevent the web page reloading by default, like the preventDefault() method.